首页 > 代码库 > 1月24日 样式表案例
1月24日 样式表案例
沃顿商学院（仿）
1、html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>沃顿商学院</title><link href=http://www.mamicode.com/"CSS/Whaeton.css" rel="stylesheet" type="text/css" /></head><body><div id="dd"> <div id="head" class="name"> <ul id="a1"> <li><a href=http://www.mamicode.com/"#">PENN</a></li> <li><a href=http://www.mamicode.com/"#">WHARTON HOME</a></li> <li class="aname1"><a href=http://www.mamicode.com/"#">CAMPUSES</a><img src=http://www.mamicode.com/"Images/metaNav_arrow.gif"></li> <li><a href=http://www.mamicode.com/"#">DIRECTORIES</a></li> <li><a href=http://www.mamicode.com/"#">NEWS</a></li> <li class="aname1"><a href=http://www.mamicode.com/"#">QUICKLINKS</a><img src=http://www.mamicode.com/"Images/metaNav_arrow.gif"></li> </ul> </div> <div id="middle" class="name"> <div id="logo"> <div id="b1"><img src=http://www.mamicode.com/"Images/header_logo.gif"> </div> <div id="b2"> <form> <input type="text" class="b2name1" /> <input type="image" class="b2name2" src=http://www.mamicode.com/"Images/searchArrow.gif";/> </form> </div> <div id="menu"> <ul> <li></li> <li><a href=http://www.mamicode.com/"http://recruiters-corp.wharton.upenn.edu/">Recruiters and Corporations</a></li> <li><a href=http://www.mamicode.com/"http://recruiters-corp.wharton.upenn.edu/">Aiumni </a></li> <li><a href=http://www.mamicode.com/"">About Wharton</a></li> <li><a href=http://www.mamicode.com/"">Facuilty and Research </a></li> <li><a href=http://www.mamicode.com/"">Academics</a></li> </ul> </div> </div> </div> <div id="content" class="name"> <div id="c"> <div id="c1"> <ul id="c2"> <li class="c2name1"><a href=http://www.mamicode.com/"">UNDERGRADUATE </a></li> <li class="c2name2"> <h1>MBA <ul id="c3"> <li class="c2name1"><a href=http://www.mamicode.com/""> FULL-TIME</a></li> <li class="c2name1"><a href=http://www.mamicode.com/""> FOR EXECUTIVES</a></li> </ul> </h1> </li> <li class="c2name1"><a href=http://www.mamicode.com/"">DOCTORAL</a></li> <li class="c2name1"><a href=http://www.mamicode.com/""> EXECUTIVE EDUCATION</a></li> <li class="c2name1"><a href=http://www.mamicode.com/"">ALUMNI NETWORK </a></li> </ul> </div> </div> <div id="d"> <div id="d1">#MyWharton</div> <ul id="d2"> <li class="d2name1"><img src=http://www.mamicode.com/"Images/dehnad_kristal_325.jpg"> <div class="da1"><a href=http://www.mamicode.com/""></a></div> <div id="d3"> “The EMBA program is the launch pad to the next phase of my career at my company.” Edmund Reese, WG’14 </div> </li> <li class="d2name2"><img src=http://www.mamicode.com/"Images/Daschle_Amy_325.jpg"> <div id="d3"> “Access to companies and executives around the world is completely unique to Wharton.” Gwendolyn McDay, WG’13 </div> </li> <li class="d2name3"><img src=http://www.mamicode.com/"Images/Grasso_Katlyn_325.jpg"> <div class="da2"><a href=http://www.mamicode.com/""></a></div> <div id="d3"> “I used the skills I learned at Wharton to develop a leadership camp for 30 high school girls.” Katlyn Grasso, W’15 </div> </li> </ul> </div> <div style="clear:both"> </div> <div id="e"> <div id="e1">Fuel Your Next Idea</div> <div id="e2"> <ul> <li class="ea1"><a href=http://www.mamicode.com/"#"></a> </li> <li class="ea2"><a href=http://www.mamicode.com/"#"></a> </li> </ul> <ul id="e3"> <li class="e2name1"><img src=http://www.mamicode.com/"Images/knowledge-at-wharton_story.jpg"> <div id="e4"> <h3>Social Impact</h3> The hub for social impact activities, information and resources at Wharton, in the community, and in the world </div> </li> <li class="e2name1"><img src=http://www.mamicode.com/"Images/coursera_story.jpg"> <div id="e4"> <h3>Knowledge@Wharton</h3> Sharing the intellectual capital of the Wharton School </div> </li> <li class="e2name1"><img src=http://www.mamicode.com/"Images/Social-impact_story.jpg"> <div id="e4"> <h3>Coursera</h3> Open Learning to engage a broader community of learners </div> </li> <li class="e2name2"><img src=http://www.mamicode.com/"Images/Global-Initiative_story.jpg"> <div id="e4"> <h3>Business Radio</h3> Broadcasting business and management knowledge for your career success </div> </li> </ul> </div> </div> <div id="f"> <div id="f1"> <ul id="f2"> <li class="f2name1"> <img src=http://www.mamicode.com/"Images/HP-twitter.png"></li> <li class="f2name1"> <img src=http://www.mamicode.com/"Images/HP-linkedin.png"></li> <li class="f2name1"> <img src=http://www.mamicode.com/"Images/HP-facebook.png"></li> <li class="f2name1"> <img src=http://www.mamicode.com/"Images/HP-Instagram.png"></li> <li class="f2name1"> <img src=http://www.mamicode.com/"Images/google-plus.png"></li> <li class="f2name1"> <img src=http://www.mamicode.com/"Images/HP-Youtube.png"></li> <li class="f2name1"> <img src=http://www.mamicode.com/"Images/HP-flicker.png"></li> </ul> </div> </div> </div> <div id="g"> <div id="g1"> <div id="g2"> </div> <div id="g3"> © 2014 The Wharton School, University of Pennsylvania | Site Index | Privacy Statement </div> </div> </div></div></body></html>
2、CSS样式表
@charset "utf-8";/* CSS Document *//*********全局设置**********/*{ margin:0px; padding:0px;}body{ width:100%; margin:auto; font-family:Arial, Helvetica, sans-serif; background-repeat:repeat-x; background-image:url(../Images/body_bg.jpg); }#dd{ height:auto; width:993px; margin:auto; text-align:center;}ul{ list-style:none;}a{ text-decoration:none; color:#fff;}/*************************//*********最上面标题部分**********/#head{ width:100%; background-image:url(../Images/metaNav_bg.jpg); float:right;}#a1{ list-style:none; float:right;}#a1 li{ font-size:14px; color:#FFF; padding:5px 15px 5px 15px; float:right;}#a1 li.aname1{ background-color:#3D3D3D; margin:auto; margin:0 10px 0 10px;}#a1 li.aname1 img{ margin-left:10px;}/***********标题结束**************//***********LOGO部分**************//***********上部**************/#logo{ width:100%; height:116px; background-image:url(../Images/header_bg.jpg); float:left; position:relative;}#logo #b1{ margin:25px 20px 20px 20px; float:left;}#logo #b2{ margin:30px 30px 20px 20px; float:right;}#logo #b2 .b2name2{ width:23px; height:23px; margin:0px; top:6px; right:5px; position:relative;}#logo #b2 .b2name1{ padding:3px 5px 3px 5px; border:none; width:200px;}/**********logo下部***************/#menu{ float:left; width:100%; position:absolute; bottom:1px; right:0; background:url(../Images/mainNav_bg.jpg) no-repeat top right; }#menu li{ font-size:13px; color:#FFF; border-right:1px solid #224889; border-left:1px solid #7b92bb; float:right; padding:7px 11px 5px 13px;}/***********设置一放上就变色的超链接**************/#menu a:hover{ padding:7px 11px 5px 13px; background-color:#981e32;}/***********LOGO结束**************//************最大的一副图*************/#content #c{ width:100%; height:545px; background-image:url(../Images/hp_splash4.jpg); float:left;}#content #c2{ margin-top:40px; margin-right:30px; float:right;}/***********li的设置**************/#content #c2 .c2name1{ font-size:16px; color:#FFF; margin:10px 0 10px 0; padding:15px 10px 15px 10px; background-color:#003178;}/**********MBA里面的内容***************/#c2 h1{ color:#FFF; border:1px solid #cdcdcd; font-weight:normal; font-size:20px; padding-top:10px; background-image:url(../Images/grad-mba.png);}#c3{ position:relative;}#c3 li{ left:5%; width:80%; position:relative;}/***********设置一放上就变色的超链接**************/#content a:hover{ width:100%; height:29px; background:#fff; border:1px solid #333; color:#666;}/*************************//**********MyWharton***************/#content #d{ width:100%; height:383px; float:left;}#content #d a:hover{ background:none;}#content #d1{ width:100%; font-family:Arial, Helvetica, sans-serif; color:#777777; font-size:36px; font-weight:normal; margin-top:50px; float:left; }#content #d2 .da1 a{ width:56px; height:56px; border:none; background-image:url(../Images/circle_arrow_pre.png); position:absolute; bottom:120px; left:20px; float:left;}#content #d2 .da2 a{ width:56px; height:56px; border:none; background-image:url(../Images/circle_arrow_next.png); position:absolute; bottom:120px; right:20px; float:right;}/***********3张照片**************/#content #d2 .d2name1{ width:325px; margin:10px 0px 5px 5px; float:left; position:relative;}#content #d2 .d2name2{ width:325px; margin:10px 0px 5px 4px; float:left; position:relative;}#content #d2 .d2name3{ width:325px; margin:10px 5px 5px 0px; float:right; position:relative;}/*********文字****************/#content #d3{ width:305px; color:#F6F6F6; position:absolute; padding:10px; bottom:0; }#content #d3{ width:305px; background-color:#000; opacity:0.5;}/***********Fuel Your Next Idea**************/#content #e{ width:100%; height:309px; float:left;}#content #e1{ width:100%; font-family:Arial, Helvetica, sans-serif; color:#484848; font-size:36px; font-weight:normal; float:left; margin-top:100px;}#content #e2{ padding:0; width:100%; height:301px; float:left; position:relative;}#content #e2 .e2name1{ margin-right:10px; float:left;}#content #e2 .e2name2{ margin-right:0px; float:left;}#content #e3{ width:846px; height:249px; float:left; position:absolute; left:74px;}#content #e3 li h3{ font-weight:bold;}#content #e2 .ea1 a{ width:43px; height:43px; border:none; background-image:url(../Images/circle_arrow_pre-gray.png); margin:50px 0 0 20px; float:left;}#content #e2 .ea2 a{ width:43px; height:43px; border:none; background-image:url(../Images/circle_arrow_next-g.png); margin:50px 20px 0 0; float:right;}#content #e4{ font-size:16px; color:#484848; width:184px; margin:10px;}/***********LOGO**************/#content #f{ width:100%; height:100px; float:left; margin-top:150px;}#content #f1{ width:447px; height:47px; float:left; margin-left:273px;}#content #f1 .f2name1{ float:left; margin:1px 15px 1px 0px;}/*************************//***********PENN**************/#g{ width:100%; height:250px; float:left;}#g1{ width:100%; height:250px; background:url(../Images/footer-bg.jpg) repeat-x; float:left;}#g2{ width:213px; height:100px; margin:100px 0px 0px 50px; background-image:url(../Images/logo.png); float:left; }#g3{ font-size:12px; color:#FFF; float:left; margin-top:150px; margin-left:50px;}/*************************//*************************/
3、效果图
1月24日 样式表案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。