时间：2023-10-06 21:00:01 | 来源：网站运营
时间：2023-10-06 21:00:01 来源：网站运营
网页设计布局div+css代码实现一（附源文件）：Hi.今天开始第三课，主要说下如何实现第一课画的网页布局样式。在这里说下写网页代码和用什么软件没有关系，常用的软件有Dw、Vs、记事本、Hbuilder、Sublime等，我这边用的是Sublime。在制作前我们先看下最初的设计稿，如下图：
在线咨询
<!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; background-color: #99CC66}.footer{ width: 1200px; margin: 10px auto; height: 100px; border: 1px solid #99CC66}4、现在我们看到的效果如下图，是不是和我们最初的效果一样，下一节课我我们完成css美化网页及图片和文字内容的填充工作。关键词：实现,文件,设计,布局
