网页制作学习经典案例
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<p>今年是清华大学思想政治教育专业创建30周年。日前，中共中央政治局常委，
国务副总理刘延东对清华大学思想政治理论课建设作出重要批示。......</p>
</div>
</div>
<div id="bottom">
<span>电话查号台：010-62793001 管理员信箱：xinxiban@tsinghua.edu.cn 地址：北京市海淀区清华大学</span><hr/>
</li>
</ul>
</div>
<div id="menu">
<ul>
<li>
<dl>
<dt><a href="#">清华新闻</a></dt>
<dd><a href="#">校长致辞</a></dd>
<dd><a href="#">学校沿革</a></dd>
<dd><a href="#">历任领导</a></dd>
}
#bottom{
margin-top:270px;
width:1350px;
height:80px;
background:#45166c;
color:#FFF;
text-align:center;
padding-top:50px;
}
#bottom em{
font-family:"微软雅黑";
}
</style>
color:#5c307d;
}
#menu{
margin-top:-12px;
}
#menu ul{
width:1200px;
height:150px;
margin-left:110px;
}
#menu ul a{
display:block;
height:32px;
}
#menu dl dt a{
font-family:"微软雅黑";
}
#title ul{
float:right;
padding-right:175px;
}
#title ul li{
padding-top:25px;
list-style:none;
margin-top:0px;
}
#title ul li a{
text-decoration:none;
padding-left:100px;
<dd><a href="#">科研机构</a></dd>
<dd><a href="#">科研合作</a></dd>
<dd><a href="#">科研成果与知识产权</a></dd>
<dd><a href="#">学术交流</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">招生信息</a></dt>
font-size:15px;
text-decoration:none;
color:#303;
}
#menu dl dd a{
font-family:"微软雅黑";
font-size:11px;
text-decoration:none;
color:#FFF;
}
#menu li{
float:left;
width:100px;
font-size:16px;
font-family:Verdana, Geneva, sans-serif,"宋体";
font-weight:100;
color:#333;
border-bottom:#b685f7 solid 3px;
border-top:#5b317d solid 3px;
background-color:#edeaf1;
padding:0;
list-style-type:none;
}
#menu li dt{
text-align:center;
}
#menu li dd{
width:100%;
display:none;
text-align:center;
}
#menu li:hover dd{
display:block;
font-weight:100;
color:#333;
border-bottom:#b685f7 solid 3px;
border-top:#5b317d solid 3px;
background-color:#edeaf1;
}
#right{
width:320px;
height:218px;
float:left;
<dt><a href="#">院系设置</a></dt>
</dl>
</li>
<li>
<dl>
<dt><a href="#">师资队伍</a></dt>
</dl>
</li>
<li>
<dl>
<dt><a href="#">教育教学</a></dt>
<dd><a href="#">本科生教育</a></dd>
<dd><a href="#">现任领导</a></dd>
<dd><a href="#">组织机构</a></dd>
<dd><a href="#">统计资料</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">学校概况</a></dt>
</dl>
</li>
<li>
<dl>
#left{
width:320px;
height:218px;
float:left;
font-size:16px;
font-family:Verdana, Hale Waihona Puke Baidueneva, sans-serif,"宋体";
font-weight:100;
color:#333;
border-bottom:#b685f7 solid 3px;
</head>
<body>
<div id="logo">
</div>
<div id="title">
<ul>
<li><a href="#">English Version</a></li>
<li>
<input type="text" />
<input type="button" value="搜索" />
<!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">
border-top:#5b317d solid 3px;
background-color:#edeaf1;
}
#center{
width:320px;
height:218px;
float:left;
font-size:16px;
font-family:Verdana, Geneva, sans-serif,"宋体";
<div id="exhi">
</div>
<div id="content">
<h3>头条新闻</h3>
<div id="left">
<h4>李克强在国家博物馆参与人居科学研究展</h4>
<p>11月27日，中共中央政治局常委，国务委员总理李克强来到国家博物馆，
参观人居可续研究展，在......</p>
</dl>
</li>
<li>
<dl>
<dt><a href="#">走进清华</a></dt>
<dd><a href="#">校园生活</a></dd>
<dd><a href="#">校园风光</a></dd>
<dd><a href="#">使用信息</a></dd>
</dl>
</li>
</ul>
</div>
}
#menu li a:hover{
background:#7f42ad;
color:white;
}
#menu dl:hover{
background:#7f42ad;
}
#exhi{
background:url(logo2.PNG) no-repeat;
width:1350px;
height:401px;
<em>©陈瑞制作</em>
</div>
</body>
</html>
</div>
<div id="center">
<h4>北京清华长庚医院建成开业</h4
><p>2014年11月28日，经历10年筹建，清华大学附属医院--北京清华长庚医
院正式投入运营，这标志着清华大学建设一流大学</p>
</div>
<div id="right">
<h4>刘延东对清华大学思政课建设作出重要批示</h4>
background-position:100px;
margin-top:-120px
}
#content{
margin-left:175px;
}
h3{
font-family:"微软雅黑";
font-weight:500;
}
h4{
font-family:"微软雅黑";
font-weight:500;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清华大学</title>
<style type="text/css">
body,dt,dd{
margin:0;
padding:0;
}
#logo{
<dd><a href="#">本科生招生</a></dd>
<dd><a href="#">研究生招生</a></dd>
<dd><a href="#">留学生招生</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">人才招聘</a></dt>
<dd><a href="#">招聘信息</a></dd>
margin-top:-9px;
padding-top:;
margin-left:175px;
background:#7f42ad;
text-align:center;
width:1000px;
height:8px;
}
#title{
font-family:Verdana, Geneva, sans-serif,"微软雅黑";
width:1350px;
height:121px;
background:url(logo1.PNG) no-repeat;
background-position:175px 21px;
background-color:#e1e1e1;
border-bottom:3px solid #7f42ad;
<dd><a href="#">招聘计划</a></dd>
<dd><a href="#">我要应聘</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">学校概况</a></dt>
</dl>
</li>
<li>
<dl>
<dt><a href="#">图书馆</a></dt>
<dd><a href="#">研究生教育</a></dd>
<dd><a href="#">留学生教育</a></dd>
<dd><a href="#">继续教育</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">科学研究</a></dt>
<dd><a href="#">科研项目</a></dd>
国务副总理刘延东对清华大学思想政治理论课建设作出重要批示。......</p>
</div>
</div>
<div id="bottom">
<span>电话查号台：010-62793001 管理员信箱：xinxiban@tsinghua.edu.cn 地址：北京市海淀区清华大学</span><hr/>
</li>
</ul>
</div>
<div id="menu">
<ul>
<li>
<dl>
<dt><a href="#">清华新闻</a></dt>
<dd><a href="#">校长致辞</a></dd>
<dd><a href="#">学校沿革</a></dd>
<dd><a href="#">历任领导</a></dd>
}
#bottom{
margin-top:270px;
width:1350px;
height:80px;
background:#45166c;
color:#FFF;
text-align:center;
padding-top:50px;
}
#bottom em{
font-family:"微软雅黑";
}
</style>
color:#5c307d;
}
#menu{
margin-top:-12px;
}
#menu ul{
width:1200px;
height:150px;
margin-left:110px;
}
#menu ul a{
display:block;
height:32px;
}
#menu dl dt a{
font-family:"微软雅黑";
}
#title ul{
float:right;
padding-right:175px;
}
#title ul li{
padding-top:25px;
list-style:none;
margin-top:0px;
}
#title ul li a{
text-decoration:none;
padding-left:100px;
<dd><a href="#">科研机构</a></dd>
<dd><a href="#">科研合作</a></dd>
<dd><a href="#">科研成果与知识产权</a></dd>
<dd><a href="#">学术交流</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">招生信息</a></dt>
font-size:15px;
text-decoration:none;
color:#303;
}
#menu dl dd a{
font-family:"微软雅黑";
font-size:11px;
text-decoration:none;
color:#FFF;
}
#menu li{
float:left;
width:100px;
font-size:16px;
font-family:Verdana, Geneva, sans-serif,"宋体";
font-weight:100;
color:#333;
border-bottom:#b685f7 solid 3px;
border-top:#5b317d solid 3px;
background-color:#edeaf1;
padding:0;
list-style-type:none;
}
#menu li dt{
text-align:center;
}
#menu li dd{
width:100%;
display:none;
text-align:center;
}
#menu li:hover dd{
display:block;
font-weight:100;
color:#333;
border-bottom:#b685f7 solid 3px;
border-top:#5b317d solid 3px;
background-color:#edeaf1;
}
#right{
width:320px;
height:218px;
float:left;
<dt><a href="#">院系设置</a></dt>
</dl>
</li>
<li>
<dl>
<dt><a href="#">师资队伍</a></dt>
</dl>
</li>
<li>
<dl>
<dt><a href="#">教育教学</a></dt>
<dd><a href="#">本科生教育</a></dd>
<dd><a href="#">现任领导</a></dd>
<dd><a href="#">组织机构</a></dd>
<dd><a href="#">统计资料</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">学校概况</a></dt>
</dl>
</li>
<li>
<dl>
#left{
width:320px;
height:218px;
float:left;
font-size:16px;
font-family:Verdana, Hale Waihona Puke Baidueneva, sans-serif,"宋体";
font-weight:100;
color:#333;
border-bottom:#b685f7 solid 3px;
</head>
<body>
<div id="logo">
</div>
<div id="title">
<ul>
<li><a href="#">English Version</a></li>
<li>
<input type="text" />
<input type="button" value="搜索" />
<!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">
border-top:#5b317d solid 3px;
background-color:#edeaf1;
}
#center{
width:320px;
height:218px;
float:left;
font-size:16px;
font-family:Verdana, Geneva, sans-serif,"宋体";
<div id="exhi">
</div>
<div id="content">
<h3>头条新闻</h3>
<div id="left">
<h4>李克强在国家博物馆参与人居科学研究展</h4>
<p>11月27日，中共中央政治局常委，国务委员总理李克强来到国家博物馆，
参观人居可续研究展，在......</p>
</dl>
</li>
<li>
<dl>
<dt><a href="#">走进清华</a></dt>
<dd><a href="#">校园生活</a></dd>
<dd><a href="#">校园风光</a></dd>
<dd><a href="#">使用信息</a></dd>
</dl>
</li>
</ul>
</div>
}
#menu li a:hover{
background:#7f42ad;
color:white;
}
#menu dl:hover{
background:#7f42ad;
}
#exhi{
background:url(logo2.PNG) no-repeat;
width:1350px;
height:401px;
<em>©陈瑞制作</em>
</div>
</body>
</html>
</div>
<div id="center">
<h4>北京清华长庚医院建成开业</h4
><p>2014年11月28日，经历10年筹建，清华大学附属医院--北京清华长庚医
院正式投入运营，这标志着清华大学建设一流大学</p>
</div>
<div id="right">
<h4>刘延东对清华大学思政课建设作出重要批示</h4>
background-position:100px;
margin-top:-120px
}
#content{
margin-left:175px;
}
h3{
font-family:"微软雅黑";
font-weight:500;
}
h4{
font-family:"微软雅黑";
font-weight:500;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清华大学</title>
<style type="text/css">
body,dt,dd{
margin:0;
padding:0;
}
#logo{
<dd><a href="#">本科生招生</a></dd>
<dd><a href="#">研究生招生</a></dd>
<dd><a href="#">留学生招生</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">人才招聘</a></dt>
<dd><a href="#">招聘信息</a></dd>
margin-top:-9px;
padding-top:;
margin-left:175px;
background:#7f42ad;
text-align:center;
width:1000px;
height:8px;
}
#title{
font-family:Verdana, Geneva, sans-serif,"微软雅黑";
width:1350px;
height:121px;
background:url(logo1.PNG) no-repeat;
background-position:175px 21px;
background-color:#e1e1e1;
border-bottom:3px solid #7f42ad;
<dd><a href="#">招聘计划</a></dd>
<dd><a href="#">我要应聘</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">学校概况</a></dt>
</dl>
</li>
<li>
<dl>
<dt><a href="#">图书馆</a></dt>
<dd><a href="#">研究生教育</a></dd>
<dd><a href="#">留学生教育</a></dd>
<dd><a href="#">继续教育</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">科学研究</a></dt>
<dd><a href="#">科研项目</a></dd>