• 运用<div>布局页面练习


    <!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{
    	100%;
    	height:80px;
    	background-color:#900;
    	font:"微软雅黑";
    	font-size:2.5em;
    	font-weight:bold;
    	color:#FFF;
    	text-indent:100px;
    	position:relative;
    		
    	}
    .A1{
    	 500px;
    	height: 46px;
    	background-color: #900;
    	position: absolute;
    	right: "0px";
    	left: 846px;
    	top: 20px;
    	
    	}
    .B{
    	100%;
    	height:30px;
    	background-color:#CCC;
    	font-size:smaller
    	}
    
    .C{
    	1000px;
    	height:350px;
    	margin:0px auto;
    	margin-top:5px;
    	}
    .C1{
    	 483px;
    	height: 109px;
    	position: absolute;
    	left: 200px;
    	top: 140px;
    
    	}
    .D{
    	 1000px;
    	height: 50px;
    	
    	margine-top: 20px;
    	left: 173px;
    	position: absolute;
    	top: 539px;
    	}
    .E{
    	 220px;
    	height: 195px;
    	
    	margin-left: 160px;
    	position: absolute;
    	left: 14px;
    	top: 594px;
        }
    
    
    .F{
    	 237px;
    	height: 195px;
    	
    	margin-left: 20px;
    	position: absolute;
    	left: 413px;
    	top: 595px;
    	}
    .G{
    	 223px;
    	height: 195px;
    	
    	margin-left: 20px;
    	position: absolute;
    	left: 685px;
    	top: 596px;
    	}
    .H{
    	 269px;
    	height: 195px;
    	margin-left: 20px;
    	position: absolute;
    	left: 924px;
    	top: 595px;
    	}
    .I{
    	 219px;
    	height: 195px;
    	margin-left: 160px;
    	margin-top: 200px;
    	position: absolute;
    	left: 18px;
    	top: 578px;
        }
    .J{
    	 233px;
    	height: 195px;
    	margin-left: 20px;
    	margin-top: 200px;
    	position: absolute;
    	left: 414px;
    	top: 578px;
    	}
    .K{
    	 219px;
    	height: 195px;
    	margin-left: 20px;
    	margin-top: 200px;
    	position: absolute;
    	left: 689px;
    	top: 580px;
    	}
    .L{
    	 211px;
    	height: 161px;
    	margin-left: 20px;
    	margin-top: 200px;
    	position: absolute;
    	left: 943px;
    	top: 616px;
    	}
    .M{
    	 1158px;
    	height: 50px;
    	margin-top: 10px;
    	position: relative;
    	left: 187px;
    	margin-top: 400px;
    	position: absolute;
    	top: 534px;
    	}
    .N{
    	 300px;
    	height: 50px;
    	position: absolute;
    	margin-top: 10px;
    	left: 542px;
    	top: 1010px;
    	}
    .O{
    	 300px;
    	height: 50px;
    	position: absolute;
    	margin-top: 10px;
    	left: 183px;
    	top: 1007px;
    	}
    .P{
    	 300px;
    	height: 50px;
    	position: absolute;
    	margin-top: 10px;
    	left: 911px;
    	top: 1008px;
    	}
    .Q{
    	 300px;
    	height: 316px;
    	position: absolute;
    	margin-top: 10px;
    	left: 912px;
    	top: 1061px;
    	
    	}
    .R{
    	 300px;
    	height: 310px;
    	position: absolute;
    	margin-top: 10px;
    	left: 542px;
    	top: 1063px;
    	}
    .R1{
    	 302px;
    	height: 49px;
    	position: absolute;
    	left: -3px;
    	top: 3px;
    	}
    .R2{
    	 60px;
    	height: 249px;
    	position: absolute;
    	left: -2px;
    	top: 56px;
    	}
    .R3{
    	 236px;
    	height: 249px;
    	position: absolute;
    	left: 62px;
    	top: 56px;
    	
    	}
    .S{
    	 300px;
    	height: 317px;
    	position: absolute;
    	margin-top: 10px;
    	left: 183px;
    	top: 1060px;
    	}
    .S1{
    	 300px;
    	height: 20px;
    	position: absolute;
    	left: 0px;
    	top: 250px;
    	}
    .T{
    	 1330px;
    	height: 300px;
    	position: absolute;
    	top: 1386px;
    	left: -2px;
    	background: #CCC
    	}
    .T1{
    	 149px;
    	height: 257px;
    	position: absolute;
    	top: 29px;
    	left: 891px;
    	}
    .T2{
    	 149px;
    	height: 257px;
    	position: absolute;
    	top: 29px;
    	left: 704px;
    	}
    .T3{
    	 163px;
    	height: 257px;
    	position: absolute;
    	top: 31px;
    	left: 515px;
    	}
    .T4{
    	 167px;
    	height: 257px;
    	position: absolute;
    	top: 31px;
    	left: 331px;
    	}
    .T5{
    	 149px;
    	height: 257px;
    	position: absolute;
    	top: 30px;
    	left: 144px;
    	}
    .T6{
    	 149px;
    	height: 257px;
    	position: absolute;
    	top: 30px;
    	left: 1075px;
    	}
    .U{
    	 100%;
    	height: 100px;
    	position: absolute;
    	top: 1688px;
    	left: 0px;
    	}
    

      

      

  • 相关阅读:
    随机生成300道四则运算
    练习
    电梯演说模板练习
    敏捷开发
    团队模式
    思考
    build to win 观后感
    四则运算
    Code review
    Mutual review
  • 原文地址:https://www.cnblogs.com/li1056822533/p/6221171.html
Copyright © 2020-2023  润新知