首页 > > 网络编程 > Php编程 >

运用<div>布局页面练习

2018-06-22 05:06:03来源：未知阅读 ()

<!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>Stanford University</title>
        <style type="text/css"> 
			
   
        
        </style>
        <link href="斯坦福.css" rel="stylesheet" type="text/css" />
</head>
    
    <body leftmargin="0">
    	
    	<div class="A"><img src="../stanforduniversity-125@2x.png" width="467px" height="70px">
    	  <div class="A1">
            	<font size="-1">
                    <form id="aa" method="post" action="http://www.baidu.com">
                      <table>
                          <tr>
                              <td width="350px" height="30px"> 
                              	
                              	  <input type="radio" name="aaa" id="aaa2" value="" />
                           	    web
                                                                                          
                                <input type="radio" name="aaa" id="aaa" value="" />people</td>
                                  
                               <td>
                                    
                                      <input type="text" name="a1" id="" value="" placeholder="search web or people">
                        </div></td>
                          </tr>
                      </table>
                    </form>
                </font>
    </div>
    </div>
        <div class="B">
       	  <table width="1000" height="29" style="position:absolute; left:185px; font-family:'仿宋'">
          		  
                  <tr>                
                    <td width="94px" align="center">About Stanford</td>
                    <td width="10%" align="center" >Admission</td>
                    <td width="10%" align="center" >Academics</td>
                    <td width="10%" align="center">Research</td>
                    <td width="10%" align="center">Campus Life</td>
                    <td width="10%" align="center"> </td>
                    <td width="10%" align="center" style="font-size:xx-small" >STUDENTS</td>
                    <td width="10%" align="center" style="font-size:xx-small">FACULTY / STAFF</td>
                    <td width="10%" align="center" style="font-size:xx-small">PARENTS </td>
                    <td width="10%" align="center" style="font-size:xx-small">ALUMNI</td>
                </tr>
       
      	  </table>
        </div>
   	    <div class="C">
        	<img src="../2016-04-22_ht_ug_Ellie_5029.jpg" width="1000px" height="350px"/>
            <div class="C1">
            	<img src="../QQ截图20161225092422.png" />
            </div>
        </div>
        <div class="D">
          Top Stories<hr color="#000000" />
        </div>
        <div class="E">
        	<img src="../2016-12-23_holiday_hp.jpg" width="218" height="174" />
        </div>
        <div class="F">
        	<img src="../2016-12-22_drell_hp.jpg" width="237" height="175" />
        </div>
        <div class="G">
        	<img src="../2016-12-20_oilsands_home.jpg" width="219" height="172" />
        </div>
        <div class="H"><font color="#990000">MORE HEADLINES</font><br /><br />
        					
										    Q&A with Norman Naimark: The<br> history of genocide<br><br>
											Research locates absence epilepsy<br> seizure 'choke point' in brain<br /><br />
                                            Stanford's East Asian Studies major adds Korean track
        </div>
        <div class="I"><b>Making spirits bright</b><br><br />
        				Before many head home for the holidays,<br>
                        the campus celebrates the season's<br />
                        traditions with music and fun.
        </div>
        <div class="J"> <b>Sidney Drell dies</b><br />
						Drell, a theoretical physicist and national <br>
                        security expert at Stanford, was 90.
        </div>
        <div class="K"><b>Ocean threat</b><br />
        				Unexamined risks from tar sands oil may threaten environment.
        </div>
        <div class="L">MORE NEWS</div>
        <div class="M">
        	<img src="../QQ截图20161225151410.png" width="1045" />
        </div>
        <div class="N">Events<hr />
        </div>
        <div class="O">AtStanford<hr />
        </div>
    <div class="P">Athletic<hr />
        </div>
        <div class="Q">
        	<img src="../QQ截图20161225184001.png" width="269" height="280" />
        </div>
    <div class="R">
    	<div class="R1">
        	<img src="../QQ截图20161225175355.png" width="305" height="44" />
        </div>
        <div class="R2">
        	<img src="../QQ截图20161225175408.png" width="36" height="207" />
        </div>

        <div class="R3">Christmas Eve Family Service<br />4 p.m.<br /><br />
                        Thursday Nights at the Anderson: Film Screening:<br /> Peggy Guggenheim: Art Addict<br />
                        6 p.m.<br /><br />
                        Men's Basketball vs. Arizona<br />
                        5 p.m.
        </div>
    </div>
    <div class="S">
    	<div class="S1">MORE</div>
    </div>
    <div class="T">
    	<div class="T1" style="line-height:24px">
        	<font color="#FF0000">RESOURCES
            </font><br />
                                  A - Z Index<br />
                                  Campus Map<br />
                                  Directory<br />
                                  Stanford Profiles
        </div>
        <div class="T2" style="line-height:24px">
        <font color="#FF0000">ABOUT STANFORD
        </font><br />
                              Facts<br />
                              History<br />
                              Accreditation<br /><br />
        <font color="#FF0000">ADMISSION
        </font><br />
                              Undergraduate<br />
                              Graduate<br />
                              Financial Aid<br />
        </div>
      <div class="T3" style="line-height:24px">
      	<font color="#FF0000">HEALTH CARE
        </font><br />
                              Stanford Health Care<br />
                              Stanford Children's Health<br />
        <font color="#FF0000">ONLINE LEARNING
        </font><br />
                              Stanford Online<br />
        </div>
        <div class="T4" style="line-height:24px">
        	<font color="#FF0000">	DEPARTMENTS
            </font><br>
                                    Departments A - Z<br />
                                    Interdisciplinary Programs<br /><br />
             <font color="#FF0000" >   RESEARCH
             </font><br />
                                        Research Centers A - Z<br />
                                        Interdisciplinary Research<br />
                                        Libraries<br />
                                
        </div>
        <div class="T5" style="line-height:24px">
            <font color="#FF0000">SCHOOL
            </font><br>
                                  Business<br />
                                  Earth, Energy & Environmental Sciences<br />
                                  Education<br />
                                  Engineering<br />
                                  Humanities & Sciences<br />
                                  Law<br />
                                  Medicine<br />
        </div>
        <div class="T6">
        	<img src="../QQ截图20161225195046.png" width="145" height="219" />
        
        </div>
    </div>
    <div class="U"><img src="../QQ截图20161225192417.png"></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
