静态网页练习
Posted 军师联盟
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了静态网页练习相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px ;
}
.top-nav{
width: 100%;
height: 40px;
background-color: #808080;
text-align: right;
line-height: 40px;
}
.container{
width: 80%;
height: 1200px;
background-color:red;
margin: 0px auto;
}
.logo-banner{
width 100%;
height: 169px;
background-color: #808080;
}
.logo-left{
width: 20%;
height: 170px;
background-color: white;
float: left;
}
.logo-right{
width: 80%;
height: 170px;
background-color: #FFD700;
float: left;
}
.logo-right-1{
width: 100%;
height: 80px;
background-color: white;
float:left;
color: purple;
text-align: right;
line-height: 80px;
font-size: 20px;
font-weight: bold;
}
.logo-right-2{
width: 100%;
height: 90px;
background-color: white;
float: left;
text-align: right;
color: black;
line-height: 90px;
font-size: 18px;
font-weight: bold;
}
.logo-shop{
width: 100%;
height: 300px;
background-color: chocolate;
}
.btn{
width: 20%;
height: 670px;
background-color: white;
float: left;
}
.list-1{
width: 50%;
height: 670px;
background-color: white;
float: left;
}
.list-2{
width: 30%;
height: 670px;
background-color: white;
float: left;
}
.footer-1{
width: 100%;
height: 30px;
background-color: blue;
float: left;
text-align: center;
line-height: 30px;
}
.footer-2{
width: 100%;
height: 30px;
background-color: white;
float: left;
text-align: center;
line-height: 30px;
}
.btn-1-1{
float: left;
width: 100px;
height: 65px;
}
.btn-2-1{
float: left;
width: 100px;
height: 65px;
}
.list-1-1{
font-size: 18px;
text-align: left;
}
.list-1-1-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 40px;
}
a{
text-decoration: none;
color: black;
}
a:visited{
text-decoration: none;
}
.list-1-2{
font-size: 18px;
text-align: left;
overflow: hidden;
}
.list-1-2-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
overflow: hidden;
}
.list-2-1{
font-size: 16px;
text-align: left;
}
.list-2-1-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
overflow: hidden;
}
.list-2-2{
font-size: 16px;
text-align: left;
}
.list-2-2-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
}
.list-2-3{
font-size: 16px;
text-align: left;
}
.list-2-3-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
}
.list-2-4{
font-size: 16px;
text-align: left;
}
.list-2-4-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
}
</style>
</head>
<body>
<div class="top-nav">
·English New Vision Beta·English Vision
</div><!--顶导航-->
<div class="container">
<div class="logo-banner"><!--校徽栏-->
<div class="logo-left">
<img src="SunboHBuilder/img/u=3802107903,1484631994&fm=117&gp=0.jpg" />
</div><!--校徽-->
<div class="logo-right ">
<div class="logo-right-1">
信息公开 | 学生 | 教工 | 考生 | 校友 | 访客
<input type="text" placeholder="请输入关键字"/>
<input type="image" src="img/1.gif" />
</div><!--校徽右1-->
<div class="logo-right-2">
首页 南开概况 院系机构 南开新闻 人才师资 教育教学 科学研究 国际交流 招生就业 图书馆 服务指南
</div><!--校徽右2-->
</div>
</div>
<div class="logo-shop">
<img src="img/BGPyong.jpg" />
</div><!--图片栏-->
<div class="btn">
<div class="btn-1-1">
<img src="img/bangongwang.jpg" />
</div>
<div class="btn-1-1">
<img src="img/xiaozhangxinxiang.gif"/>
</div>
<div class="btn-1-1">
<img src="img/jiaoyujijinhui.gif" />
</div>
<div class="btn-2-1">
<img src="img/nankaixiaoyouhui.gif" />
</div>
<div class="btn-2-1">
<img src="img/xinximenhu.gif" />
</div>
<div class="btn-2-1">
<img src="img/VPNfuwu.gif" />
</div>
<input type="text" placeholder="用户名" /><br />
<input type="password" /><br />
<select size="1"><br />
<option >教工电子邮箱</option>
<option >学生电子邮箱</option>
</select><br />
<a href="#">教工邮箱注册</a>
<input type="submit" name="提 交" /><br />
<a href="#">学生邮箱注册</a><br />
<a href="#">VPN服务》》</a><br />
</div><!--按钮栏-->
<div class="list-1">
<div class="list-1-1">
最新动态 更多-》
</div>
<ul type="circle" class="list-1-1-1">
<li><a href="#">校党委常委会召开巡视整改民主生活会; 07-18</a></li>
<li><a href="#">学校召开2017年暑期工作会议; 07-21</a></li>
<li><a href="#">第九届全国MBA商业伦理与企业社会责任教学研讨会南开召开; 07-21</a></li>
<li><a href="#">商学院推行课程思政 全过程突显德育元素; 07-21</a></li>
<li><a href="#">我校教职工党支部书记示范班赴井冈山培训; 07-20</a></li>
<li><a href="#">南开学子苗春当选第五届天津市道德模范; 07-20</a></li>
<li><a href="#">我校2017年本科高招录取进程过半 生源质量稳中有升; 07-20</a></li>
<li><a href="#">学校召开新提任处级领导干部廉政谈话会; 07-20</a></li>
<li><a href="#">第七届“图书馆学实证研究”博士生学术会议南开举行; 07-20</a></li>
<li><a href="#">?一名经济学博士的西部基层梦; 07-20</a></li>
<li><a href="#">?学校党委要求组织师生收看《将改革进行到底》; 07-19</a></li>
<li><a href="#">南开大学团队研获新型生物荧光探针设计策略; 07-18</a></li>
</ul>
<div class="list-1-2">
校情通报 更多-》
</div>
<span class="list-1-2-1"><a href="#">7月6日,天津市政协副主席、我校党委书记魏大鹏在昆明会见云南省委书记、省人大常委会主任陈豪,省委副书记、省长阮成发。省委常委、常务副省长宗国英,省委副秘书长、省委办公厅主任刘立志,省政府副秘书长赵瑞君,我校领导杨克欣、张亚、佟家栋等参加会见。
南开大学办公室
2017年7月10日 </a>
</span>
</div><!--多文本栏-->
<div class="list-2">
<div class="list-2-1">
通告公告 更多->
</div>
<ul type="circle" class="list-2-1-1">
<li><a href="https://www.baidu.com" target="_blank">暑假期间教务处办理全日制本科毕...07-17</a></li>
<li><a href="https://www.baidu.com" target="_blank">2017年暑期全校值班安排07-14</a></li>
<li><a href="https://www.baidu.com" target="_blank">南开大学中层干部拟提拔任用人选...07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">八里台校区大中路施工的通知07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">2017年暑期职工医疗费报销和医保...07-17</a></li>
</ul>
<div class="list-2-2">
干部选任 更多->
</div>
<ul type="circle" class="list-2-2-1">
<li><a href="https://www.baidu.com" target="_blank">关于推荐结对帮扶困难村驻村干部...07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">关于考察党委组织部欧迎希的预告07-03</a></li>
<li><a href="https://www.baidu.com" target="_blank">关于考察党委组织部张洋的预告07-03</a></li>
</u>
<div class="list-2-3">
南开大学电视新闻 更多->
</div>
<ul class="list-2-3-1">
<li><a href="https://www.baidu.com" target="_blank">南开大学电视新闻2017年7月14日07-14</a></li>
<li><a href="https://www.baidu.com" target="_blank">南开大学电视新闻2017年7月11日07-11</a></li>
</ul>
<div class="list-2-4">
媒体南开 更多->
</div>
<ul class="list-2-4-1">
<li><a href="https://www.baidu.com" target="_blank">天津日报:一个问题的解决就是对...07-21</a></li>
<li><a href="https://www.baidu.com" target="_blank">今晚报:启功笔下的溥佐07-21</a></li>
<li><a href="https://www.baidu.com" target="_blank">辽宁卫视:锦州义勇军抗战遗址成...07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">光明日报:史学研究的主旨在于求...07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">天津广播网:恢弘重现改革历程 ...07-20</a></li>
</ul>
</div><!--少文本栏-->
<div class="footer-1">
南开招标网 滨海学院 附属小学 学习网 觉悟网 校史网 后勤保障部 讲座网
</div>
<div class="footer-2">
天津市卫津路94号 [300071] 津教备0061号 津ICP号12003308号——1
</div>
</div><!--内容-->
</body>
</html>
以上是关于静态网页练习的主要内容,如果未能解决你的问题,请参考以下文章