您的位置：首页 > 其它

运用<div>布局页面练习

2016-12-26 08:31 288 查看 
<!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;
}


　　

　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航