首页 > 代码库 > css样式表实例
css样式表实例
源代码
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link href="Untitled-沃顿商学.css" rel="stylesheet" type="text/css" /></head><body><div id="dd"><div id="menu" class="container"> <ul> <li><a href=#>PENN</a></li> <li><a href=#>WHARTON HOME</a></li> <li class="drop"><a href=#>CAMPUSES</a><img src="images/metaNav_arrow.gif"></a></li> <li><a href=#>DIRECTORIES</a></li> <li><a href=#>NEWS</a></li> <li class="drop"><a href=#>QUICK LINKS<img src="images/metaNav_arrow.gif"></a></li> </ul></div><div id="head" class="container"><div id="logo"> <div id="divsearch"><form><input id="search" type="text"><input id="btn" type="button"></form> </div><img src="images/header_logo.gif"> </div> <div id="nav"><ul><li>CORPPORAATIONS</li><li>ALUMIN</li><li>ABOUT WHARTON</li><li>FACULTY AND RESEARCH</li><li>ACADEMICS</li></ul> </div></div><div id="main" class="container"><div id="slider"> <div id="whartonmenu"> <div class="fulltime">UNDERGRADUATE</div> <div id="mba" class="fulltimemba"> <h1> MBA</h1> <div class="mbaa">FULL-TIME</div> <div class="mbaa">FOR EXECUTIVES</div> </div> <div class="fulltime">DOCTORAL</div> <div class="fulltime">EXECUTIVE EDUCATION</div> <div class="fulltime">ALUMNI NETWWORK</div> </div></div><div style="clear:both"></div><div id="mywharton"><div class="headline">#My Wharton</div><ul><li class="one"><img src="images/graber_emmy_325.jpg"><div class="sound">Creating a start-up while at Wharton is almost risk-free. They give you time and support.” Jim Chabas, WG’13</div></li><li class="one"><img src="images/Kim_Matthew_325.jpg"><div class="sound">Creating a start-up while at Wharton is almost risk-free. They give you time and support.” Jim Chabas, WG’13</div></li><li class="two"><img src="images/Chiam_Tat-Seng_325.jpg"><div class="sound">Creating a start-up while at Wharton is almost risk-free. They give you time and support.” Jim Chabas, WG’13</div></li></ul></div></div></div></body></html>
css表
@charset "utf-8";/* CSS Document */*{margin:0px;padding:0px;}body{ background:url(images/body_bg.jpg); background-repeat:repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px;}#dd{width:950px; margin:auto; }.container{ /*border:1px solid red;*/ width:100%;float:left; } ul {list-style-type:none;} /************设计最上面的区域的样式******************/#menu{ background:url(images/metaNav_bg.jpg); float:left; } #menu ul { float:right; } #menu ul li { float:right; color:white; font-weight:bold; padding:1px 10px 1px 10px;}#menu li.drop{background-color:#999;} #menu ul li a{color:#FFF;text-decoration:none;}/******************/ #head{ background:url(images/header_bg.jpg); float:left; }#logo img{ margin:15px 0px 17px 25px;}#divsearch { float:right; margin:25px 50px 0px 0px; } #search{ width:200px; border:none; padding:3px 5px 3px 5px; }#btn{width:20px; height:20px; border:none; margin:0px; background:url(images/searchArrow.gif); position:relative; top:5px; background-position:center;}#nav{ background:url(images/mainNav_bg.jpg); background-repeat:no-repeat; background-position:right top; float:left; width:100%; } #nav ul{float:right; width:100%; margin-right:50px;} #nav ul li{float:right; padding:5px 10px 5px 10px; color:white; border-right:1px solid #224889; } #slider {height:545px; width:100%; background:url(images/qqqqqqqqqq.jpg); float:left; } #whartonmenu { float:right; margin-top:8%; margin-right:5%; width:235px; } #whartonmenu .fulltime { padding:5px 5px 5px 5px; background-color:#244889; text-align:center; margin-bottom:5px; font-size:18px; border:2px solid #666; color:white; } #mba {background:url(images/grad-mba.png); } #whartonmenu .fulltimemba { padding:5px 5px 5px 5px; color:white; text-align:center; margin-bottom:5px; font-size:18px; } .mbaa {padding:5px 5px 5px 5px; background-color:#244889; text-align:center; margin-bottom:20px; font-size:18px; border:2px solid #666; color:white; } #mywharton .headline { font-size:28px; color:#999; padding-top:60px; text-align:center; }#mywharton ul{float:left;width:100%;}#mywharton ul li{float:left;position:relative;width:300px;} #mywharton ul li img{ width:300px;} #mywharton ul li.one {margin-right:25px;} #mywharton ul li.two {float:right;} #mywharton ul li div.sound {width:280px; color:white; background:url(images/grad-mba.png); position:absolute; bottom:0px; padding:10px;}
效果
css样式表实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。