斯坦福大学首页制作
昨天休息，鉴于刚学完布局，老师叫我们做斯坦福官网首页，说要做框架出来，然后尽量能完善的完善，鉴于我做东西一发不可收拾的结果，我除了框架还把内弄填进去了，当然，每个信息的超链接是没弄上去的了，因为时间不太够了，所以我把代码成果写入博客留作第一次做网页的纪念吧，由于第一次做网页，期间走了不少的弯路。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>斯坦福首页</title>
<link type="text/css" rel="stylesheet" href="css/css2.css" />
<style>
* {
margin:0px;
padding:0px;
}
#top {
width: 100%;
height: 100px;
/*border: 1px solid black;*/
background-color: darkred;
}
.top-left,.top-right {
width:40%;
height:100px;
/*border:2px solid black;*/
float:left;
text-align:center;
line-height:100px;
font-size:30px;
color:white;
}
.top-right {
width:40%;
float:right;
/*background-color:yellow;*/
height:100px;
text-align:center;
line-height:100px;
/*border:1px solid black;*/
font-size:16px;
}
.top2 {
width:100%;
height:50px;
float:right;
/*border:1px solid black;*/
background-color:whitesmoke;
}
.ct3 {
width:650px;
height:50px;
/*border:1px solid black;*/
float:left;
margin:0px 0px 0px 95px;
font-size:18px;
line-height:50px;
}
.ct4 {
width:400px;
height:50px;
/*border:1px solid red;*/
float:left;
margin:0px 0px 0px 160px;
font-size:13px;
line-height:50px;
}
.center-out {
width:100%;
height:1400px;
/*border:1px solid black;*/
margin-top:70px;
}
.center1 {
width:1160px;
height:430px;
/*border:1px solid black*/
margin:0px auto;
background-image:url(img/113.jpg);
}
.center1-1 {
width:600px;
height:100px;
margin:20px 0px 0px 15px;
border:1px solid black;
background-color:whitesmoke;
opacity:0.8;
}
.center1-1-1 {
width:600px;
height:100px;
margin:20px 0px 0px 20px;
/*border:1px solid black;*/
}
.span {
color:red;
font-size:x-large;
}
.center2 {
width:1160px;
height:70px;
border-bottom:1px solid grey;
/*border:1px solid black;*/
margin:0px auto;
font-size:20px;
vertical-align:bottom;
line-height:120px;
}
.center3 {
width:1160px;
height:340px;
/*border:1px solid black;*/
margin:0px auto;
}
.c3-1 {
width:260px;
margin:20px 20px 0px 0px;
height:160px;
/*border:1px solid red;*/
float: left;
background-image:url(img/s1.jpg);
background-repeat:no-repeat;
}
.c3-2 {
width:260px;
margin:20px 20px 0px 0px;
height:160px;
/*border:1px solid red;*/
float: left;
background-repeat:no-repeat;
background-image:url(img/s2.jpg);
}
.c3-3 {
width:260px;
margin:20px 20px 0px 0px;
height:160px;
/*border:1px solid red;*/
float: left;
background-repeat:no-repeat;
background-image:url(img/s3.jpg);
}
.c4 {
width:290px;
margin:20px 20px 0px 0px;
height:160px;
/*border:1px solid red;*/
float:left;
list-style-position:inside;
}
.c5 {
width:260px;
margin:20px 20px 0px 0px;
height:138px;
/*border:1px solid red;*/
float:left;
}
.c6 {
width:260px;
margin:20px 20px 0px 0px;
height:138px;
/*border:1px solid red;*/
float:left;
}
.c7 {
width:260px;
margin:20px 20px 0px 0px;
height:138px;
/*border:1px solid red;*/
float:left;
}
.c8 {
width:260px;
margin:20px 20px 0px 0px;
height:138px;
/*border:1px solid red;*/
float:left;
line-height:120px;
}
.center4 {
width:1160px;
height:70px;
/*border:1px solid black;*/
margin:0px auto;
}
.center4-1 {
width:830px;
height:70px;
/*border:1px solid black;*/
background-color:antiquewhite;
float:left;
}
.c41 {
width:100px;
height:70px;
/*border:1px solid black;*/
float:left;
text-align:center;
vertical-align:middle;
line-height:30px;
}
.c42 {
width:120px;
height:70px;
/*border:1px solid black;*/
float:left;
text-align:center;
line-height:70px
}
.c43 {
width:590px;
height:70px;
/*border:1px solid black;*/
float:left;
}
.c44{
width:130px;
height:70px;
/*border:1px solid black;*/
float:left;
}
.center4-2 {
width:300px;
height:70px;
/*border:1px solid black;*/
float:left;
background-image:url(img/pingguo.png);
}
.center5 {
width:1160px;
height:70px;
/*border:1px solid black;*/
margin:0px auto;
}
.c51 {
width:400px;
height:70px;
/*border:1px solid black;*/
margin:0px 10px 0px 0px;
float:left;
border-bottom:1px solid grey;
font-size:20px;
vertical-align:bottom;
line-height:120px;
}
.c52 {
width:400px;
height:70px;
/*border:1px solid black;*/
margin:0px 10px 0px 0px;
float:left;
border-bottom:1px solid grey;
font-size:20px;
vertical-align:bottom;
line-height:120px;
}
.c53 {
width:320px;
height:70px;
/*border:1px solid black;*/
margin:0px 10px 0px 0px;
float:left;
border-bottom:1px solid grey;
font-size:20px;
vertical-align:bottom;
line-height:120px;
}
.center6 {
width:1160px;
height:360px;
/*border:1px solid black;*/
margin:0px auto;
}
.c61 {
width:400px;
height:360px;
/*border:1px solid black;*/
margin:0px 10px 0px 0px;
float:left;
line-height:600px;
}
.c62 {
width:400px;
height:360px;
/*border:1px solid black;*/
margin:0px 10px 0px 0px;
float:left;
list-style-position:inside;
line-height:40px;
}
.c63 {
width:320px;
height:360px;
/*border:1px solid black;*/
margin:0px 10px 0px 0px;
float:left;
}
.c631 {
width:100px;
height:360px;
/*border:1px solid black;*/
float:left;
margin:0px 40px 0px 0px;
background-image:url(img/shu.png);
background-repeat:no-repeat;
}
.c632 {
width:160px;
height:360px;
/*border:1px solid black;*/
float:left;
margin:0px 10px 0px 0px;
line-height:30px;
}
.down1 {
width:100%;
height:300px;
/*border:1px solid black;*/
background-color:whitesmoke;
}
.cd1 {
width:140px;
height:250px;
/*border:1px solid red;*/
margin:40px 0px 0px 90px;
float:left;
}
.cd2 {
width:140px;
height:250px;
/*border:1px solid red;*/
margin:40px 0px 0px 60px;
float:left;
}
.cd3 {
width:140px;
height:250px;
/*border:1px solid red;*/
margin:40px 0px 0px 60px;
float:left;
}
.cd4 {
width:140px;
height:250px;
/*border:1px solid red;*/
margin:40px 0px 0px 60px;
float:left;
}
.cd5 {
width:140px;
height:250px;
/*border:1px solid red;*/
margin:40px 0px 0px 60px;
float:left;
}
.cd6 {
width:140px;
height:250px;
/*border:1px solid red;*/
margin:40px 0px 0px 60px;
float:left;
}
.btn {
width:100px;
height:40px;
border:black solid 1px;
text-align:center;
line-height:40px;
background-color:grey;
}
.btn:hover {
background-color:black;
color:white;
cursor:pointer;
}
.btn2 {
width:100px;
height:40px;
border:black solid 1px;
text-align:center;
line-height:40px;
background-color:grey;
}
.btn2:hover {
background-color:black;
color:white;
cursor:pointer;
}
.btn3 {
width:100px;
height:40px;
border:black solid 1px;
text-align:center;
line-height:40px;
background-color:grey;
}
.btn3:hover {
background-color:black;
color:white;
cursor:pointer;
}
.btn4 {
width:100px;
height:40px;
border:black solid 1px;
text-align:center;
line-height:40px;
background-color:grey;
}
.btn4:hover {
background-color:black;
color:white;
cursor:pointer;
}
.btn5 {
width:100px;
height:40px;
border:black solid 1px;
text-align:center;
line-height:40px;
background-color:grey;
}
.btn5:hover {
background-color:black;
color:white;
cursor:pointer;
}
.down2 {
width: 100%;
height: 100px;
/*border: 1px solid black;*/
background-image:url(img/down.png);
}
</style>
</head>
<body>
<div id="top">
<div class="top-left">Stanford University</div>
<div class="top-right">
<label for="nan">Web</label><input type="radio" name="4" value="q" id="nan" />
  <label for="nv">People</label><input type="radio" name="4" value="q" id="nv" />
  <input type="text" placeholder="Search web or people" name="1" />
