创建大框
<body> <!--头部信息--> <div id="headMessage"> </div> <!--头部广告--> <div id="headAd"> </div> <!--头部搜索--> <div id="headSearch"> </div> <!--首屏内容--> <div id="firstScreen"> </div> <!--有好货与爱逛街--> <div id="layer"> </div> <!--右侧固定定位导航--> <div id="tool"> </div> </body>
关于行高的知识
1.行高的属性值
h3{ line-height:normal;/*默认值,与字体大小和浏览器有关，微软雅黑1.32，宋体1.41*/
line-height:1.5;/*font-size的1.5倍*/
line-height:200%;/*font-size的2倍*/
line-height:50px;/*固定值*/
line-height:5em;/*1em = 1 font-size,相当于字体大小的5倍*/
}
<h3>刘德华</h3>
2.行高设置不同值有什么区别？
line-height值设置成1.5时，子元素的行高也会继承1.5，子元素的行高也是字体大小乘以1.5。但是如果父元素的line-height值设置成了其他值，子元素的行高是父元素的计算之后的行高。
自定义样式表
body,p,h1,h2,h3,h4{ margin:0;/*外边距设置为0*/ } ul{ margin:0; padding:0; list-style:none; } img{ border:none; vertical-align: middle;/*在div标签中插入一张图片之后，保证图片与文字之间没有间隙*/ } a{ text-decoration: none;/*去掉下划线*/ color:#3c3c3c; } i{ font-style:normal; } input,button{ margin:0; padding:0; } button{ outline:none;/*鼠标移动到按钮上，按钮颜色会加重，不需要*/ } /*给body添加字体大小*/ body{ /*为什么在这里行高要用数字，如果使用数字为行高，子元素也会继承1.5，如果使用其他的表示方式，子元素行高的大小是父元素的行高*/ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','5b8b4f53',sans-serif; color:#3c3c3c; background-color:#f4f4f4; } .clearfix:after{ content:''; display:block; clear:both; } .fl{ float:left; } .fr{ float:right; } .leayer{ width:1190px; margin:0 auto; } .c4{ color:#f40; } .c5{ color:#f50; } .mt10{ margin-top:10px; } .mr10{ margin-right:10px; }
将reset.css引入进来
CSS中的@规则