您现在的位置是:首页 > 博客网站制作 > CSS3|Html5CSS3|Html5
学习Html5建站教程(四)用HTML5做个人的网站
杨青2013-07-07【CSS3|Html5】人已围观
简介首先看演示网页然后分析网页结构,每个人的风格和习惯都有所不同,所以在写div布局跟css会有很多不同的方法。尽量做到不要使用太多的div布局,css也要合理使用css缩写规则来书写。延伸阅读:《Div+CSS 规则整理 以及注意问题》
首先看演示网页然后分析网页结构,每个人的风格和习惯都有所不同,所以在写div布局跟css会有很多不同的方法。尽量做到不要使用太多的div布局,css也要合理使用css缩写规则来书写。延伸阅读:《Div+CSS 规则整理 以及注意问题》
页面分析:这是一篇以文章形式来显示的一个网页,结构很分明,有两种方案
现在我们以方案一为例,总体把页面一分为二,<header>是包含在<article>里面的,页脚部分是单独的一块儿。大致结构获悉了后再从局部入手,<header>部分,有主标题、副标题、还有作者署名,前面我们讲过,如果除了主标题,还有一个副标题,那可以把这两个标题写在一个<hgroup>元素中。如果除了主标题之外,还有其他内容,比如内容摘要、发表时间、作者、图片或者小标题链接等,那就应该把他们放在一个 <header>元素中。
<header>
<hgroup>
<h1>给个人博客增加色彩元素提升网站用户体验</h1>
<h2>网页的色彩——决定用户是否驻足停留的关键</h2>
</hgroup>
<p class="Byline">design by DanceSmile</p>
</header>
接下来是文章正文部分:
部分代码:
<div class="Content">
<p>第一眼看到杨青个人博客网站的时候,如果你喜欢...</p>
...
</div>
正文当中还有一幅插图,html5新增加了插图这个<figure>语义元素,<figcaption>不是只能包含文本,任何html元素都可以,比如链接、小图标。<figcaption>包含了对图片的完整说明,所以alt文本就显得多于了,这种情况下,可以把<img>元素中的alt属性删除:
<figure>
<img src="/d/file/jstt/bj/2013-06-19/200e781ddaa1d92cc3996637d06c38b2.jpg">
<figcaption>图片来源:腾讯CDC《浅析网页色彩应用》</figcaption>
</figure>
最后在把上面的代码写在<article>里面。
<footer>部分只是一些简单的页脚信息。
本节重点:
理解<header> <hgroup> <figure> <footer> 在web页面中的应用。示例页面源码:打开演示网页,右键另存为html就可以。
Tags:
很赞哦! ()
相关文章
随机图文
有创意的鼠标悬停效果集锦
分享一些用css3技术,三维、伪元素实现一些有创意的悬停效果响应式纵向时间轴
这是一个简单的响应时间轴,交替的颜色标签,以及伸缩响应式的结构用js+css3来写一个手机栏目导航
有些站长说想做一个手机适应的网站,但是导航太难了,如果要使用框架的话,代码非常多,冗余.再用dreamwear打开,那直接就不响应了.我一直都喜欢用简单的代码来实现,js,css3利用的好,同样可以做出好看实用的导航,关键是代码极少.现在我把步骤分享出来别让这些闹心的套路,毁了你的网页设计
网页设计和做人一样,需要少一些套路,多一些真诚。那么下面就为大家揭穿那些看似好用,但用户体验并不好的设计模式。另外再附上解决办法,避免网页设计中出现这些问题。