1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>仿山东理工大学</title> 6 <link rel="stylesheet" href="css/wangye.css"> 7 <link href="img/favicon.ico" rel="shortcut icon"> 8 </head> 9 <body> 10 <!--页头--> 11 <div id="head_1"> 12 <div class="center_div head_div"> 13 <img class="img1" src="img/QQ图片20171226133838.jpg"> 14 <!--右边搜索框--> 15 <div class="head_div1"> 16 <div class="hdd div_hdd1"> 17 <div class="hdd1_div"> 18 <a href="#">在校生</a> 19 <span>+</span> 20 <a href="#">教职工</a> 21 <span>+</span> 22 <a href="#">考生</a> 23 <span>+</span> 24 <a href="#">校友</a> 25 <span>+</span> 26 <a href="#">访客</a> 27 <span>+</span> 28 </div> 29 </div> 30 <div class="hdd div_hdd2"> 31 <input type="text" class="text1" placeholder="请输入关键字"> 32 <input type="image" src="img/QQ图片20171226145940.jpg" class="text2"> 33 </div> 34 </div> 35 </div> 36 </div> 37 <!--导航--> 38 <div class="dh"> 39 <div class="dh_div"> 40 <ul> 41 <li> <a href="#">首页</a></li> 42 <li> <a href="#">新闻网</a></li> 43 <li> <a href="#">学校概况</a></li> 44 <li> <a href="#">机构设置</a></li> 45 <li> <a href="#">师资队伍</a></li> 46 <li> <a href="#">科学研究</a></li> 47 <li> <a href="#">人才培养</a></li> 48 <li> <a href="#">招生就业</a></li> 49 <li> <a href="#">大学文化</a></li> 50 <li> <a href="#">国际交流</a></li> 51 <li> <a href="#">校友联谊</a></li> 52 </ul> 53 </div> 54 </div> 55 <!--轮播图--> 56 <div class="lbt"> 57 <img src="img/QQ图片20171226155554.jpg"> 58 </div> 59 <!--内容--> 60 61 62 <!--内容--> 63 <div class="nr1"> 64 <div class="nr1_1"> 65 <div class="nr2"> 66 <div class="nr2_1"> 67 <span class="span2">学校新闻</span> 68 <span class="span1"><a href="#">【更多】</a></span> 69 <div><img src="img/QQ20171223095502.jpg" alt="" class="nr2_img"></div> 70 <span class="span3"> 71 <h4>我校与周村区签订战略合作协议</h4> 72 </span> 73 <span class="span4"> 74 <a href="#">--吕传毅提出“大米小米一起熬”校...</a> 75 </span> 76 <p class="p2"> 77 <span class="p1">本网讯12月24日，山东理工大学与周村区战略合作签约仪式暨2017校城融合创新发展论坛，在杏园宾馆北楼二层会议室举行。由此，双方步入融合发...</span> <span class="span_1">[详细]</span> 78 </p> 79 <div class="liebiao"> 80 <ul> 81 <li><a href="#">我校女篮实现CUBA山东赛区三连冠</a><span>12-26</span></li> 82 <li><a href="#">山东省法学理论研究会年会在我校举行</a><span>12-26</span></li> 83 <li><a href="#">学校成立校欧美同学会</a><span>12-26</span></li> 84 <li><a href="#">“不忘初心幼儿情 童展歌舞迎新年”联欢会...</a><span>12-26</span></li> 85 <li><a href="#">省学校后勤协会七届一次理事会在我校召开 </a><span>12-26</span></li> 86 <li><a href="#">“E路领航”2017年度学风建设表彰会举行</a><span>12-26</span></li> 87 </ul> 88 </div> 89 </div> 90 <div class="nr2-2"> 91 <span class="n22_1">通知公告</span> 92 <span class="n22_2"><a href="#">[更多]</a></span> 93 <span><img src="img/QQ20171223095502.jpg" width="100%"></span> 94 <div class="n22_lb2"> 95 <ul> 96 <li><span><a href="#">2018年招收攻读硕士学位研究生招生简章</a></span></li> 97 <li><span><a href="#">2018年全国硕士研究生招生考试公告</a></span></li> 98 <li><span><a href="#">诚聘海内外高层次人才启事</a></span></li> 99 </ul> 100 </div> 101 </div> 102 </div> 103 <div class="nr3"> 104 <div class="nr3_1"> 105 <span class="nr3_span1">视频理工</span> 106 <span class="nr3_span">图说理工</span> 107 <div><img src="img/QQ20171223095502.jpg" width="100%"></div> 108 <div class="nr3_img"> 109 <img src="img/QQ20171227111320.png" width="100%"> 110 </div> 111 </div> 112 <div class="nr3_2"> 113 <span class="nr3_mt">媒体报道</span> 114 <span class="nr3_gd">[更多]</span> 115 <div class="nr3_img"><img src="img/QQ20171223095502.jpg" width="100%"></div> 116 <div class="nr3_lieb"> 117 <ul> 118 <li><span>〖山东省教育厅〗</span><a href="#">定标准、划底线，山理工“七项规定”...</a></li> 119 <li><span>〖齐鲁晚报〗</span><a href="#">实施人才优先战略,打造高水平师资队...</a></li> 120 <li><span>〖大众网〗</span><a href="#">山东理工大学管理学院举行冬季呼吸道...</a></li> 121 <li><span>〖大众网〗</span><a href="#">山东理工大学管理学院举行海外游学分...</a></li> 122 <li><span>〖大众网〗</span><a href="#">山东理工大学管理学院邀请新西兰国立...</a></li> 123 <li><span>〖山东省教育厅〗</span><a href="#">山理工推出思政工作质量保障体系构建...</a></li> 124 <li><span>〖大众网〗</span><a href="#">周村区与山东理工大学2017校城融合创...</a></li> 125 </ul> 126 </div> 127 </div> 128 </div> 129 <div class="nr4"> 130 <div class="nr4_1"> 131 <span class="nr4_span1">学术活动</span> 132 <span class="nr4_span2">[更多]</span> 133 <div class="nr4_img"><img src="img/QQ20171223095502.jpg" width="100%"></div> 134 <div class="nr4_img1"><img src="img/QQ20171221171528.png"> 135 <span class="nr4_lieb1"> 136 <ul> 137 <li><a href="#">文史研究的选题、设计与研...</a></li> 138 <li>主讲:郑杰文教授 </li> 139 <li>地点:文学与新闻传播学院会议室 </li> 140 </ul> 141 </span> 142 </div> 143 <div class="nr4_img2"> 144 <img src="img/QQ20171221171528.png"> 145 <span class="nr4_lieb2"> 146 <ul> 147 <li><a href="#">文史研究的选题、设计与研...</a></li> 148 <li>主讲:郑杰文教授 </li> 149 <li>地点:文学与新闻传播学院会议室 </li> 150 </ul> 151 </span> 152 </div> 153 <div class="nr4_img3"> 154 <img src="img/QQ20171221171528.png"> 155 <span class="nr4_lieb3"> 156 <ul> 157 <li><a href="#">文史研究的选题、设计与研...</a></li> 158 <li>主讲:郑杰文教授 </li> 159 <li>地点:文学与新闻传播学院会议室 </li> 160 </ul> 161 </span> 162 </div> 163 <div class="nr4_img4"> 164 <img src="img/QQ20171221171528.png"> 165 <span class="nr4_lieb4"> 166 <ul> 167 <li><a href="#">文史研究的选题、设计与研...</a></li> 168 <li>主讲:郑杰文教授 </li> 169 <li>地点:文学与新闻传播学院会议室 </li> 170 </ul> 171 </span> 172 </div> 173 </div> 174 <div class="nr4_2"> 175 <div> 176 <span class="nr4_zt">专题信息</span> 177 <span class="nr4_gd">[更多]</span> 178 <div class="div_img"><img src="img/QQ20171223095502.jpg" width="100%"></div> 179 <div class="div_lieb"> 180 <ul> 181 <li><a href="">山东理工大学“审核评估评建”专题网站</a></li> 182 <li><a href="">山东理工大学“一精神”“一规划”专题</a></li> 183 <li><a href="">山东理工大学“两学一做”学习教育网站</a></li> 184 </ul> 185 </div> 186 </div> 187 </div> 188 </div> 189 </div> 190 191 </div> 192 193 <!--底部导航--> 194 <div class="footdh"> 195 <div class="fdb"> 196 <ul> 197 <li><a href="#">站点导航</a></li> 198 <li><a href="#">在线学习</a></li> 199 <li><a href="#">校园VPN</a></li> 200 <li><a href="#">邮件系统</a></li> 201 <li><a href="#">办公系统</a></li> 202 <li><a href="#">招标采购</a></li> 203 <li><a href="#">信息公开</a></li> 204 <li><a href="#">图书馆</a></li> 205 </ul> 206 </div> 207 </div> 208 209 <!--底部--> 210 <div class="db"> 211 <img src="img/QQ20171226223605.png" alt=""> 212 </div> 213 </body> 214 </html>
css样式
View Code
效果图：
网页二：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>企业名称</title> 6 <link rel="stylesheet" href="wangye1.css"> 7 </head> 8 <body> 9 <!--页头--> 10 <div class="yt"> 11 <div class="yt1"> 12 <img src="logo.gif"> 13 </div> 14 <div class="yt2"> 15 <span>搜索产品</span> 16 <input type="text" id="yt2_text"> 17 <input type="image" src="btn_srh.gif" class="yt2_img"> 18 </div> 19 </div> 20 <!--导航--> 21 <div class="dh"> 22 <div class="dh1"> 23 <ul> 24 <li><a href="">首页</a></li> 25 <li><a href="">企业新闻</a></li> 26 <li><a href="">企业简介</a></li> 27 <li><a href="">产品展厅</a></li> 28 <li><a href="">企业历史</a></li> 29 <li><a href="">招商加盟</a></li> 30 <li><a href="">网上下单</a></li> 31 <li><a href="">联系我们</a></li> 32 </ul> 33 </div> 34 <div class="dh2"> 35 <ul> 36 <li>企业动态</li> 37 <li>领导活动</li> 38 <li>产品资讯</li> 39 <li>通知公告</li> 40 </ul> 41 </div> 42 </div> 43 <!--图片内容1--> 44 <div class="tpnr1"> 45 <div class="tpnr1_div"> 46 <img src="pic.jpg" alt=""> 47 <input type="image" src="btn_login.gif"> 48 <input type="image" src="btn_login1.gif"> 49 </div> 50 <div class="tpnr2_div"> 51 <h2>定位层始终保持在当前可见屏</h2> 52 <div class="tpnr_span"> 53 <p class="nrtp_p">看到很多这样的广告，页面两边各方一个方块图片广告；拖动滚动条时广告随之滚动，始终停留在屏幕的上方或下方。对..</p> 54 </div> 55 <div class="tpnr2_img"> 56 <img src="tb-1.jpg" alt=""> 57 58 </div> 59 <div class="tpnr2_lieb"> 60 <ul> 61 <li>纯CSS实现DIV三列等高布局</li> 62 <li>HTML元素的ID和Name属性的区别</li> 63 <li>完美兼容ie6,ie7,ie8以及firefox的CSS透明滤镜</li> 64 <li>DIV+CSS实现放大镜效果的分页样式</li> 65 <li>javascript为FF设置首页</li> 66 <li>复制到系统剪切板之IE,FF兼容版</li> 67 </ul> 68 </div> 69 <div class="tpnr2_lieb2"> 70 <ul> 71 <li>09-11</li> 72 <li>09-13</li> 73 <li>09-19</li> 74 <li>10-05</li> 75 <li>10-11</li> 76 <li>10-12</li> 77 </ul> 78 </div> 79 </div> 80 <div class="tpnr3_div"> 81 <img src="cpdg.jpg" alt="" class="img1"> 82 <div class="tpnr3_nr1"> 83 <img src="icon2.gif" alt=""> 84 </div> 85 <div class="tpnr3_nr2"> 86 <ul> 87 <li>语音业务:</li> 88 <li>普通电话丨数字语音中继</li> 89 </ul> 90 </div> 91 <div class="tpnr3_nr3"> 92 <ul> 93 <li>语音业务:</li> 94 <li>普通电话丨数字语音中继</li> 95 </ul> 96 </div> 97 <div class="tpnr3_nr4"> 98 <ul> 99 <li>语音业务:</li> 100 <li>普通电话丨数字语音中继</li> 101 </ul> 102 </div> 103 </div> 104 </div> 105 <!--图片内容2文字内容--> 106 <div class="wznr"> 107 <div class="wznr1"> 108 <div class="wznr1_1"> 109 <div class="wznr1_1_1"><img src="rmcp.gif" alt=""></div> 110 <div class="tp1"> 111 <div class="wznr1_img"> 112 <ul> 113 <li><img src="pic4.gif" alt=""></li> 114 <li>产品名称</li> 115 </ul> 116 </div> 117 <div class="wznr2_img"> 118 <ul> 119 <li><img src="pic4.gif" alt=""></li> 120 <li>这里是产品名称</li> 121 </ul> 122 </div> 123 <div class="wznr3_img"> 124 <ul> 125 <li><img src="pic4.gif" alt=""></li> 126 <li>产品名称</li> 127 </ul> 128 </div> 129 <div class="wznr4_img"> 130 <ul> 131 <li><img src="pic4.gif" alt=""></li> 132 <li>这里是产品名称</li> 133 </ul> 134 </div> 135 <div class="wznr5_img"> 136 <ul> 137 <li><img src="pic4.gif" alt=""></li> 138 <li>产品名称</li> 139 </ul> 140 </div> 141 </div> 142 <div class="tp2"> 143 <div class="wznr_img1"> 144 <ul> 145 <li><img src="pic4.gif" alt=""></li> 146 <li>产品名称</li> 147 </ul> 148 </div> 149 <div class="wznr_img2"> 150 <ul> 151 <li><img src="pic4.gif" alt=""></li> 152 <li>这里是产品名称</li> 153 </ul> 154 </div> 155 <div class="wznr_img3"> 156 <ul> 157 <li><img src="pic4.gif" alt=""></li> 158 <li>产品名称</li> 159 </ul> 160 </div> 161 <div class="wznr_img4"> 162 <ul> 163 <li><img src="pic4.gif" alt=""></li> 164 <li>这里是产品名称</li> 165 </ul> 166 </div> 167 <div class="wznr_img5"> 168 <ul> 169 <li><img src="pic4.gif" alt=""></li> 170 <li>产品名称</li> 171 </ul> 172 </div> 173 </div> 174 </div> 175 <div class="wznr1_2"> 176 <div class="wznr1_2-1"> 177 <span><img src="qiyelis-1.jpg" alt="">企业历史</span> 178 <div class="gd1"><a href="#">更多</a></div> 179 <div class="div_gd"><img src="gd-2.jpg" alt=""></div> 180 <div class="div_pic"> 181 <img src="pic5.gif" alt=""> 182 </div> 183 <div class="div_h5"> 184 <h5>多角度对比苹果ipod系列真机</h5> 185 <p>导言：北京时间9月2日凌晨1点，苹果在旧金山举行新品发布会，数码特派记者在美国现场直播</p> 186 </div> 187 <div class="wznr1_2_img"> 188 <img src="www-1.jpg" alt=""> 189 </div> 190 <div class="div_ul"> 191 <ul> 192 <li>纯CSS实现DIV三列等高布局</li> 193 <li>HTML元素的ID和Name属性的区别</li> 194 <li>完美兼容ie6,ie7,ie8以及firefox的CSS透明滤镜</li> 195 <li>DIV+CSS实现放大镜效果的分页样式</li> 196 <li>javascript为FF设置首页</li> 197 <li>复制到系统剪切板之IE,FF兼容版</li> 198 <li>DIV+CSS实现放大镜效果的分页样式</li> 199 </ul> 200 </div> 201 </div> 202 <div class="wznr1_2-2"> 203 <span><img src="qiyelis-1.jpg" alt="">招商加盟</span> 204 <div class="gd2"><a href="#">更多</a></div> 205 <div class="div_gd1"><img src="gd-2.jpg" alt=""></div> 206 <div class="div_pic2"> 207 <img src="pic5.gif" alt=""> 208 </div> 209 <div class="div_h5_2"> 210 <h5>多角度对比苹果ipod系列真机</h5> 211 <p>导言：北京时间9月2日凌晨1点，苹果在旧金山举行新品发布会，数码特派记者在美国现场直播</p> 212 </div> 213 <div class="wznr1_2_img2"> 214 <img src="www-1.jpg" alt=""> 215 </div> 216 <div class="div_ul2"> 217 <ul> 218 <li>纯CSS实现DIV三列等高布局</li> 219 <li>HTML元素的ID和Name属性的区别</li> 220 <li>完美兼容ie6,ie7,ie8以及firefox的CSS透明滤镜</li> 221 <li>DIV+CSS实现放大镜效果的分页样式</li> 222 <li>javascript为FF设置首页</li> 223 <li>复制到系统剪切板之IE,FF兼容版</li> 224 <li>DIV+CSS实现放大镜效果的分页样式</li> 225 </ul> 226 </div> 227 </div> 228 </div> 229 </div> 230 <div class="wznr2"> 231 <div class="wznr2_1"> 232 <img src="wd-1.jpg"> 233 <div class="chapin"> 234 <img src="xtb-1.jpg" alt=""><span>最新出的这个产品如何使用？</span> 235 </div> 236 <div class="chanpin1"> 237 <img src="xtb2-1.jpg" alt=""><span>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更简单</span> 238 </div> 239 <div class="chapin1"> 240 <img src="xtb-1.jpg" alt=""><span>最新出的这个产品如何使用？</span> 241 </div> 242 <div class="chanpin2"> 243 <img src="xtb2-1.jpg" alt=""><span>该产品采用全新的技术，较上一</span> 244 </div> 245 <div class="chapin2"> 246 <img src="xtb-1.jpg" alt=""><span>最新出的这个产品如何使用？</span> 247 </div> 248 <div class="chanpin3"> 249 <img src="xtb2-1.jpg" alt=""><span>该产品采用全新的技术，较上一产品有质的飞跃，功能上增</span> 250 </div> 251 <div class="chapin3"> 252 <img src="xtb-1.jpg" alt=""><span>最新出的这个产品如何使用？</span> 253 </div> 254 <div class="chanpin4"> 255 <img src="xtb2-1.jpg" alt=""><span>该产品采用全新的技术，较上一产品有质的飞跃，功能上增</span> 256 </div> 257 <div class="chapin4"> 258 <img src="xtb-1.jpg" alt=""><span>最新出的这个产品如何使用？</span> 259 </div> 260 <div class="chanpin5"> 261 <img src="xtb2-1.jpg" alt=""><span>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更简单</span> 262 </div> 263 264 </div> 265 <div class="wznr2_2"> 266 <span><img src="111-2.jpg" alt=""></span> 267 <img src="tel.gif" alt="" width="100%"> 268 </div> 269 </div> 270 </div> 271 <!--底部导航--> 272 <div class="dbdh"> 273 <div class="dbdh1"> 274 <div class="dbdh1-1"> 275 <ul> 276 <li>关于我们</li> 277 <span>丨丨</span> 278 <li>产品目录</li> 279 <span>丨丨</span> 280 <li>联系我们</li> 281 <span>丨丨</span> 282 <li>友情链接</li> 283 <span>丨丨</span> 284 <li>反馈问题</li> 285 <span>丨丨</span> 286 <li>广告合作</li> 287 </ul> 288 </div> 289 290 </div> 291 <div class="dbdh2"></div> 292 </div> 293 </body> 294 </html>
css样式：
1 /* CSS Document */ 2 * { 3 margin: 0px; 4 padding: 0px 5 } 6 /*页头*/ 7 .yt { 8 width: 900px; 9 height: 70px; 10 } 11 .yt1 { 12 width: 65%; 13 height: 100%; 14 position: relative 15 } 16 .yt2 { 17 width: 35%; 18 height: 100%; 19 } 20 .yt1, .yt2 { 21 float: left 22 } 23 .yt1 img { 24 position: relative; 25 top: 10px; 26 } 27 .yt2_img { 28 position: relative; 29 top: 25px; 30 left: 28px 31 } 32 .yt2 span { 33 position: relative; 34 top: 19px; 35 left: 33px; 36 font-size: 14px 37 } 38 #yt2_text { 39 position: relative; 40 top: 19px; 41 left: 30px 42 } 43 /*导航*/ 44 .dh { 45 width: 900px; 46 height: 70px; 47 } 48 .dh1 { 49 width: 900px; 50 height: 50%; 51 background-color: orange; 52 } 53 .dh2 { 54 width: 100%; 55 height: 50%; 56 } 57 .dh1 ul li { 58 line-height: 30px; 59 float: left; 60 list-style-type: none; 61 margin-left: 38px; 62 } 63 .dh1 ul li a { 64 color: white; 65 text-decoration: none 66 } 67 /*.dh1 ul li a:visited{color: black}*/ 68 .dh2 ul li { 69 float: left; 70 list-style-type: none; 71 margin-left: 38px; 72 } 73 /*.dh2 ul li{left: 0px;top:5px;position: relative}*/ 74 /*图片内容*/ 75 .tpnr1 { 76 width: 900px; 77 height: 270px; 78 } 79 .tpnr1_div { 80 width: 29.8%; 81 height: 100%; 82 } 83 .tpnr2_div { 84 width: 45.2%; 85 height: 100%; 86 background-image: url(hot_bg.gif); 87 background-size: cover 88 } 89 .tpnr3_div { 90 width: 23%; 91 height: 100%; 92 background-image: url(side_bg.gif) 93 } 94 .tpnr1_div, .tpnr2_div, .tpnr3_div { 95 float: left 96 } 97 .tpnr2_div, .tpnr3_div { 98 margin-left: 1% 99 } 100 .tpnr2_div h2 { 101 position: relative; 102 top: 19px; 103 left: 2px; 104 text-align: center; 105 font-weight: normal; 106 color: #515151 107 } 108 .nrtp_p { 109 font-size: 14px; 110 color: rgba(110,110,110,1.00); 111 position: relative; 112 top: 26px; 113 left: 6px 114 } 115 .tpnr_span { 116 border-bottom: 1px dashed #ccc; 117 width: 90%; 118 height: 85px; 119 margin: 0 auto 120 } 121 .tpnr2_img { 122 width: 30px; 123 height: 119px; 124 position: relative; 125 top: 10px; 126 left: 10px 127 } 128 /*.tpnr2_img img{position: relative;left: 22px;top: 19px}*/ 129 .tpnr2_lieb ul li { 130 list-style-position: inside; 131 font-size: 13px; 132 margin-top: 4px 133 } 134 .tpnr2_lieb ul { 135 list-style-type: none; 136 } 137 /*.spa1,.spa2,.spa3,.spa4,.spa5{float: right;}*/ 138 .tpnr2_lieb2 ul li { 139 font-size: 13px; 140 list-style-type: none; 141 margin-top: 4px; 142 color: rgba(87,159,17,1.00) 143 } 144 .tpnr2_lieb2 { 145 position: relative; 146 top: 3px; 147 left: 66px 148 } 149 .tpnr2_img, .tpnr2_lieb, .tpnr2_lieb2 { 150 float: left 151 } 152 .tpnr3_nr1 { 153 position: relative; 154 left: 8px; 155 top: 28px; 156 width: 48px; 157 height: 194px 158 } 159 .tpnr3_nr2 { 160 position: relative; 161 left: 59px; 162 top: -154px; 163 font-size: 13px; 164 } 165 .tpnr3_nr2 ul li { 166 list-style-type: none 167 } 168 .tpnr3_nr3 { 169 position: relative; 170 left: 59px; 171 top: -117px; 172 font-size: 13px; 173 } 174 .tpnr3_nr3 ul li { 175 list-style-type: none 176 } 177 .tpnr3_nr4 { 178 position: relative; 179 left: 59px; 180 top: -80px; 181 font-size: 13px; 182 } 183 .tpnr3_nr4 ul li { 184 list-style-type: none 185 } 186 /*文字内容*/ 187 .wznr { 188 width: 900px; 189 height: 605px; 190 191 } 192 .wznr1 { 193 width: 76%; 194 height: 100%; 195 196 } 197 .wznr2 { 198 width: 23.5%; 199 height: 100%; 200 201 } 202 .wznr1, .wznr2 { 203 float: left 204 } 205 .wznr2 { 206 margin-left: 0.5% 207 } 208 .wznr1_1 { 209 width: 100%; 210 height: 51%; 211 background-image: url( wznr-1.jpg); 212 background-size: 100% 100%; 213 background-repeat: no-repeat; 214 position: relative 215 } 216 .wznr1_1_1 img { 217 position: relative; 218 top: 5px; 219 left: 10px 220 } 221 .wznr1_img ul li { 222 list-style-type: none; 223 font-size: 14px 224 } 225 .tp1 { 226 width: 100%; 227 height: 50% 228 } 229 .wznr1_img, .wznr2_img, .wznr3_img, .wznr4_img, .wznr5_img { 230 float: left; 231 } 232 .wznr1_img { 233 position: relative; 234 left: 5px; 235 top: 18px 236 } 237 .wznr2_img { 238 position: relative; 239 top: 18px; 240 left: 30px 241 } 242 .wznr3_img { 243 position: relative; 244 top: 18px; 245 left: 60px 246 } 247 .wznr4_img { 248 position: relative; 249 top: 18px; 250 left: 90px 251 } 252 .wznr5_img { 253 position: relative; 254 top: 18px; 255 left: 120px 256 } 257 .wznr2_img ul li { 258 list-style-type: none; 259 font-size: 14px 260 } 261 .wznr3_img ul li { 262 list-style-type: none; 263 font-size: 14px 264 } 265 .wznr4_img ul li { 266 list-style-type: none; 267 font-size: 14px 268 } 269 .wznr5_img ul li { 270 list-style-type: none; 271 font-size: 14px 272 } 273 .wznr_img1, .wznr_img2, .wznr_img3, .wznr_img4, .wznr_img5 { 274 float: left; 275 position: relative; 276 } 277 .wznr_img2 ul li { 278 list-style-type: none; 279 font-size: 14px 280 } 281 .wznr_img3 ul li { 282 list-style-type: none; 283 font-size: 14px 284 } 285 .wznr_img4 ul li { 286 list-style-type: none; 287 font-size: 14px 288 } 289 .wznr_img5 ul li { 290 list-style-type: none; 291 font-size: 14px 292 } 293 .wznr_img1 ul li { 294 list-style-type: none; 295 font-size: 14px 296 } 297 .wznr_img1 { 298 left: 5px; 299 top: 11px 300 } 301 .wznr_img2 { 302 left: 30px; 303 top: 11px 304 } 305 .wznr_img3 { 306 left: 60px; 307 top: 11px 308 } 309 .wznr_img4 { 310 left: 90px; 311 top: 11px 312 } 313 .wznr_img5 { 314 left: 120px; 315 top: 11px 316 } 317 .wznr1_2 { 318 width: 100%; 319 height: 49%; 320 321 } 322 .wznr2_1 { 323 width: 100%; 324 height: 78%; 325 background-image: url(side_bg.gif) 326 } 327 .wznr2_1 img { 328 position: relative; 329 left: 10px; 330 top: 5px 331 } 332 .chapin span { 333 font-size: 13px; 334 position: relative; 335 left: 10px; 336 top: 10px; 337 font-weight: bold 338 } 339 .chapin img { 340 position: relative; 341 top: 12px 342 } 343 .chanpin1 span { 344 font-size: 13px; 345 font-weight: normal; 346 position: relative; 347 top: 20px; 348 left: 10px; 349 } 350 .chanpin1 img { 351 position: relative; 352 top: 20px 353 } 354 .chanpin1 { 355 height: 90px; 356 border-bottom: 1px dashed #ccc; 357 width: 100% 358 } 359 .chapin1 span { 360 font-size: 13px; 361 position: relative; 362 left: 10px; 363 top: 10px; 364 font-weight: bold 365 } 366 .chapin1 img { 367 position: relative; 368 top: 12px 369 } 370 .chanpin2 span { 371 font-size: 13px; 372 font-weight: normal; 373 position: relative; 374 top: 6px; 375 left: 10px; 376 } 377 .chanpin2 img { 378 position: relative; 379 top: 8px 380 } 381 .chanpin2 { 382 height: 40px; 383 border-bottom: 1px dashed #ccc; 384 width: 100% 385 } 386 .chapin2 span { 387 font-size: 13px; 388 position: relative; 389 left: 10px; 390 top: 7px; 391 font-weight: bold 392 } 393 .chapin2 img { 394 position: relative; 395 top: 9px 396 } 397 .chanpin3 span { 398 font-size: 13px; 399 font-weight: normal; 400 position: relative; 401 top: 7px; 402 left: 10px; 403 } 404 .chanpin3 img { 405 position: relative; 406 top: 9px 407 } 408 .chanpin3 { 409 height: 50px; 410 border-bottom: 1px dashed #ccc; 411 width: 100% 412 } 413 .chapin3 span { 414 font-size: 13px; 415 position: relative; 416 left: 10px; 417 top: 0px; 418 font-weight: bold 419 } 420 .chapin3 img { 421 position: relative; 422 top: 2px 423 } 424 .chanpin4 span { 425 font-size: 13px; 426 font-weight: normal; 427 position: relative; 428 top: 8px; 429 left: 10px; 430 } 431 .chanpin4 img { 432 position: relative; 433 top: 10px 434 } 435 .chanpin4 { 436 height: 60px; 437 border-bottom: 1px dashed #ccc; 438 width: 100% 439 } 440 .chapin4 span { 441 font-size: 13px; 442 position: relative; 443 left: 10px; 444 top: 9px; 445 font-weight: bold 446 } 447 .chapin4 img { 448 position: relative; 449 top: 11px 450 } 451 .chanpin5 span { 452 font-size: 13px; 453 font-weight: normal; 454 position: relative; 455 top: 9px; 456 left: 10px; 457 } 458 .chanpin5 img { 459 position: relative; 460 top: 11px 461 } 462 .chanpin5 { 463 height: 75px; 464 border-bottom: 1px dashed #ccc; 465 width: 100% 466 } 467 .wznr2_2 { 468 width: 100%; 469 height: 22%; 470 background-image: url(tub-1.jpg); 471 background-size: 100% 100%; 472 background-repeat: no-repeat 473 } 474 .wznr1_2-1 { 475 width: 49.5%; 476 height: 100%; 477 background-image: url( bj-2.jpg); 478 background-size: cover; 479 position: relative; 480 481 } 482 .wznr1_2-2 { 483 width: 49.5%; 484 height: 100%; 485 background-image: url(bj-2.jpg); 486 margin-left: 1%; 487 background-size: cover; 488 position: relative 489 } 490 .wznr1_2-1, .wznr1_2-2 { 491 float: left 492 } 493 .img1 { 494 position: relative; 495 top: 5px; 496 left: 10px 497 } 498 .div_gd, .gd1 { 499 float: right 500 } 501 .gd1 a { 502 text-decoration: none; 503 font-size: 13px; 504 color: rgba(240,157,70,1) 505 } 506 .div_pic { 507 margin-top: 20px; 508 margin-left: 10px; 509 width: 91px; 510 height: 70px 511 } 512 .wznr1_2-1 span { 513 margin-left: 10px 514 } 515 .div_h5 { 516 position: relative; 517 top: -73px; 518 left: 102px; 519 width: 240px 520 } 521 .div_h5 h5{color: rgba(51,102,153,1)} 522 .div_h5_2 h5{color: rgba(51,102,153,1)} 523 .div_h5 p { 524 font-size: 13px 525 } 526 .wznr1_2_img, .div_ul { 527 float: left 528 } 529 .div_ul ul { 530 list-style-type: none 531 } 532 .div_ul ul li { 533 font-size: 13px 534 } 535 .div_ul { 536 line-height: 22px; 537 position: relative; 538 top: -57px; 539 left: 11px 540 } 541 .wznr1_2_img { 542 position: relative; 543 top: -49px; 544 left: 8px; 545 } 546 .div_gd1, .gd2 { 547 float: right 548 } 549 .gd2 a { 550 text-decoration: none; 551 font-size: 13px; 552 color: rgba(240,157,70,1) 553 } 554 .div_pic2 { 555 margin-top: 20px; 556 margin-left: 10px; 557 width: 91px; 558 height: 70px 559 } 560 .wznr1_2-2 span { 561 margin-left: 10px 562 } 563 .div_h5_2 { 564 position: relative; 565 top: -73px; 566 left: 102px; 567 width: 240px 568 } 569 .div_h5_2 p { 570 font-size: 13px 571 } 572 .wznr1_2_img2, .div_ul2 { 573 float: left 574 } 575 .div_ul2 ul { 576 list-style-type: none 577 } 578 .div_ul2 ul li { 579 font-size: 13px 580 } 581 .div_ul2 { 582 line-height: 22px; 583 position: relative; 584 top: -57px; 585 left: 11px 586 } 587 .wznr1_2_img2 { 588 position: relative; 589 top: -49px; 590 left: 8px; 591 } 592 /*底部导航*/ 593 .dbdh { 594 width: 900px; 595 height: 100px; 596 } 597 .dbdh1 { 598 width: 100%; 599 height: 30px; 600 background-image: url(dibu-3.jpg); 601 } 602 .dbdh2 { 603 width: 100%; 604 height: 70px; 605 } 606 .dbdh1 ul li, .dbdh1 ul span { 607 float: left; 608 color: white; 609 } 610 .dbdh1 ul li { 611 list-style-type: none; 612 margin-left: 10px 613 } 614 .dbdh1-1 { 615 width: 75%; 616 height: 100%; 617 margin: 0 auto; 618 line-height: 30px 619 } 620 .dbdh1 ul span { 621 margin-left: 10px 622 }
效果图：
