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=#>PENNa>li> <li><a href=#>WHARTON HOMEa>li> <li class="drop"><a href=#>CAMPUSESa><img src="images/metaNav_arrow.gif">a>li> <li><a href=#>DIRECTORIESa>li> <li><a href=#>NEWSa>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>CORPPORAATIONSli> <li>ALUMINli> <li>ABOUT WHARTONli> <li>FACULTY AND RESEARCHli> <li>ACADEMICSli> ul> div> div> <div id="main" class="container"> <div id="slider"> <div id="whartonmenu"> <div class="fulltime">UNDERGRADUATEdiv> <div id="mba" class="fulltimemba"> <h1> MBAh1> <div class="mbaa">FULL-TIMEdiv> <div class="mbaa">FOR EXECUTIVESdiv> div> <div class="fulltime">DOCTORALdiv> <div class="fulltime">EXECUTIVE EDUCATIONdiv> <div class="fulltime">ALUMNI NETWWORKdiv> div> div> <div style="clear:both">div> <div id="mywharton"> <div class="headline">#My Whartondiv> <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’13div> 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’13div> 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’13div> 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样式表实例_第1张图片

转载于:https://www.cnblogs.com/w297613932/p/4245002.html

你可能感兴趣的:(css样式表实例)