首页 > 代码库 > 卓艺网
卓艺网
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/head.css"> 8 <link rel="stylesheet" href="css/dasaizixun.css"> 9 <link rel="stylesheet" href="css/education.css"> 10 <link rel="stylesheet" href="css/grow.css"> 11 <link rel="stylesheet" href="css/advantage.css"> 12 <link rel="stylesheet" href="css/bottom.css"> 13 <style> 14 15 </style> 16 </head> 17 <body> 18 <!-- 头部开始 --> 19 <div class="head"> 20 <div class="headTop"><!-- 头部上 --> 21 <p class="welcome">欢迎您登陆中国艺术人才创新教育研究会!</p> 22 <p class="telephone">400-888-8888</p> 23 <p class="email">hr@inet198.com</p> 24 </div> 25 <div class="headChaQu"></div> 26 <div class="headMiddle"><!-- 头部中 --> 27 <img src="images/z_zhuoyi.png" alt="" class="headZhuoYi"> 28 <div class="headMiddleFirst"> 29 首页 30 </div> 31 <div class="headIntroduce"> 32 大赛介绍 33 <ul class="er_headIntroduce"> 34 <li class="er_headIntroduce_org">组织机构</li> 35 <li>支持单位</li> 36 <li>专家阵容</li> 37 <li>支持媒体</li> 38 <li>联系我们</li> 39 </ul> 40 </div> 41 <div class="headTeacher"> 42 名师名校 43 <div class="er_headTeacher"> 44 <ul class="san_headTeacher"> 45 <li class="er_headTeacher_fine">优秀教师</li> 46 <li>名校风采</li> 47 <li>教学心得</li> 48 </ul> 49 <ul class="san_headPrize"> 50 <li>奖项设置</li> 51 <li>参赛须知</li> 52 </ul> 53 </div> 54 </div> 55 <div class="headBoutique"> 56 精品欣赏 57 </div> 58 <div class="headAchieve"> 59 成绩查询 60 <ul class="er_headAchieve"> 61 <li class="er_headAchieve_query">成绩查询</li> 62 <li>下载海报</li> 63 <li>下载报名表</li> 64 <li>下载参赛表</li> 65 <li>下载电子书</li> 66 </ul> 67 </div> 68 </div> 69 <div class="headBottom"><!-- 头部下 --> 70 </div> 71 </div> 72 <!-- 头部结束 --> 73 <!-- 中间主体部分开始 --> 74 <div class="con"> 75 <div class="conFirst"><!-- 大赛咨询 --> 76 <div class="conFirst_left"> 77 <img src="images/z_aggregate.jpg" alt=""> 78 <div class="conFirst_leftBg"></div> 79 <p class="conFirst_leftTxet">198网络科技公司总经理李星燎与IDG资本合伙创始人熊晓鹤先生合影</p> 80 <div class="conFirst_leftTurnl"> 81 <img src="images/z_left.png" alt="向左"> 82 </div> 83 <div class="conFirst_leftTurnr"> 84 <img src="images/z_right.png" alt="向右"> 85 </div> 86 </div> 87 <div class="conFirst_right"> 88 <div class="conFirst_rightTop"> 89 <img src="images/z_c.png" alt="c"class="conFirst_rightTopPic"> 90 <ul class="conFirst_rightTopPicWords"> 91 <li class="match">大赛咨询</li> 92 <li class="contest">contest information</li> 93 </ul> 94 </div> 95 <p class="conFirst_rightMiddle"> 96 美好世界，我们共同沐浴阳光；在欢笑中，我们挥洒内心的喜悦；要用画笔，绘出心中的美好；魔术帽里，都是我们奇思妙想的创意；我们要用手中的笔，写出对未来的憧憬，画出未来美好的侧才，随着各地的文化差异，国际文化的大融合，我们的教育观念也逐步与时俱进，为推动素质教育改革进程，实现青少年没事的国际化交流，更好的展示青少年儿童积极向上、追求美好生活的时代精神，进一步提高青少年的美学素养和审美能力、首届卓艺青少年书画艺术精品展将面向全国青少年儿童征集书法、绘画、摄影、剪纸、泥塑、逃陶艺、沙画、手工艺品的佳作。 97 </p> 98 <p class="conFirst_rightBottom"> 99 More>100 </p>101 </div>102 </div>103 <div class="conSecond"><!-- 灰色部分 -->104 <div class="conSecond_chaqu">105 <div class="conSecond_left"><!-- 教育专栏 -->106 <div class="conSecond_leftTop"> 107 <img src="images/z_e.png" alt="c"class="conSecond_leftTopPic">108 <ul class="conFirst_rightTopPicWords">109 <li class="match">教育专栏</li>110 <li class="contest">ducation coiumn</li>111 </ul>112 <p class="conSecond_leftBottom">More></p>113 </div> 114 <div class="conSecond_leftLower">115 <div class="conSecond_leftLower_line1">116 <span>117 颁发荣誉证书，并赠送价值198元的作品集118 </span>119 <span class="conSecond_leftLower_line1Award">120 2015-5-5121 </span>122 </div>123 <div class="conSecond_leftLower_line2">124 <span>125 颁发荣誉证书，并赠送价值198元的作品集126 </span>127 <span class="conSecond_leftLower_line1Award">128 2015-5-5129 </span>130 </div>131 <div class="conSecond_leftLower_line2">132 <span>133 颁发荣誉证书，并赠送价值198元的作品集134 </span>135 <span class="conSecond_leftLower_line1Award">136 2015-5-5137 </span>138 </div>139 <div class="conSecond_leftLower_line2">140 <span>141 颁发荣誉证书，并赠送价值198元的作品集142 </span>143 <span class="conSecond_leftLower_line1Award">144 2015-5-5145 </span>146 </div>147 <div class="conSecond_leftLower_line2">148 <span>149 颁发荣誉证书，并赠送价值198元的作品集150 </span>151 <span class="conSecond_leftLower_line1Award">152 2015-5-5153 </span>154 </div>155 <div class="conSecond_leftLower_line2">156 <span>157 颁发荣誉证书，并赠送价值198元的作品集158 </span>159 <span class="conSecond_leftLower_line1Award">160 2015-5-5161 </span>162 </div>163 <div class="conSecond_leftLower_line2">164 <span>165 颁发荣誉证书，并赠送价值198元的作品集166 </span>167 <span class="conSecond_leftLower_line1Award">168 2015-5-5169 </span>170 </div>171 <div class="conSecond_leftLower_line2">172 <span>173 颁发荣誉证书，并赠送价值198元的作品集174 </span>175 <span class="conSecond_leftLower_line1Award">176 2015-5-5177 </span>178 </div>179 <div class="conSecond_leftLower_line2">180 <span>181 颁发荣誉证书，并赠送价值198元的作品集182 </span>183 <span class="conSecond_leftLower_line1Award">184 2015-5-5185 </span>186 </div>187 <div class="conSecond_leftLower_line2">188 <span>189 颁发荣誉证书，并赠送价值198元的作品集190 </span>191 <span class="conSecond_leftLower_line1Award">192 2015-5-5193 </span>194 </div> 195 </div>196 </div>197 </div>198 <div class="conSecond_right"><!-- 精品欣赏 -->199 <div class="conSecond_rightTop"> 200 <img src="images/z_f.png" alt="c"class="conSecond_leftTopPic">201 <ul class="conFirst_rightTopPicWords">202 <li class="match">精品欣赏</li>203 <li class="contest">ine appreciation</li>204 </ul>205 <p class="conSecond_leftBottom">More></p>206 </div>207 <div class="conSecond_rightLower">208 <div class="conSecond_rightLower_lp">209 <img src="images/z_boy.jpg" alt="男孩" class="boy">210 <p class="work">211 并赠送价值198元的作品集212 </p>213 </div>214 <div class="conSecond_rightLower_rp">215 <div class="conSecond_rightLower_rpLt">216 <img src="images/z_bangbangtang.jpg" alt="" class="conSecond_rightLower_rp_Lt">217 <p class="zuopin">并赠送价值198元的作品集</p>218 </div>219 <div class="conSecond_rightLower_rpLt">220 <img src="images/z_girleandboy.jpg" alt="" class="conSecond_rightLower_rp_Lt">221 <p class="zuopin">并赠送价值198元的作品集</p>222 </div>223 </div>224 <div class="conSecond_rightLower_rp">225 <div class="conSecond_rightLower_rpLt">226 <img src="images/z_xiaogirle.jpg" alt="" class="conSecond_rightLower_rp_Lt1">227 <p class="zuopin">并赠送价值198元的作品集</p>228 </div>229 <div class="conSecond_rightLower_rpLt">230 <img src="images/z_flower.jpg" alt="" class="conSecond_rightLower_rp_Lt1">231 <p class="zuopin">并赠送价值198元的作品集</p>232 </div>233 </div>234 235 </div>236 </div>237 </div>238 <div class="conThree" id="three"><!-- 成长足迹 -->239 <div class="conThree_left" >240 <div class="conThree_leftTop" id="LeftTop">241 <img src="images/z_leftShallow.jpg" alt="左" class="conThree_leftTop_line1" id="p_left">242 <div class="conThree_leftTop_words"> 243 <div>244 <span class="meiyu" id="span1">成长</span>245 <span class="teacher" id="span2">足迹</span>246 </div>247 <div class="rep">growing footprint</div> 248 </div>249 <img src="images/z_rightShallow.jpg" alt="右" id="p_right" class="conThree_rightTop_line2">250 </div>251 <div class="conThree_leftLower">252 <img src="images/z_dblboy.jpg" alt="" class="dblboy">253 <p class="conThree_leftLower_words">198网络科技公司总经理李星燎</p>254 </div> 255 </div>256 <div class="conThree_middle">257 <div class="conThree_leftTop">258 <img src="images/z_leftShallow.jpg" alt="左" class="conThree_leftTop_line1">259 <div class="conThree_leftTop_words"> <div>260 <span class="meiyu">美誉</span>261 <span class="teacher">教师</span>262 </div>263 <div class="rep">Reputation as a teacher</div> 264 </div>265 <img src="images/z_rightShallow.jpg" alt="右" class="conThree_rightTop_line2">266 </div>267 <div class="conThree_leftLower">268 <img src="images/z_threepeople.jpg" alt="" class="dblboy">269 <p class="conThree_leftLower_words">198网络科技公司总经理李星燎</p>270 </div> 271 </div>272 <div class="conThree_middle">273 <div class="conThree_leftTop">274 <img src="images/z_leftShallow.jpg" alt="左" class="conThree_leftTop_line1">275 <div class="conThree_leftTop_words"> <div>276 <span class="meiyu">评委</span>277 <span class="teacher">介绍</span>278 </div>279 <div class="intr">Introduction of the judges</div> 280 </div>281 <img src="images/z_rightShallow.jpg" alt="右" class="conThree_rightTop_line2">282 </div>283 <div class="conThree_leftLower">284 <img src="images/z_man.jpg" alt="" class="dblboy">285 <p class="conThree_leftLower_words">198网络科技公司总经理李星燎</p>286 </div> 287 </div>288 </div>289 <div class="conFourth"><!-- 大赛优势 -->290 <div class="conFourth_good">291 <p class="conFourth_goodWord">大赛优势</p>292 <img src="images/z_changtu.png" alt="" class="conFourth_goodPicture">293 </div> 294 <div class="conFourth_logo" id="logo"><!-- 各种图标 -->295 <div class="conFourth_logo2">296 <img src="images/z_logokuai.jpg" alt="方便快捷" class="aa">297 <p class="conFourth_logo_tell">方便快捷</p>298 </div>299 <div class="conFourth_logo2">300 <img src="images/z_logojiang.jpg" alt="奖项丰富">301 <p class="conFourth_logo_tell">奖项丰富</p>302 </div>303 <div class="conFourth_logo2">304 <img src="images/z_logopin.jpg" alt="奖品精美">305 <p class="conFourth_logo_tell">奖品精美</p>306 </div>307 <div class="conFourth_logo2">308 <img src="images/z_logoZheng.jpg" alt="权威公正">309 <p class="conFourth_logo_tell">权威公正</p>310 </div>311 <div class="conFourth_logo2">312 <img src="images/z_logoGong.jpg" alt="投身公益">313 <p class="conFourth_logo_tell">投身公益</p>314 </div>315 <div class="conFourth_logo2">316 <img src="images/z_logoFu.jpg" alt="服务行业">317 <p class="conFourth_logo_tell">服务行业</p>318 </div>319 </div>320 <div class="conFourth_handle"><!-- 网上操作快捷 -->321 <p class="conFourth_handle_head">网上操作快捷</p>322 <div class="clear"></div>323 <p class="conFourth_handle_con">大赛实行了可网上操作，网上报名的便捷服务，参赛单位或个人可依据单位信息上传 报名及参赛总表，作品相片等信息。</p>324 </div> 325 </div>326 </div>327 <!-- 中间主体部分结束 -->328 <!-- 底部信息栏开始 -->329 <div class="line"></div>330 <div class="foot">331 <div class="footTop"><!-- 上部分 -->332 <ul class="footTop_list1">333 <li class="footTop_list1Mine aaa">关于我们</li>334 <li class="footTop_list1Org">组织机构</li>335 <li>支持单位</li>336 <li>专家阵容</li>337 <li>支持媒体</li>338 </ul>339 <ul class="footTop_list2">340 <li class="footTop_list2Match aaa">大赛一览</li>341 <li>大赛介绍</li>342 <li>主体形式</li>343 <li>参赛对象</li>344 <li>奖项设置</li>345 <li>参赛须知</li>346 </ul>347 <ul class="footTop_list3">348 <li class="aaa">名师名校</li>349 <li>优秀教师</li>350 <li>名校风采</li>351 <li>教学心得</li>352 </ul>353 <ul class="footTop_list4">354 <li class="aaa">搜索下载</li>355 <li>成绩查询</li>356 <li>下载海报</li>357 <li>下载报名表</li>358 <li>下载参赛表</li>359 <li>下载参赛卡</li>360 <li>下载电子书</li>361 </ul>362 <ul class="footTop_list5">363 <li class="aaa footTop_list5_relation">联系我们</li>364 <li class="footTop_list5_tel">400-888-8888</li>365 <li class="footTop_list5_email">hr@inet198.com</li>366 </ul>367 </div>368 <div class="footChaqu"></div>369 <div class="footLower"><!-- 下部分 -->370 <p class="footLower_top">371 Copyright 2014 www.injet198.com 一九八网络科技（湖南）有限公司 版权所有 All Rights Reserved372 </p>373 <p class="footLower_middle">374 公司地址：高新区文轩路27号麓谷钰园C1栋1101 服务电话：(0731)89837567 电子邮件：admin@injet198.com375 </p>376 <p class="footLower_bottom">377 198网络 湘ICP备14005552号-1378 </p>379 </div>380 </div>381 <!-- 底部信息栏结束 --> 382 <!-- ============================JS========================== -->383 <!-- JS部分代码开始 -->384 <script type="text/javascript" src="js/enlarge.js"></script>385 <script type="text/javascript" src="js/change.js"></script>386 <!-- JS代码部分结束 -->387 388 </body>389 </html>
1 advantage: 2 .conFourth 3 { 4 width: 1100px; 5 min-width: 1100px; 6 margin: 0 auto; 7 } 8 .conFourth:before 9 {10 content: "";11 clear: both;12 display: block;13 }14 .conFourth:after15 {16 content: "";17 clear: both;18 display: block;19 }20 .conFourth_good21 {22 text-align: center;23 }24 .conFourth_goodWord25 {26 font-size: 60px;27 color: #32c87c;28 margin-top: 78px;29 }30 .conFourth_goodPicture31 {32 margin-left: 80px;33 }34 .conFourth_logo35 {36 margin-top: 52px;37 }38 .conFourth_logo_tell39 {40 text-align: center;41 font-size: 24px;42 color: #999999;43 position: relative;44 left: 0px;45 top: 31px;46 }47 .conFourth_logo248 {49 width: 107px;50 margin-left: 70px;51 float: left;52 height: 172px;53 }54 .conFourth_handle55 {56 margin-top: 73px;57 float: left;58 }59 .conFourth_handle_head60 {61 text-align: center;62 font-size: 36px;63 color: #333333;64 }65 .conFourth_handle_con66 {67 text-align: center;68 font-size: 18px;69 color: #333;70 margin-top: 26px;71 72 }73 .clear74 {75 clear: both;76 }77 .aa78 {79 position: relative;80 }
1 bottom: 2 .line 3 { 4 width: 100%; 5 height: 4px; 6 background: #64c832; 7 margin-top: 45px; 8 min-width: 1100px; 9 } 10 .foot 11 { 12 background: #3f3f3f; 13 width: 100%; 14 min-width: 1100px; 15 margin: 0 auto; 16 } 17 .footTop 18 { 19 padding-top: 45px; 20 height: 235px; 21 22 } 23 .footTop_list1 24 { 25 padding-left: 188px; 26 float: left; 27 } 28 .footTop_list2 29 { 30 float: left; 31 margin-left: 116px; 32 } 33 .footTop_list3 34 { 35 float: left; 36 margin-left: 116px; 37 } 38 .footTop_list4 39 { 40 float: left; 41 margin-left: 113px; 42 } 43 .footTop_list5 44 { 45 float: left; 46 margin-left: 77px; 47 } 48 .footTop .footTop_list1 .footTop_list1Mine 49 { 50 color: #64c832; 51 } 52 .footTop li 53 { 54 color: #898989; 55 margin-top: 13px; 56 } 57 .footTop .footTop_list2Match 58 { 59 color: #dbdbdb; 60 } 61 .footTop .aaa 62 { 63 color: #dbdbdb; 64 padding-bottom: 5px; 65 border-bottom: 1px solid #646464; 66 } 67 .footTop .footTop_list1 .footTop_list1Org 68 { 69 color: #32c87c; 70 } 71 .footTop_list5 .footTop_list5_relation 72 { 73 width: 51px; 74 margin-left: 33px; 75 } 76 .footTop_list5_tel 77 { 78 padding-left: 33px; 79 background: url(../images/z_tel1.png) 0 0 no-repeat; 80 height: 20px; 81 line-height: 20px; 82 } 83 .footTop_list5_email 84 { 85 padding-left: 33px; 86 background: url(../images/z_email1.png) 0 0 no-repeat; 87 height: 17px; 88 line-height: 17px; 89 } 90 .footChaqu 91 { 92 width: 100%; 93 height: 1px; 94 background: #494848; 95 } 96 .footLower 97 { 98 width: 1100px; 99 margin: 0 auto;100 }101 .footLower_top102 {103 padding-top: 29px;104 color: #898989;105 text-align: center;106 }107 .footLower_middle,.footLower_bottom108 {109 margin-top: 13px;110 color: #898989;111 text-align: center;112 }
1 dasaizixun: 2 3 .con 4 { 5 min-width: 1100px; 6 margin-top: 30px; 7 } 8 .conFirst 9 { 10 width: 1100px; 11 height: 350px; 12 margin: 0 auto; 13 } 14 .conFirst_leftBg,.conFirst_leftTxet 15 { 16 width: 670px; 17 height: 63px; 18 display: none; 19 position: absolute; 20 left: 0px; 21 bottom: 0px; 22 } 23 .conFirst_leftBg 24 { 25 background: #68cad2; 26 } 27 .conFirst_leftTxet 28 { 29 text-align: center; 30 line-height: 63px; 31 font-size: 16px; 32 color: #fff; 33 } 34 .conFirst_left:hover .conFirst_leftBg 35 { 36 display: block; 37 } 38 .conFirst_left:hover .conFirst_leftTxet 39 { 40 display: block; 41 } 42 .conFirst_left 43 { 44 position: relative; 45 width: 670px; 46 float: left; 47 } 48 .conFirst_leftTurnl 49 { 50 width: 30px; 51 height: 44px; 52 background: #9b9b99; 53 position: absolute; 54 left: 0px; 55 top: 145px; 56 padding-top: 16px; 57 text-align: center; 58 opacity: 0.4;filter:alpha(opacity=40); 59 } 60 .conFirst_leftTurnl:hover 61 { 62 background: #3c3c3c; 63 } 64 .conFirst_leftTurnr:hover 65 { 66 background: #3c3c3c; 67 } 68 .conFirst_leftTurnr 69 { 70 width: 30px; 71 height: 44px; 72 background: #9b9b99; 73 position: absolute; 74 right: 0px; 75 top: 145px; 76 padding-top: 16px; 77 text-align: center; 78 opacity: 0.4;filter:alpha(opacity=40); 79 } 80 .conFirst_right 81 { 82 float: left; 83 width: 400px; 84 height: 77px; 85 margin-left: 30px; 86 } 87 .conFirst_rightTop 88 { 89 width: 366px; 90 height: 78px; 91 border-bottom: 1px solid #e2e2e2; 92 } 93 .conFirst_rightTopPic 94 { 95 padding-top: 23px; 96 width: 28px; 97 float: left; 98 } 99 .conFirst_rightTopPicWords100 {101 float: left;102 margin-left:9px;103 padding-top: 23px;104 font-size: 18px;105 }106 .match107 {108 color: #333;109 }110 .contest111 {112 color: #ccc;113 }114 .conFirst_rightMiddle115 {116 text-indent: 2em;117 line-height: 30px;118 }119 .conFirst_rightBottom120 {121 float: right;122 color: #32c87c;123 }
1 education： 2 .conSecond 3 { 4 background: #e8e8e8; 5 height: 430px; 6 margin-top: 20px; 7 8 } 9 .conSecond_chaqu 10 { 11 width: 1100px; 12 min-width: 1100px; 13 margin: 0 auto; 14 } 15 .conSecond_left 16 { 17 float: left; 18 width: 339px; 19 } 20 .conSecond_leftTopPic 21 { 22 padding-top: 23px; 23 width: 28px; 24 float: left; 25 padding-bottom: 7px; 26 } 27 .conSecond_leftTop 28 { 29 border-bottom: 1px solid #fff; 30 width: 339px; 31 overflow: hidden; 32 } 33 .conSecond_leftBottom 34 { 35 float: right; 36 color: #32c87c; 37 padding-top: 58px; 38 } 39 .conSecond_leftLower 40 { 41 border-top: 1px solid #e2e2e2; 42 width: 366px; 43 } 44 .conSecond_leftLower_line1 45 { 46 padding-top: 25px; 47 } 48 .conSecond_leftLower_line1Award 49 { 50 margin-left:55px; 51 } 52 .conSecond_leftLower_line2 53 { 54 margin-top: 15px; 55 } 56 .conSecond_right 57 { 58 margin-left: 42px; 59 float: left; 60 } 61 .conSecond_rightTop 62 { 63 border-bottom: 1px solid #fff; 64 width: 719px; 65 float: left; 66 } 67 .conSecond_rightLower 68 { 69 border-top: 1px solid #ccc; 70 width: 719px; 71 height: 300px; 72 } 73 .conSecond_rightLower_lp 74 { 75 float: left; 76 } 77 .boy 78 { 79 padding-top: 27px; 80 } 81 .work 82 { 83 background: #fff; 84 opacity: 0.5;filter:alpha(opacity=50); 85 width: 330px; 86 height: 29px; 87 text-align: center; 88 line-height: 29px; 89 } 90 .conSecond_rightLower_rp 91 { 92 float: left; 93 } 94 .conSecond_rightLower_rp_Lt 95 { 96 padding-top: 27px; 97 } 98 .conSecond_rightLower_rpLt 99 {100 position: relative;101 margin-left: 9px;102 float: left;103 }104 .zuopin105 {106 width: 185px;107 height: 20px;108 background: #fff;109 position: absolute;110 left: 0px;111 bottom: 0px;112 opacity: 0.5;filter:alpha(opacity=50);113 text-align: center;114 line-height: 20px;115 display: none;116 }117 .conSecond_rightLower_rpLt:hover .zuopin118 {119 display: block;120 }121 .conSecond_rightLower_rp_Lt1122 {123 margin-top: 9px;124 }
1 grow: 2 .conThree 3 { 4 width: 1100px; 5 min-width: 1100px; 6 margin: 0 auto; 7 } 8 .conthree:after 9 {10 clear: both;11 content: "";12 display: block;13 }14 .conThree_left15 {16 margin-top: 30px;17 width: 341px;18 float: left;19 }20 .conThree_leftTop21 {22 overflow: hidden;23 }24 .conThree_leftTop_line125 {26 float: left;27 }28 .conThree_leftTop_words29 {30 float: left;31 margin-left: 10px;32 margin-top: -5px;33 }34 .middle_left35 {36 float: left;37 }38 .middle_right39 {40 float: left;41 margin-left: 1px;42 margin-right: 10px;43 }44 .conThree_leftLower45 {46 margin-top: 24px;47 overflow: hidden;48 }49 .conThree_leftLower_words50 {51 background: #64c832;52 color: #fff;53 text-align: center;54 width: 339px;55 height: 43px;56 line-height: 43px;57 float: left;58 }59 .dblboy60 {61 float: left;62 }63 .conThree_middle64 {65 margin-top: 30px;66 width: 353px;67 margin-left: 26px;68 float: left;69 }70 .meiyu71 {72 font-size: 29px;73 color: #323433;74 padding-left: 6px;75 }76 .teacher77 {78 font-size: 29px;79 color: #64c832;80 }81 .rep82 {83 color: #999999;84 font-weight: normal;85 }86 .intr87 {88 font-size: 9px;89 font-weight: normal;90 letter-spacing: -1px;91 }
1 head: 2 3 4 .head 5 { 6 width: 100%; 7 min-width: 1100px; 8 } 9 .headTop 10 { 11 height: 70px; 12 text-align: center; 13 line-height: 70px; 14 font-size: 20px; 15 overflow: hidden; 16 background: #64c832; 17 } 18 .welcome 19 { 20 font-size: 14px; 21 float: left; 22 padding-left: 52px; 23 } 24 .telephone 25 { 26 float: right; 27 margin-right:65px; 28 padding-left: 45px; 29 background: url(../images/z_tel.png) 0 19px no-repeat; 30 } 31 .email 32 { 33 float: right; 34 margin-right:79px; 35 padding-left: 51px; 36 background: url(../images/z_email.png) 0 19px no-repeat; 37 } 38 .headChaQu 39 { 40 height: 1px; 41 margin-top: 1px; 42 background: #ccc; 43 width: 100%; 44 } 45 .headMiddle 46 { 47 height: 101px; 48 width: 1100px; 49 margin: 0 auto; 50 border-top: 1px solid #f8f8f8; 51 font-size: 18px; 52 background: #fff; 53 } 54 .headMiddle:after 55 { 56 display: block; 57 content: ""; 58 clear: both; 59 } 60 .headZhuoYi 61 { 62 float: left; 63 padding-left: 89px; 64 padding-top: 9px; 65 } 66 .headMiddleFirst 67 { 68 width: 145px; 69 height: 101px; 70 background: #32c87c; 71 margin-left: 96px; 72 text-align: center; 73 line-height: 101px; 74 float: left; 75 color: #ffff96; 76 } 77 .headIntroduce,.headTeacher,.headBoutique,.headAchieve 78 { 79 width: 143px; 80 height: 100px; 81 float: left; 82 border-right: 1px solid #dcdddd; 83 text-align: center; 84 line-height: 100px; 85 position: relative; 86 } 87 .er_headIntroduce 88 { 89 width: 142px; 90 height: 197px; 91 border: 1px solid #dcdddd; 92 display: none; 93 background: #fff; 94 } 95 .er_headTeacher 96 { 97 width: 143px; 98 height: 197px; 99 border: 1px solid #dcdddd;100 border-left: 0px;101 position: absolute;102 top: 100px;103 left: 0px;104 display: none;105 background: #fff;106 }107 .er_headAchieve108 {109 width: 143px;110 height: 197px;111 border: 1px solid #dcdddd;112 margin-left: -1px;113 display: none;114 background: #fff;115 }116 .er_headIntroduce117 {118 position: absolute;119 left: 0px;120 top: 100px;121 }122 .er_headIntroduce li123 { 124 width: 123px;125 height: 35px;126 border-top: 1px dashed #e6e6e6;127 text-align: center;128 line-height: 35px;129 margin-left:11px; 130 font-size: 14px;131 color: #dfdfdf;132 }133 li.er_headIntroduce_org134 {135 padding-top: 13px;136 border-top: 0;137 color: #79d7a3;138 }139 .san_headTeacher140 {141 border-bottom: 1px solid #e6e6e6;142 height: 118px;143 border-left: 1px solid #e6e6e6;144 }145 .san_headTeacher li146 { 147 width: 123px;148 height: 35px;149 border-top: 1px dashed #e6e6e6;150 text-align: center;151 line-height: 35px;152 margin-left:11px; 153 font-size: 14px;154 color: #dfdfdf;155 float: left;156 }157 .san_headTeacher .er_headTeacher_fine158 {159 padding-top: 13px;160 border-top: 0;161 }162 .er_headAchieve .er_headAchieve_query163 {164 padding-top: 13px;165 border-top: 0;166 }167 .san_headPrize168 {169 margin-top: 1px;170 float: left;171 }172 .san_headPrize173 {174 height: 77px;175 margin-top: 1px;176 }177 .san_headPrize li178 {179 width: 123px;180 height: 35px;181 border-top: 1px dashed #e6e6e6;182 text-align: center;183 line-height: 35px;184 margin-left:11px; 185 font-size: 14px;186 color: #dfdfdf;187 }188 .er_headAchieve li189 {190 width: 123px;191 height: 35px;192 border-top: 1px dashed #e6e6e6;193 text-align: center;194 line-height: 35px;195 margin-left:11px; 196 font-size: 14px;197 color: #dfdfdf;198 }199 .headIntroduce:hover .er_headIntroduce200 {201 display: block;202 }203 .headTeacher:hover .er_headTeacher204 {205 display: block;206 }207 .headAchieve:hover .er_headAchieve208 {209 display: block;210 }211 .headBottom212 {213 background: url(../images/z_bigPicture.png) center center no-repeat;214 height: 436px;215 }
1 reset: 2 3 @charset "utf-8"; 4 /*=========================Reset_start==========================*/ 5 body,h1,h2,h3,h4,h5,h6,div,p,dl,dt,dd,ol,ul,li,form,table,th,td,a,img,span,strong,var,em,input,textarea,select,option 6 { 7 margin: 0; padding: 0; 8 } 9 html,body10 {11 font-family:"微软雅黑","宋体",Arail,Tabhoma;12 text-align: left;13 color: #666666;14 font-size: 12px;15 font-weight: bold;16 }17 ul,ol18 {19 list-style: none;20 }21 img22 {23 border: 0 none;/*浏览器兼容问题，边框问题*/24 }25 input,select,textarea26 {27 outline:0;/*去除外面的实线*/28 }29 textarea30 {31 resize:none;/*固定文本框*/32 overflow: auto;/*自定义的出现滚动条*/33 }34 table35 {36 border-collapse: collapse; 37 border-spacing: 0;38 }39 th,strong,var,em40 {41 font-weight: normal; 42 font-style: normal;43 }44 a45 {46 text-decoration: none;47 }48 49 /*==========================Reset_End===========================*/
1 change: 2 3 var da1=document.getElementsByClassName(‘conThree_leftTop‘); 4 var color1=document.getElementsByClassName(‘meiyu‘); 5 var color2=document.getElementsByClassName(‘teacher‘); 6 var imgs1=document.getElementsByClassName(‘conThree_leftTop_line1‘); 7 var imgs2=document.getElementsByClassName(‘conThree_rightTop_line2‘); 8 for (var i = 0; i < da1.length; i++) { 9 da1[i].onmouseover=function (){10 for (var i = 0; i < da1.length; i++) {11 if (da1[i]==this) {12 imgs1[i].src="http://www.mamicode.com/images/z_leftline.jpg";13 imgs2[i].src="http://www.mamicode.com/images/z_rightline.jpg";14 imgs2[i].style.marginLeft="5px";15 color1[i].style.color="#64c832";16 color2[i].style.color="#323433";17 };18 };19 };20 da1[i].onmouseout=function (){21 for (var i = 0; i < da1.length; i++) {22 imgs1[i].src="http://www.mamicode.com/images/z_leftShallow.jpg";23 imgs2[i].src="http://www.mamicode.com/images/z_rightShallow.jpg";24 imgs2[i].style.marginLeft="5px";25 color1[i].style.color="#323433";26 color2[i].style.color="#64c832";27 };28 29 };30 };
1 enlarge: 2 var z_logo=document.getElementById(‘logo‘); 3 var z_img=z_logo.getElementsByTagName(‘img‘); 4 var z_p=z_logo.getElementsByTagName(‘p‘); 5 for (var i = 0; i < z_img.length; i++) { 6 z_img[i].onmouseover=function(){ 7 for (var i = 0; i < z_img.length; i++) { 8 if (z_img[i]==this) { 9 z_img[i].style.width="150px";10 z_img[i].style.height="150px";11 z_p[i].style.left="22px";12 }13 };14 };15 }; 16 for (var i = 0; i < z_img.length; i++) {17 z_img[i].onmouseout=function(){18 for (var i = 0; i < z_img.length; i++) {19 if (z_img[i]==this) {20 z_img[i].style.width="106px";21 z_img[i].style.height="107px";22 z_p[i].style.left="";23 };24 };25 };26 };
卓艺网
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。