css样式表实例

浏览数：28 / 时间：2015年06月09日

源代码
<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;}