第一个做的不是很成熟，第二个感觉好了许多。
一。长安汽车官网
HTML代码
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 body { 8 } 9 </style> 10 <link href="长安样式表.css" rel="stylesheet" /> 11 </head> 12 <body> 13 14 <!--第一栏--> 15 <div id="kd_1"> 16 <!--左上角--> 17 <div class="kd_1L"></div> 18 <div class="kd_1L" style="position: relative;"> 19 <div style="bottom: 0px; position: absolute;"> 20 <img src="jpg/start1.png" height="60" /> 21 </div> 22 </div> 23 <!--中间顶部--> 24 <div style=" 40%; height: 100%; float: left;"> 25 <div class="ul_1"> 26 <div class="ul11">预约参观</div> 27 </div> 28 <div class="ul_1"> 29 <div class="ul11">地图下载</div> 30 </div> 31 <div class="ul_1"> 32 <div class="ul11">投资者关系</div> 33 </div> 34 <div class="ul_1" style=" 10%;"> 35 <div class="ul11">公益</div> 36 </div> 37 <div class="ul_1" style=" 10%;"> 38 <div class="ul11">人才</div> 39 </div> 40 <div class="ul_1" style=" 10%;"> 41 <div class="ul11">新闻</div> 42 </div> 43 <div class="ul_1" style=" 10%;"> 44 <div class="ul11">企业</div> 45 </div> 46 </div> 47 <!-- 右上角--> 48 <div class="kd_1R" style="position: relative;"> 49 <div style="bottom: 0px; position: absolute;"> 50 <img src="jpg/start2.png" height="50" /> 51 </div> 52 </div> 53 </div> 54 55 <!--下拉列表--> 56 <div id="kd_2"> 57 <div style=" 12%; height: 100%; float: left;"> 58 </div> 59 <div style=" 73%; height: 100%; float: left;"> 60 <div class="ul_2">首页</div> 61 <div class="ul_2">乘用车</div> 62 <div class="ul_2">商用车</div> 63 <div class="ul_2">轻型车</div> 64 <div class="ul_2">长安商城</div> 65 <div class="ul_2">购买支持</div> 66 <div class="ul_2">客户服务</div> 67 <div class="ul_2">技术研发</div> 68 <div class="ul_2"> 69 <img src="jpg/biaoti1.png" /> 70 </div> 71 </div> 72 <div style=" 14%; height: 100%; float: left;"> 73 </div> 74 </div> 75 <div style="clear: both;"></div> 76 <!--滚动图片--> 77 <div id="kd_3"></div> 78 <!--活动图片--> 79 <div id="kd_4"> 80 <div class="kd_41" style="text-align: right; 37%;"> 81 <img src="jpg/pp1.jpg" /> 82 </div> 83 <div class="kd_41"> 84 <img src="jpg/pp2.png" /> 85 </div> 86 <div class="kd_41" style="text-align: left; 37%;"> 87 <img src="jpg/pp3.jpg" /> 88 </div> 89 </div> 90 <!--底部--> 91 <div id="kd_5"> 92 <div class="ul5_n2" style="text-align: right;"> 93 <img src="jpg/end1.gif" /> 94 </div> 95 <div class="ul5_n1" style=" 18%;"> 96 <div class="ul_51"> 97 互动 98 </div> 99 <div class="ul_5">在线客服</div> 100 <div class="ul_5">热线电话</div> 101 <div class="ul_5">车友社区</div> 102 <div class="ul_5">会员专区</div> 103 <div class="ul_5">官方微信</div> 104 <div class="ul_5">官方微博</div> 105 </div> 106 <div class="ul5_n2" style=" 6%; text-align: right;"> 107 <img src="jpg/end2.gif" /> 108 </div> 109 <div class="ul5_n1"> 110 <div class="ul_51"> 111 购买 112 </div> 113 <div class="ul_5">4S店查询</div> 114 <div class="ul_5">长安商城</div> 115 <div class="ul_5">积分兑换</div> 116 <div class="ul_5">二手车置换</div> 117 <div class="ul_5">车价计算器</div> 118 </div> 119 <div class="ul5_n2" style=" 9%; text-align: right;"> 120 <img src="jpg/end3.gif" /> 121 </div> 122 <div class="ul5_n1"> 123 <div class="ul_51"> 124 商务 125 </div> 126 <div class="ul_5">金融速贷</div> 127 <div class="ul_5">招商加盟</div> 128 <div class="ul_5">投资者交流</div> 129 <div class="ul_5">供应商之窗</div> 130 </div> 131 </div> 132 <!--版权--> 133 <div id="kd_6"></div> 134 135 136 137 138 </body> 139 </html>
CSS代码：
1 * { 2 margin: 0px; 3 padding: 0px; 4 box-sizing: border-box; 5 } 6 7 /*第一栏*/ 8 #kd_1 { 9 width: 100%; 10 height: 80px; 11 } 12 13 .kd_1L { 14 width: 15%; 15 height: 100%; 16 float: left; 17 } 18 19 .kd_1R { 20 width: 20%; 21 height: 100%; 22 float: left; 23 text-align: left; 24 } 25 26 27 .ul_1 { 28 position: relative; 29 width: 14%; 30 height: 100%; 31 float: right; 32 } 33 34 .ul11 { 35 position: absolute; 36 width: 100%; 37 font-size: 6px; 38 text-align: right; 39 bottom: 10px; 40 cursor: pointer; 41 } 42 43 /*下拉列表*/ 44 #kd_2 { 45 position: absolute; 46 width: 100%; 47 height: 30px; 48 margin-top: 10px; 49 background-color: #808080; 50 opacity: 0.5; 51 -moz-opacity: 0.5; 52 filter: alpha(opacity=50); 53 } 54 55 56 57 .ul_2 { 58 color: white; 59 width: 10%; 60 height: 100%; 61 line-height: 30px; 62 float: left; 63 text-align: center; 64 margin-left: 9px; 65 cursor: pointer; 66 } 67 /*滚动图片*/ 68 #kd_3 { 69 width: 100%; 70 height: 800px; 71 margin-bottom: 10px; 72 } 73 /*活动图片外边框*/ 74 #kd_4 { 75 width: 100%; 76 height: 140px; 77 margin-bottom: 10px; 78 margin-top: 10px; 79 text-align: center; 80 } 81 /*活动图片为内部三个小边框*/ 82 .kd_41 { 83 width: 26%; 84 height: 100%; 85 float: left; 86 } 87 88 /*底部*/ 89 #kd_5 { 90 width: 100%; 91 height: 300px; 92 margin-bottom: 10px; 93 margin-top: 10px; 94 color: #222020; 95 } 96 /*底部大标题*/ 97 .ul_51 { 98 cursor: pointer; 99 100 height: 16%; 101 font-size: 17px; 102 line-height: 50px; 103 font-weight: bolder; 104 } 105 /*底部小标题*/ 106 .ul_5 { 107 cursor: pointer; 108 109 height: 7%; 110 font-size: 8px; 111 } 112 /*底部大文字标记边框*/ 113 .ul5_n1 { 114 width: 15%; 115 height: 100%; 116 float: left; 117 } 118 /*底部图片标记边框*/ 119 .ul5_n2 { 120 width: 18%; 121 height: 100%; 122 float: left; 123 } 124 125 /*版权*/ 126 #kd_6 {
127 width: 1200px;
128 height: 50px;
129 margin-bottom: 10px; 130 margin-top: 10px; 131 } 132 133 div { 134 border: 1px solid red; 135 }
原网站效果：
初步做出效果：
二。雪佛兰官网
HTML代码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>雪佛兰</title> 6 <link href="主页.css" rel="stylesheet" /> 7 </head> 8 <body> 9 <!--标题--> 10 <div class="top"> 11 <!--左侧--> 12 <div class="top_fgl"></div> 13 <!--右侧--> 14 <div class="top_fgr"> 15 <!--右侧上层--> 16 <div class="top_fgr1"> 17 <!--右侧上部第二次分割--> 18 <div class="top_fgr1-1" style=" 6%;">首页</div> 19 <div class="top_fgr1-1">雪佛兰品牌</div> 20 <div class="top_fgr1-1">活动专区</div> 21 <div class="top_fgr1-1" style=" 6%;">网上车贷</div> 22 <div class="top_fgr1-1">经销商查询</div> 23 <div class="top_fgr1-1" style=" 11%;">预约试驾</div> 24 <div class="top_fgr1-1" style=" 11%;">在线客服</div> 25 <div class="top_fgr1-1" style=" 11%;">雪佛兰金领结服务</div> 26 <div class="top_fgr1-1">CHEVY TECH</div> 27 <div class="top_fgr1-1"></div> 28 <div class="top_fgr1-1"></div> 29 </div> 30 <!-- 右侧下层--> 31 <div class="top_fgr2"> 32 <!--右侧下部第二次分割--> 33 <div class="top_fgr2-1"> 34 所有车型<br /> 35 All Vehicles 36 </div> 37 <div class="top_fgr2-1"> 38 迈锐宝XL<br /> 39 MalibuXL 40 </div> 41 <div class="top_fgr2-1"> 42 迈锐宝<br /> 43 Malibu 44 </div> 45 <div class="top_fgr2-1"> 46 科鲁兹<br /> 47 Cruze 48 </div> 49 <div class="top_fgr2-1"> 50 科沃兹<br /> 51 Cavalier 52 </div> 53 <div class="top_fgr2-1"> 54 赛欧3<br /> 55 Sail3 56 </div> 57 <div class="top_fgr2-1"> 58 探界者<br /> 59 Equinox 60 </div> 61 <div class="top_fgr2-1"> 62 科帕奇<br /> 63 Captiva 64 </div> 65 <div class="top_fgr2-1"> 66 全新创酷<br /> 67 Trax 68 </div> 69 <div class="top_fgr2-1"> 70 乐风RV<br /> 71 Lova RV 72 </div> 73 <div class="top_fgr2-1"> 74 科迈罗<br /> 75 Camaro 76 </div> 77 <div class="top_fgr2-1"> 78 皮卡<br /> 79 Pickup 80 </div> 81 <div class="top_fgr2-1"></div> 82 <div class="top_fgr2-1"></div> 83 </div> 84 </div> 85 </div> 86 <div class="top-2"></div> 87 <!--大图轮播--> 88 <div class="big_jpg"> 89 <img src="jpg/lunbo%20.jpg" style=" 100%; height: 100%;" /> 90 </div> 91 92 <!-- 滚动条--> 93 <div class="gun"> 94 <marquee scrolldelay="10" scrollamount="10" direction="left">你好</marquee> 95 </div> 96 <!--合作单位--> 97 <div class="parter"> 98 <!-- 合作单位分割--> 99 <div class="parter_fg" style="text-align: right;"> 100 <img src="jpg/parter1.png" /> 101 </div> 102 <div class="parter_fg"> 103 <img src="jpg/parter2.png" /> 104 </div> 105 <div class="parter_fg" style="text-align: left;"> 106 <img src="jpg/parter3.png" /> 107 </div> 108 109 </div> 110 <!--二维码--> 111 <div class="code"> 112 <div class="code_fg"></div> 113 <div class="code_fg"></div> 114 <div class="code_fg"> 115 <div class="code_fg-3"> 116 <img src="jpg/weixin1.png" /> 117 </div> 118 <div class="code_fg-3"> 119 <img src="jpg/weixin2.png" /> 120 </div> 121 <div class="code_fg-3"> 122 <img src="jpg/weixin3.png" /> 123 </div> 124 <div class="code_fg-3"> 125 <img src="jpg/weixin4.png" /> 126 </div> 127 <div class="code_fg-3"> 128 <img src="jpg/weixin5.png" /> 129 </div> 130 <div class="code_fg-3"></div> 131 <div class="code_fg-3"></div> 132 </div> 133 134 </div> 135 <!-- 服务--> 136 <div class="service"> 137 <div class="service_fg" style="border: none; height: 100%;"></div> 138 <div class="service_fg" style="border: none; height: 100%;"></div> 139 <div class="service_fg" style="border: none; height: 100%; 10%;"> 140 <div class="service_fg-1">全系车型</div> 141 <div class="service_fg-1">轿车</div> 142 <div class="service_fg-1">迈锐宝XL</div> 143 <div class="service_fg-1">迈锐宝</div> 144 <div class="service_fg-1">全新科鲁兹两厢版</div> 145 <div class="service_fg-1">全新科鲁兹</div> 146 <div class="service_fg-1">科沃兹</div> 147 <div class="service_fg-1">赛欧3</div> 148 <div class="service_fg-1">SUV</div> 149 <div class="service_fg-1">探界者</div> 150 <div class="service_fg-1">科帕奇</div> 151 <div class="service_fg-1">全新创酷</div> 152 <div class="service_fg-1">休旅车</div> 153 <div class="service_fg-1">乐风RV</div> 154 <div class="service_fg-1">跑车</div> 155 <div class="service_fg-1">第六代科迈罗</div> 156 <div class="service_fg-1">皮卡</div> 157 <div class="service_fg-1">库罗德</div> 158 <div class="service_fg-1">索罗德</div> 159 </div> 160 <div class="service_fg" style=" 8%;"> 161 <div class="service_fg-1">雪佛兰品牌</div> 162 <div class="service_fg-1">梦·创未来</div> 163 <div class="service_fg-1">经典一刻</div> 164 <div class="service_fg-1">明星车系</div> 165 <div class="service_fg-1">合作品牌</div> 166 <div class="service_fg-1">CHEVY TECH</div> 167 </div> 168 <div class="service_fg" style=" 6%;"> 169 <div class="service_fg-1">活动专区</div> 170 <div class="service_fg-1">最新活动</div> 171 <div class="service_fg-1">新闻报道</div> 172 </div> 173 <div class="service_fg" style=" 6%;"> 174 <div class="service_fg-1">网上车贷</div> 175 <div class="service_fg-1">产品介绍</div> 176 <div class="service_fg-1">品牌套餐</div> 177 <div class="service_fg-1">网上申请</div> 178 <div class="service_fg-1">活动资讯</div> 179 <div class="service_fg-1">车贷计算</div> 180 </div> 181 <div class="service_fg" style=" 12%;"> 182 <div class="service_fg-1">试乘试驾丨经销商查询</div> 183 <div class="service_fg-1">预约试驾</div> 184 <div class="service_fg-1">雪佛兰特约经销商</div> 185 <div class="service_fg-1">雪佛兰特约维修站</div> 186 <div class="service_fg-1">雪佛兰数字4S店</div> 187 </div> 188 <div class="service_fg" style=" 10%;"> 189 <div class="service_fg-1">雪佛兰金领结服务</div> 190 <div class="service_fg-1">服务特色</div> 191 <div class="service_fg-1">雪佛兰延保产品</div> 192 <div class="service_fg-1">用车小贴士</div> 193 </div> 194 <div class="service_fg" style=" 10%;"> 195 <div class="service_fg-1">集团网站</div> 196 <div class="service_fg-1">上汽通用汽车</div> 197 <div class="service_fg-1">上汽通用汽车金融</div> 198 <div class="service_fg-1">纯正配件</div> 199 <div class="service_fg-1">车享平台</div> 200 <div class="service_fg-1">诚新二手车</div> 201 <div class="service_fg-1">经销商招募</div> 202 </div> 203 <div class="service_fg" style="border: none;"></div> 204 <div class="service_fg" style="border: none;"></div> 205 </div> 206 <!-- 底部--> 207 <div class="end"> 208 联系我们 : 中国上海·浦东新区申江路1500号 (邮编201206) 209 全国免费服务热线 : 800-820-1912 400-820-1912 210 未开通800电话服务的地区及手机用户 : 021-50554584 211 </div> 212 <div class="end"> 213 隐私政策 214 Copyright © 2017 SAIC General Motors Co., Ltd. All Rights Reserved 215 沪ICP备05015204号-10 216 </div> 217 <!--移动客服--> 218 <div class="kefu"> 219 <img src="jpg/kefu.png" /> 220 </div> 221 </body> 222 </html>
CSS代码：
1 * { 2 margin: 0px; 3 padding: 0px; 4 } 5 6 div { 7 8 } 9 /*顶部*/ 10 .top { 11 width: 100%; 12 height: 100px; 13 position: fixed; 14 background-color: white; 15 } 16 17 .top-2 { 18 width: 100%; 19 height: 100px; 20 } 21 /*左侧分割*/ 22 .top_fgl { 23 width: 25%; 24 height: 100%; 25 float: left; 26 } 27 /*右侧分割*/ 28 .top_fgr { 29 width: 75%; 30 height: 100%; 31 float: left; 32 } 33 /*右侧上部分割*/ 34 .top_fgr1 { 35 width: 100%; 36 height: 40%; 37 } 38 /*右侧上部第二次分割*/ 39 .top_fgr1-1 { 40 width: 9%; 41 height: 100%; 42 float: left; 43 font-size: 2px; 44 text-align: center; 45 line-height: 35px; 46 } 47 /*右侧下部分割*/ 48 .top_fgr2 { 49 width: 100%; 50 height: 60%; 51 } 52 /*右侧下部第二次分割*/ 53 .top_fgr2-1 { 54 width: 7.1%; 55 height: 100%; 56 float: left; 57 font-size: 2px; 58 text-align: center; 59 } 60 /*大图轮播*/ 61 .big_jpg { 62 width: 100%; 63 height: 400px; 64 } 65 66 .big_jig img { 67 } 68 /*滚动条*/ 69 .gun { 70 height: 20px; 71 width: 65%; 72 margin: 0 auto; 73 } 74 /*合作单位*/ 75 .parter { 76 width: 100%; 77 height: 80px; 78 } 79 /*合作单位分割*/ 80 .parter_fg { 81 width: 33%; 82 height: 100%; 83 float: left; 84 text-align: center; 85 } 86 87 /*二维码*/ 88 .code { 89 width: 100%; 90 height: 80px; 91 } 92 /*二维码分割*/ 93 .code_fg { 94 width: 33%; 95 height: 100%; 96 float: left; 97 } 98 /*二维码第三部分第三次分割*/ 99 .code_fg-3 { 100 width: 14%; 101 height: 100%; 102 float: left; 103 } 104 105 /*服务*/ 106 .service { 107 width: 100%; 108 height: 500px; 109 } 110 /*服务分割*/ 111 .service_fg { 112 font-size: 5px; 113 border-color: black; 114 border-left: groove; 115 width: 9%; 116 float: left; 117 } 118 119 .service_fg-1 { 120 height: 5%; 121 } 122 /*底部*/ 123 .end { 124 text-align: center; 125 font-size: 3px; 126 height: 50px; 127 width: 100%; 128 } 129 /*移动客服*/ 130 .kefu { 131 position: fixed; 132 bottom: 95px; 133 right: 10px; 134 width: 40px; 135 height: 40px; 136 }
原网站效果：
生成效果：
