一，怎么对写错的样式进行调试？
1，看编辑器会不会报错，一般有下划线提示。
2，看浏览器的调试台（F12），选择elements选项中需要调试的元素，然后通过style选项进行调试。在调试台中可以随意更改元素的属性值进行调试，但是不会对更改源代码。
二，背景图片属性
1，background-attchment ： fixed 让背景进行固定。
2，background-size ：
值 ： width 和 height - > 背景图的宽和高， 可以为 100% 100% ，可以将背景图铺满容器。
值 ： 单词（cover）覆盖 可以将背景图片等比例地铺满整个容器，但是超出容器部分不会显示
（contain）包含 可以将图片等比例的调整到刚好不会超出容器的大小，但是不会完全铺满容器
三，CSS字体类型
font-family : 宋体 微软雅黑
四，CSS字体大小
font-size : 16px (默认大小)
注：建议字体大小都设置成偶数。(主要目的是考虑文字对齐)
五，CSS字体粗细
font-weight :
值 100 200 ... 900
三个档：100 200 300 (细) 400 500 ( 正常 ) 600 700 800 900 (粗)
单词 ( normal 默认表示正常 , bold 加粗 )
六，CSS字体样式
font-style :
normal(正常)
italic（倾斜）
color：设置字体颜色
七，CSS文本修饰
text-decoration: overline(上划线) underline(下划线) line-through(删除线)
可以设置多个值。
八，CSS文本大小写（英文）
text-transform: lowercase(单词小写) uppercase(单词大写) capitalize(首字母大写)
九，CSS文本缩进（中文）
text-indent: 32px;
十，CSS文本对齐方式
text-align : left right center justify(两端点对齐)
十一，段落的行高
十二，间距与折行
页面布局实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="header"> 11 <a href="#" >trevlsotheme</a> 12 <input type="text" placeholder="SEARCH"> 13 </div> 14 <div id="banner"> 15 <a href="#"><img src="#" alt="图片"></a> 16 </div> 17 <div id="news" > 18 <div 19 <h3><a href="#">公司新闻</a></h3> 20 <ul> 21 <li> 22 <a href="#">董事长召开大会</a> 23 </li> 24 <li> 25 <a href="#">中国电器分会</a> 26 </li> 27 <li> 28 <a href="#">董事长访问中国住的大使馆</a> 29 </li> 30 <li> 31 <a href="#">企业文化与企业</a> 32 </li> 33 <li> 34 <a href="#">董事长的销售会议</a> 35 </li> 36 <li> 37 <a href="#">喜迎七一</a> 38 </li> 39 </ul> 40 </div> 41 <div > 42 <h3><a href="#">公司介绍</a></h3> 43 <p>公司成立于1984年<br>经过几十年的发展</p> 44 <p>已成为电器制造，房地产开发和金融<br>投资的大企业</p> 45 </div> 46 <div> 47 <h3><a href="#">人才招聘</a></h3> 48 <p>培养一流的人才，铸造一六的工程<br>实现员工与企业的共同发展</p> 49 <a href="#"><img src="" alt="图片"></a> 50 </div> 51 </div> 52 <div id="project"> 53 <h3><a href="">市场项目</a></h3> 54 <a href="#"><img src="" alt="图片"></a> 55 <p>交通轨道</p> 56 <a href="#"><img src="" alt="图片"></a> 57 <p>节能环保</p> 58 <a href="#"><img src="" alt="图片"></a> 59 <p>航空航天</p> 60 <a href="#"><img src="" alt="图片"></a> 61 <p>石油，天然气与采矿</p> 62 </div> 63 <div id="product"> 64 65 </ul> 66 <div> 67 <h3>产品中心</h3><hr> 68 <ul> 69 <li><a href="#">汽车电机</a></li> 70 <li><a href="#">日用电机</a></li> 71 <li><a href="#">特种电机</a></li> 72 <li><a href="#">大功率电机</a></li> 73 <li><a href="#">电工设备</a></li> 74 </ul> 75 <ul> 76 <li><a href="#">自动化</a></li> 77 <li><a href="#">系统基础</a></li> 78 <li><a href="#">搅拌机</a></li> 79 <li><a href="#">电动车辆</a></li> 80 </ul> 81 <ul> 82 <li><a href="#">电池电源</a></li> 83 <li><a href="#">输入设备</a></li> 84 <li><a href="#">楼盘信息</a></li> 85 <li><a href="#">金融产品</a></li> 86 </div> 87 <div> 88 <h3>技术研发</h3><hr> 89 <ul> 90 <li><a href="">科技力量</a></li> 91 <li><a href=""></a>先进设备</li> 92 <li><a href="">研发测试</a></li> 93 <li><a href="">工艺流程</a></li> 94 </ul> 95 </div> 96 <div> 97 <h3>营销网络</h3><hr> 98 <a href="#"><img src="" alt="图片"></a> 99 </div> 100 </div> 101 <div id="foot"> 102 <a href="">网站地图</a> 103 <a href="">联系我们</a> 104 <a href="">关注入口</a> 105 <a href="">采购系统入口</a> 106 <p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</p> 107 <a href="">分享到</a> 108 </div> 109 </body> 110 </html>
