网页布局与CSS样式详解-优快云博客

在上次网页代码的基础上新增加了一些功能：

#banner:一张头部图片

#left:中间的左边部分

#main:中间主要部分

#menu:导航菜单

#right:中间的右边部分

#footer:尾部的部分

#zuozhe:图片和文本

#huoli:标题、小图标、列表

#list:标题、列表文章分类列表最新文章列表

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--引入css文件用link标签-->
<link href="blog.css" type="text/css" rel="stylesheet" />
<!--<script type="text/javascript" src=""></script>-->

</head>

<body>
    <div id="box">
        <div id="banner">
            <img src="images/bg.jpg" alt="我的图片不见了" />
        </div>
        <div id="menu">
            我是菜单
        </div>
        <div id="main">
            <!--左边区域-->
               <div id="left">
                左边区域
            </div>
            <div id="right">
                右边区域
            </div>         
        </div>
        <div id="footer">
            footer
        </div>
    </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
#box{
    background-color:#F00;
    width:1024px;
    height:1300px;
    /*margin:0 auto;*/
    margin:0 auto 0 auto;/*上 右 下 左*/
}
/*放图片，设置高度和图片一样高*/
#banner{
    background-color:#66F;
    height:209px;
}
#menu{
    background-color:#C3F;
    height:50px;
}
#main{
    background-color:#6F0;
    height:1000px;
}
#left{
    background-color:#33C;
    height:1000px;
    width:250px;
    float:left;/*可以使div横向排排坐*/
}
#right{
    background-color:#F3F;
    height:1000px;
    width:774px;
    float:right;/*可以使div横向排排坐*/
}

#footer{
    background-color:#F63;
    height:80px;
}

知识点：

HTML中的标签：块标签div、图片<img>、行内标签<span>、h5标题、列表标签<ul>、<li>

CSS样式中的属性：

图片边框：border

高：height

宽：width

内边距：pandding

外边距：margin

边框4个角设为圆角:border-radius

文本内容居中：text-align

字体：font-size、font-family、font-weight、color

垂直居中：line-height