</div>
</div>
<div class="top2">
<div class="ct3">
About Stanford
     Admission
     Academics
      Research
     Campus Life
</div>
<div class="ct4">
STUDENTS
    FACULTY / STAFF
    PARENTS
    ALUMNI
</div>
</div>
<div class="center-out">
<div class="center1">
<div class="center1-1">
<div class="center1-1-1">
<div class="span">
<span>Iran,past and preset</span>
</div>
<p>Ten-year-old Stanford program explores depth and breadth of</p>
<p>unique nation politics,history,language and culture.</p>
</div>
</div>
</div>
<div class="center2">Top Stories</div>
<div class="center3">
<div class="c3-1"></div>
<div class="c3-2"></div>
<div class="c3-3"></div>
<div class="c4">
<p>MORE HEADLINES</p>
<ul type="square">
<li>Scientists crowdsource autism data to learn where resource gaps exist</li>
<li>Study finds first possible drug treatment for lymphedema</li>
<li>Report details universities' efforts on sexual assault</li>
</ul>
</div>
<div class="c5">
<p>Optimal dosing</p>
<p>Stanford engineers create experimental </p>
<p>technology to monitor and maintain drug </p>
<p>levels in the body.</p>
</div>
<div class="c6">
<p>Experts on demand</p>
<p>Stanford researchers develop crowdsourcing </p>
<p>software to convene rapid, on-demand flash </p>
<p>organizations.</p>
</div>
<div class="c7">
<p>Real-life scenarios</p>
<p>'Humbling' hospital simulations inspire </p>
<p>Stanford graduate students to solve </p>
<p>problems in health care delivery.</p>
</div>
<div class="c8"> MORE NEWS</div>
</div>
<div class="center4">
<div class="center4-1">
<div class="c41">
<p>11 MIN.</p>
<p>AGO</p>
</div>
<div class="c42"> @Stanford</div>
<div class="c43">
<p>
.@StanfordMed's Caitlin O' Connell-Rodwell has shown the potential for elephant-
</p>
<p>
inspired vibrational hearing aids. stanford.io/2q3nFDS
</p>
</div>
</div>
<div class="center4-2"></div>
</div>
<div class="center5">
<div class="c51">At Stanford</div>
<div class="c52">Events</div>
<div class="c53">Athletics</div>
</div>
<div class="center6">
<div class="c61"> MORE SITES</div>
<div class="c62">
<ul type="square">
<li>
Bike to Work Day at Stanford
</li>
<li>
Creativity on the Line: Design for the Corporate World, 1950–1975
</li>
<li>
2017 Oksenberg Lecture - Ambassador Max Baucus3:00 PM
</li>
<li>
Stanford Medicine Dean's Lecture Series: Thomas Pike5:00 PM
</li>
<li>
EVENT CALENDAR
</li>
</ul>
</div>
<div class="c63">
<div class="c631"></div>
<div class="c632">
<p>Leading the way</p>
<p>
Stanford was well represented with 14 athletic programs earning perfect 1,000 multi-year scores in the Academic Progress Rate statistics issued by the NCAA.
</p>
<p> GOSTANFORD.COM</p>
</div>
</div>
</div>
</div>
<div class="down1">
<div class="cd1">
<p>SCHOOLS</p>
<p>
Business
Earth, Energy & Environmental Sciences
Education
Engineering
Humanities & Sciences
Law
Medicine
</p>
</div>
<div class="cd2">
<p>DEPARTMENTS</p>
<p>
Departments A - Z
Interdisciplinary Programs<br /><br /><br />
RESEARCH
Research Centers A - Z
Interdisciplinary Research
Libraries
</p>
</div>
<div class="cd3">
<p>HEALTH CARE</p>
<p>
Stanford Health Care
Stanford Children's Health<br /><br /><br />
ONLINE LEARNING
Stanford Online
</p>
</div>
<div class="cd4">
<p>ABOUT STANFORD</p>
<p>
Facts
History
Accreditation<br /><br /><br />
ADMISSION
Undergraduate
Graduate
Financial Aid
</p>
</div>
<div class="cd5">
<p>RESOURCES</p>
<p>
A - Z Index
Campus Map
Directory
Stanford Profiles
</p>
</div>
<div class="cd6">
<div class="btn">Apple</div>
<div class="btn2">Visit Campus</div>
<div class="btn3">Make a Gift</div>
<div class="btn4">Find a Job</div>
<div class="btn5">Contact Us</div>
</div>
</div>
<div class="down2"></div>
</body>
</html>
