|
Hi.今天起始第三课，重点说下怎样实现第1课画的网页布局样式。在这儿说下写网页代码和用什么软件无关系，常用的软件有Dw、Vs、记事本、Hbuilder、Sublime等，我这边用的是Sublime。在制作前咱们先看下最初的设计稿，如下图：
第1步，确定网页的尺寸，这儿重点说下，网页的尺寸通常设计在1000p-1300px之间。在网页部分的板块能够用1920px做全铺延申效果，然则网页的内容最好是放到1000p-1300px之间。下面咱们就用1200px做为这次的网页效果。
第二步，咱们这新建咱们网页目录，要新建三个文件夹，照片文件夹images,css文件夹css，js文件夹js，这儿大众能够根据自己的需求来定义文件夹。
第三步，实现代码部分，代码在写法上要记得先定义大盒子，而后是小盒子。秉承从上往下的原则完成网页的代码编写过程。
1、在根目录下新建index.html文件,在css文件夹新建style.css。在编辑器打开index.html。完成网页的基本代码，如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
这个放内容
</body>
</html>
2、在html定义好每一个盒子的命名，并做好注释。代码如下：（这段代码是放到body标签里面。）
<!-- 头部代码 起始 -->
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<!-- banner图代码 起始 -->
<div class="banner">
</div>
<!-- 内容代码 起始 -->
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<!-- 底部代码 起始 -->
<div class="footer">
</div> 3、定义css.css文件，把html里面命名的盒子写上相对应的属性，代码如下
*{
margin: 0;
padding: 0;
}
body{
font-size: 14px;
color: #333;
font-family: 微软雅黑
}
.header{
width: 1200px;
margin: 0 auto;
height: 50px;
border: 1px solid #99CC66
}
.logo{
float: left;
width: 200px;
border: 1px solid #99CC66;
height: 50px;
}
.nav{
float: left;
width: 800px;
}
.banner{
width: 1200px;
margin: 10px auto;
height: 350px;
border: 1px solid #99CC66
}
.content{
width: 1200px;
margin: 10px auto;
height: 450px;
border: 1px solid #99CC66
}
.content li{
float: left;
width: 260px;
margin-left: 30px;
border: 1px solid #99CC66;
list-style: none;
height: 200px;
margin-top: 20px;
bac公斤round-color: #99CC66
}
.footer{
width: 1200px;
margin: 10px auto;
height: 100px;
border: 1px solid #99CC66
}
4、此刻咱们看到的效果如下图，是不是和咱们最初的效果同样，下一节课我咱们完成css美化网页及照片和文字内容的填充工作。
最后还有福利，必须源文件的私聊我就能够啦。
| 
发表于 2024-6-30 08:47:57
