静态网页的制作

这节课我们学习了如何制作静态网页

主要是分为5个部分

1 网站整体布局分析设计

2 导航与Banner的实现

3 左侧列表的实现

4 主体内容与脚注的实现

5 发布

在网站整体布局分析设计中

HTML中的标签：div标签<div> CSS样式中的：如何使用样式、设置div的样式（宽、高、背景、div并排）

div标签： Html的标签，成对出现<div></div> <div>定义页面上的一块区域，对整个页面划分区域用 常用的有id和class属性：<div id=“menu”>

Css样式： 引用方式-外链式：<link href="style.css" rel="stylesheet" type="text/css" /> css样式写法：选择器{ 属性1:属性1的值;… } 选择器分为：id选择器（#id）、class选择器（.class）、标签选择器（div）</div>

博客网页布局的CSS代码如下（需要设置每个div的宽、高、位置、背景色）： @charset "utf-8"; #box{     width:1024px;/* 设置id是box的div，高度为1014px */     height:1300px;     margin:0 auto;/*居中*/     background-color:#C00;

<!– 图片区域的高、宽、背景色 --> #banner{     width:100%;     height:209px;     background-color:#6FF; } <!– 导航菜单区域的高、宽、背景色 --> #menu{     height:50px;     background-color:#328048; } <!– 中间一大块主体区域的高、宽、背景色 --> #main{     height:1000px;     padding-top:10px; }

<!– 中间区域左边部分的的高、宽、背景色 --> #left{     height:1000px;     width:250px;     background-color:#6F9;     float:left; } #right{     height:1000px;     width:744px;     background-color:#FFC;     float:right; } #footer{     height:80px;     background-color:#328048;     }

 

转载于:https://my.oschina.net/u/4091223/blog/3023569