HTML5项目实战(一)——PC端固定布局—首页——day seven

学习进程：

                    大概了解了HTML标签、CSS样式的种类，属性和用法后，开始进入进入项目实战阶段。

                    以后具体复习和练习中会对前面6天的博客进行补充和修改。

练习成果：

下图是今天实战做的一个页面，传统网站的首页，图片标出了页面的大致结构和使用的标签，具体实战中会遇到很多问题，建议先看教学视频，之后再自己实现，遇到错误先用W3C查询每个标签的具体用法，若未解决再核对视频中代码，寻找差错。

资源链接：图片和代码   

这是html文档的大致结构

知识点总结：

    1、传统网页大概分为四个基本模块：nav 导航、header 头部、section 首页主体、footer 尾部 

    2、id选择器不能重名且有局限性，主要方便js调用，基本一个模块才一个id。灵活运用class="abc edf"选择器设置相同属性和不同属性。

    3、LOGO 采用的是 h1 标签，一般为了让搜索引擎更好的抓取关键字，我们建议一个 页面只有一个 h1，而且是最重要的关键词放在里面。其它的一般用h2标签。这里为了不显示h1中的文字，将其文本左移-9999px（text-indent）。

    4、推荐测试工具网站，可对网页和本地文件的大纲结构进行提炼，使网页或文件的层次一目了然。

   5、section 并不是用来取代 div 的。如果是页面布局，且不是 header、footer 之类的专属区域，都应该使用 div。

   6、了解不同显示器的分辨率，写的时候多缩放窗口，出现溢出等检查自己定位，浮动，宽高，父元素与子元素的关系等是否设置错误。

   7、父元素设置相对点 ，position: relative;但不设置top、left值，子元素根据父元素相对点定位，position: absolute; top: 50%; left: 50%; 

   8、一些css样式的用法：

min-width: 1280px;

/* 如果分辨率小于1280，固定在1280即可，不必自适应 ,无限缩小布局不会变乱*/

outline: none; 

搜索框，点击按钮等经常需要点击时，去掉选中边框样式。

cursor: pointer;

点击按钮经常需要把鼠标设置为手型。

有大标题和内容的区域，多考虑用

letter-spacing: 2px; line-height: 1.5;

正文内容多设置字间距和行高。设置行高还可使其垂直居中。

vertical-align: top;text-indent: 20px; 
很多列表文字内容都需要设置由上到下排列。水平移动位置。

在需要特殊设置各种样式，又很短的文本中，多用短语标签。font-weight: normal;font-style: normal; 去除自带加粗倾斜等样式。

还有默认文字为黄色高亮背景、、给文字添加删除线。