在学习了HTML一段时间后，进入了网页制作构建的学习阶段，本次的任务就是对以下网页进行了临摹构建。
1.制作该网页的css代码如下：
<style>
/*清除游览器默认的格式*/
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
/*顶部区域*/
.top{
height: 160px;
width: 100%;
background-image: url(images/demo_r1_c1.jpg);
}
/*顶部logo*/
.Toplogo{
padding-left: 200px;
}
/*顶部导航条*/
.Topnavbar{
width: 333px;
height:50px;
/*设置浮动效果*/
float: right;
margin-right: 150px;
margin-top: 50px ;
}
.Topnavbar a{
font:18px "华文宋体";
text-decoration: none;
color: #c9c7ce;
margin: 0 25px;
}
/*支撑图片*/
.picture{
text-align: center;
}
.main {
width: 933px;
height: 770px;
margin: -5px auto;
border: 5px solid #d3dbde;
}
.Center_logo{
height: 272px;
background-image: url(images/demo_r1_c5.jpg);
border: 1px solid #333333;
}
.Center_logo p{
text-align: right;
padding-top: 5px;
margin-top:30px;
}
.Introduction{
height: 250px;
border: 1px solid #000;
margin-top: 10px;
}
.Introductioncolor{
width: 933px;
height: 50px;
background-color: #1153a7;
float: left;
}
.Introduction p{
float: left;
font:17px "新宋体";
color: #fafafa;
margin-left: 30px;
margin-right: 213px;
}
.Introduction_box{
width: 309px;
height: 200px;
float: left;
}
.Introduction img{
float: left;
}
.artwork{
height: 220px;
border: 1px solid #000;
margin-top: 10px;
}
.artwork img{
margin-top: 10px;
padding-left: 10px;
float: left;
}
.artwork_box{
width: 300px;
height: 178px;
float: left;
padding-left: 10px;
background-image: url(images/demo_r12_c6.jpg);
background-repeat:no-repeat;
}
.artworkimage{
float: left;
width: 900px;
height: 40px;
}
.artwork p{
padding-left:30px;
}
</style>
2.HTML代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IT-DIV1</title>
<link rel="stylesheet" href="IT-DIV1.css" type="text/css">
</head>
<body>
<!--顶部开始-------->
<div class="top">
<!--顶部logo图标-->
<div class="Toplogo">
<img src="images/demo_r1_c4.jpg" alt="">
<!--右侧导航条-->
<div class="Topnavbar">
<a href="#">联系</a>
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</div>
<!--间隔支撑图片-->
<div class="picture">
<img src="images/index_r2_c8.jpg" alt="">
</div>
<!--头部结束-->
</div>
<div class="main">
<!--logo及展示文字-->
<div class="Center_logo">
<p>你是否也意识到<span>信息技术</span>及<span>文化数字</span>对国家未来发展的重要性？</p>
<p>我们通过信息技术，动漫， 网站开发，flash程序设计，文化数字化</p>
<p>培养学生称为国家<span>信息产业</span>和<span>文化产业</span>崛起过程中的基点</p>
</div>
<!--学院介绍信息-->
<div class="Introduction">
<div class="Introductioncolor">
<a href="#"><p>新闻中心</p></a>
<a href="#"><p class="text">系部介绍</p></a>
<a href="#"><p>资质荣誉</p></a>
</div>
<div class="Introduction_box" ></div >
<img src="images/demo_r6_c9.jpg" width="1.5px" height="200px" alt="">
<div class="Introduction_box"></div>
<img src="images/demo_r6_c9.jpg"width="1.5px" height="200px" alt="">
<div class="Introduction_box"></div>
</div>
<!--学生作品展示-->
<div class="artwork">
<div class="artworkimage">
<img src="images/demo_r10_c7.jpg" >
</div>
<div class="artwork_box"></div>
<div class="artwork_box">
<p>动漫设计 <span>Flash</span></p>
</div>
<div class="artwork_box">
<p>
图形设计 <span>photoshop</span>
</p>
</div>
</div>
</div>
</body>
</html>
3.完成后的效果图为：
4.素材文件如下
链接：https://pan.baidu.com/s/1BAajb2OCbZ5v61DpsE8WEg
提取码：8yax
初次制作，对于网页架构并不是特别清楚，网页制作的临摹完成度并不是特别好，代码写的也并不清晰明了。请各位大佬悉心赐教。