運用<div>佈局頁面練習

来源:http://www.cnblogs.com/li1056822533/archive/2016/12/26/6221171.html
-Advertisement-
Play Games

Stanford University ... ...


<!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="../[email protected]" 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;
	}

  

  


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Entity Framework 基礎 本教材將手把手教你使用entity framework,我們將使用entity framework 6.0和visual studio 2012。 以下表格是entity framework的各個重大版本 關於EF版本的更多信息請查看MSDN ...
  • 1. 軟體開發 軟體,即一系列按照特定順序組織的電腦數據和指令的集合。有系統軟體和應用軟體之分。 系統軟體:系統軟體系統軟體是負責管理電腦系統中各種獨立的硬體,使得它們可以協調工作。系統軟體使得電腦使用者和其他軟體將電腦當作一個整體而不需要顧及到底層每個硬體是如何工作的。比如我們講的wind ...
  • 使用java 中的Ftpclient 完成一個圖片上傳的服務,並且使用Nginx 作為代理伺服器進行圖片展示 ...
  • (1)在瀏覽器輸入地址,瀏覽器先去查找hosts文件,將主機名翻譯為ip地址,如果找不到就再去查詢dns伺服器將主機名翻譯成ip地址。 (2)瀏覽器根據ip地址和埠號訪問伺服器,組織http請求信息發送給伺服器。 (3)伺服器收到請求後首先根據Host請求頭判斷當前訪問的是哪台虛擬主機。 (4)服 ...
  • org.apache.commons.pool2.ObjectPool提供了對象池,開發的小伙伴們可以直接使用來構建一個對象池 使用該對象池具有兩個簡單的步驟: 1、創建對象工廠,org.apache.commons.pool2.BasePooledObjectFactory已經對工廠有抽象實現,所 ...
  • 靈魂寶石(1s 128MB)soulgem 【問題描述】 “作為你們本體的靈魂,為了能夠更好的運用魔法,被賦予了既小巧又安全的外形······” 我們知道,魔法少女的生命被存放於一個稱為靈魂寶石(Soul Gem)的裝置內。而有時,當靈魂寶石與軀體的距離較遠時,魔法少女就無法控制自己的軀體了。 在傳 ...
  • 用php截取中文字元串會出現各種問題,做一簡單彙總,文中的問題暫時還未解決,有大神解決了問題歡迎指教 ...
  • 今日問題: 請問主程式輸出結果是什麼?(點擊以下“【Java每日一題】20161226”查看20161223問題解析) 題目原發佈於公眾號、簡書:【Java每日一題】20161226,【Java每日一題】20161226 註:weknow團隊近期開通並認證了分答,歡迎大家收聽,有問題也歡迎到分答來咨 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...