*{
	color:#999
	}
.A{
	width:100%;
	height:80px;
	background-color:#900;
	font:"微软雅黑";
	font-size:2.5em;
	font-weight:bold;
	color:#FFF;
	text-indent:100px;
	position:relative;
		
	}
.A1{
	width: 500px;
	height: 46px;
	background-color: #900;
	position: absolute;
	right: "0px";
	left: 846px;
	top: 20px;
	
	}
.B{
	width:100%;
	height:30px;
	background-color:#CCC;
	font-size:smaller
	}

.C{
	width:1000px;
	height:350px;
	margin:0px auto;
	margin-top:5px;
	}
.C1{
	width: 483px;
	height: 109px;
	position: absolute;
	left: 200px;
	top: 140px;

	}
.D{
	width: 1000px;
	height: 50px;
	
	margine-top: 20px;
	left: 173px;
	position: absolute;
	top: 539px;
	}
.E{
	width: 220px;
	height: 195px;
	
	margin-left: 160px;
	position: absolute;
	left: 14px;
	top: 594px;
    }


.F{
	width: 237px;
	height: 195px;
	
	margin-left: 20px;
	position: absolute;
	left: 413px;
	top: 595px;
	}
.G{
	width: 223px;
	height: 195px;
	
	margin-left: 20px;
	position: absolute;
	left: 685px;
	top: 596px;
	}
.H{
	width: 269px;
	height: 195px;
	margin-left: 20px;
	position: absolute;
	left: 924px;
	top: 595px;
	}
.I{
	width: 219px;
	height: 195px;
	margin-left: 160px;
	margin-top: 200px;
	position: absolute;
	left: 18px;
	top: 578px;
    }
.J{
	width: 233px;
	height: 195px;
	margin-left: 20px;
	margin-top: 200px;
	position: absolute;
	left: 414px;
	top: 578px;
	}
.K{
	width: 219px;
	height: 195px;
	margin-left: 20px;
	margin-top: 200px;
	position: absolute;
	left: 689px;
	top: 580px;
	}
.L{
	width: 211px;
	height: 161px;
	margin-left: 20px;
	margin-top: 200px;
	position: absolute;
	left: 943px;
	top: 616px;
	}
.M{
	width: 1158px;
	height: 50px;
	margin-top: 10px;
	position: relative;
	left: 187px;
	margin-top: 400px;
	position: absolute;
	top: 534px;
	}
.N{
	width: 300px;
	height: 50px;
	position: absolute;
	margin-top: 10px;
	left: 542px;
	top: 1010px;
	}
.O{
	width: 300px;
	height: 50px;
	position: absolute;
	margin-top: 10px;
	left: 183px;
	top: 1007px;
	}
.P{
	width: 300px;
	height: 50px;
	position: absolute;
	margin-top: 10px;
	left: 911px;
	top: 1008px;
	}
.Q{
	width: 300px;
	height: 316px;
	position: absolute;
	margin-top: 10px;
	left: 912px;
	top: 1061px;
	
	}
.R{
	width: 300px;
	height: 310px;
	position: absolute;
	margin-top: 10px;
	left: 542px;
	top: 1063px;
	}
.R1{
	width: 302px;
	height: 49px;
	position: absolute;
	left: -3px;
	top: 3px;
	}
.R2{
	width: 60px;
	height: 249px;
	position: absolute;
	left: -2px;
	top: 56px;
	}
.R3{
	width: 236px;
	height: 249px;
	position: absolute;
	left: 62px;
	top: 56px;
	
	}
.S{
	width: 300px;
	height: 317px;
	position: absolute;
	margin-top: 10px;
	left: 183px;
	top: 1060px;
	}
.S1{
	width: 300px;
	height: 20px;
	position: absolute;
	left: 0px;
	top: 250px;
	}
.T{
	width: 1330px;
	height: 300px;
	position: absolute;
	top: 1386px;
	left: -2px;
	background: #CCC
	}
.T1{
	width: 149px;
	height: 257px;
	position: absolute;
	top: 29px;
	left: 891px;
	}
.T2{
	width: 149px;
	height: 257px;
	position: absolute;
	top: 29px;
	left: 704px;
	}
.T3{
	width: 163px;
	height: 257px;
	position: absolute;
	top: 31px;
	left: 515px;
	}
.T4{
	width: 167px;
	height: 257px;
	position: absolute;
	top: 31px;
	left: 331px;
	}
.T5{
	width: 149px;
	height: 257px;
	position: absolute;
	top: 30px;
	left: 144px;
	}
.T6{
	width: 149px;
	height: 257px;
	position: absolute;
	top: 30px;
	left: 1075px;
	}
.U{
	width: 100%;
	height: 100px;
	position: absolute;
	top: 1688px;
	left: 0px;
	}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有