网页制作

来源：互联网发布：网络写手大神编辑：程序博客网时间：2024/05/02 02:27

<html>
<head>
<style>
*{
margin:0px;
}

#s{
background-color:#FFFFFF;
height:900px
}

#a{
background-color:#700005;
}
#a ul{
margin:5px auto;
list-style-type:none;
float:left;
}
#a ul li{
color:#FFFFFF;
float:left;
margin-right:10px;
}
#a ol{
margin:5px auto;
list-style-type:none;
float:right;
margin-right:20px;
}
#a ol li{
color:#FFFFFF;
float:right;
margin-right:10px;
}

#b{
background-color:#8F000B;
color:#FFFFFF;
font-size:28px;
}
#b img{
vertical-align:middle;
width:50px;
height:50px;
margin:20px 15px 20px 40px;
}

#m{
background-color:#FFFFFF;
text-align:center;
margin:5px auto;
}

#c{
background-color:red;
height:500px;
}
.d{
position:absolute;
width:100%;
height:500px;
}
.d > img{
width:100%;
height:100%;
}

#e{
margin:40px 150px 20px 150px;
border-bottom:2px solid #8F000B;
}

#g{
margin:0 150px 50px 150px;
height:280px;
}
#f{
float:left;
width:28%;
height:100%;
}
#f img{
width:100%;
height:65%;
margin-bottom:15px;
}
p{
margin-top:5px;
font-size:16px;
}

#h {
float:right;
width:70%;
height:100%;
}
#h ol{
width:43%;
list-style-type:none;
float:left;
}
#h ol li{
float:left;
padding-bottom:10px;
border-bottom:2px solid #DFE6E2;
margin-bottom:20px;
}
#h ul{
width:43%;
list-style-type:none;
float:right;
}
#h ul li{
float:right;
padding-bottom:10px;
border-bottom:2px solid #DFE6E2;
margin-bottom:20px;
}
#i{
color:#ffffff;
background-color:#700005;
width:100%;
height:300px;
}
#k{
float:left;
margin-bottom:20px;
margin-top:60px;
width:35%
}
#k ol{
list-style-type:none;
float:left;
margin-left:190px;
}
#k ol li{
margin-bottom:20px;
}
#k ul{
list-style-type:none;
float:right;
margin-right:30px;
}
#k ul li{
margin-bottom:20px;
}
#l{
float:left;
width:25%;
margin-left:50px;
align:center;
color:#FFFFFF;
}
#l img{
float:left;
width:50px;
height:50px;
margin-top:110px;
}
#l p{
float:right;
margin-top:120px;
font-size:28px;
}

#z{
background-color:#000000;
width:100%;
text-align:center;
color:#ffffff;
}

</style>
</head>
<body>
<div id="s">
<div id="a">
<ul>
<li>学生</li>
<li>教职工</li>
<li>校友</li>
<li>家长</li>
<li>访客</li>
<li>招牌</li>
<li>捐款</li>
</ul>
<ol>
<li>门户</li>
<li>网络</li>
<li>邮箱</li>
<li>BBS</li>
<li>图书馆</li>
<li>医学院</li>
<li>领导信箱</li>
<li>校庆</li>
<li>English</li>
</ol>
<div style="clear:both;"></div>
</div>

<div id="b">
<img src="img/1-5.png"/>北软信息职业技术学院
</div>

<div id="m">
北软概况&nbsp&nbsp招生资助&nbsp&nbsp 学部与院系&nbsp&nbsp 教育教学 &nbsp&nbsp科学研究 &nbsp&nbsp合作交流 &nbsp&nbsp校园生活
</div>

<div id="c">
<div class="d" style="z-index:1;"><img src="img/1-2.png" /></div>
<div class="d" style="z-index:2;"><img src="img/1-3.png" /></div>
<div class="d" style="z-index:3;"><img src="img/1-4.png" /></div>
</div>

<div id="e">北软要闻</div>
<div id="g">
<div id="f"><img src="img/1-1.png" /><h4>《辽宁高校党建和思想政治工作基本标准》检查组到北软检查工作</h4>
<p>11月30日，《辽宁高校党建和思想政治工作基本标准》检查组一行来到北软学院。全面检查学校贯彻落实《辽宁高校党建和</p></div>
<div id="h">
<ol>
<li>沈阳北软信息职业技术学院于2017年8月20日召开2017级新生家长会</li>
<li>蔡东风教授，1984年北京航空航天大学硕士研究生毕业，1988年被选送到日本留学。</li>
<li>尹宝生，副教授，复旦大学硕士（软件工程专业），1975年10月生。现任沈阳航空航天大学副教授、知识工程与人机交互技术工程中心学术骨干。</li>
<li>攻读硕士期间发表论文情况:白宇，蔡东风，赵环宇，季铎基于语义计算的中文相似问句</li>
</ol>
<ul>
<li>徐立军，副教授（男），沈阳航空航天大学硕士研究生（计算机应用技术专业）学历</li>
<li>全心全意为大学生创业和就业服,创业是当代大学生的历史使命创业和就业是高等</li>
<li>计算机实验中心作为学院的教学公共平台，肩负着学院的教学安排、组织和管理，及计算机实验室的建设、维护和管理等任务。随着学院办学规模的日益扩大以及学院对实验</li>
<li>学院的实习基地建设与专业建设相匹配，在现有产学研一体化的模式下，充分利用格微</li>

</ul>
</div>
</div>
<div id="i">
<div id="k">
<ol>
<li>北软概况</li>
<li>院系设置</li>
<li>科学研究</li>
<li>校园生活</li>
</ol>
<ul>
<li>招生资助</li>
<li>教育教学</li>
<li>合作交流</li>
<li>观光访问</li>
</ul>
</div>
<div id="l">
<img src="img/1-5.png"/><p>北软信息职业技术学院</p>
</div>
</div>
<div id="z">版权所有刘佳业&nbsp丨&nbsp地址：北方软件信息职业技术学院&nbsp丨&nbsp邮编：110100&nbsp丨&nbsp邮箱：2090466040@qq.com&nbsp
</div>
</div>
<script type="text/javascript">
function tpqh(){ /*创建图片自动切换方法*/
var ab = document.getElementsByClassName("d"); /*定义一个变量，找到所有的元素，将其储存到定义的变量中*/
var abLength = ab.length; /*定义一个变量，获取元素个数将其储存到定义的变量中*/
for(var i = 0; i < abLength;i++){ /*定义索引元素的初始值和终止值*/
var zIndex = parseInt(ab[i].style.zIndex,10); /*获取元素的z-index值，并将其转换为数值*/
zIndex = zIndex + 1; /*取得z-index值后进行+1操作*/
if(zIndex > abLength){ /*判断+1后的值，是否超过了变量中元素的总数量*/
zIndex = 1; /*超出元素总数量后，将z-index重置*/
}
ab[i].style.zIndex = zIndex; /*将变量中储蓄的元素值应用到div元素中*/
}
}
window.setInterval(tpqh,2000); /*每隔2秒，调用一次图片自动切换方法*/

</script>

</body>
</html>

阅读全文

0 0