们先分析一下整个网页的结构，整体内容采用的是一个两列布局，导航无限延长的背景，并且添加了分割符号

素材：

第一步： 去掉默认的HTML间距。

*{padding:0;margin:0;}

Ps(我们可以在后期进行修改,根据网页中使用的HTML元素的个数如body,h1,div等)

第二步：按效果图头部灰色背景但是无限延长

HTML代码：

<div class="top">

<div id="top">

<p>读书屋欢迎您！</p>

</div>

</div>

两个DIV嵌套，<div class="top">这个需要100%添加背景，而内侧<div id="top"> 实现居中布局就可以了

.top{width:100%;background:#f5f5f5;height:35px;}

解释：宽度100%,添加背景颜色，设定高度，这样在缩放网页，始终可以看到灰色的背景

#top {width:970px;margin:0 auto;}

解释：网页宽度970像素，使id=top的div元素进行居中margin:0 auto;

#top p{font-size:13px;line-height:35px;}

解释：改变文字大小，就一行宣传文字，通过行高（和高度一样时间）实现垂直居中line-height:35px;

第三步：logo的实现，采用典型的以图换字的方式，有利于SEO

HTML代码：

<div id="header">

<h1>

<a href="#">css教程</a>

</h1>

</div>

CSS编码：

#header h1 a{

background:url(images/logo.png) no-repeat 0 50%;

display:block;

width:215px;height:60px;

text-indent:-9999px;

}

一篇文章中我分享了一段图文标签，这篇文章主要给大家详细解释一下这些代码的作用和意义，以及编写网页代码的格式与思路。

下面我贴上html代码：

<!--HTML-->
<div>
<h2>这是我的第一个网页</h2>
<p>BODY标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面，这里我写了一段文字，它就会在浏览器里显示出来。这些就构成了我们网页的基本格式，大家也不需要去背，知道表示什么意思就行，需要的时候直接拿来用。</p>
<p><img src="http://www.hmttv.cn/uploadfile/2024/0808/20240808042153700.png"></p>
</div>

从代码当中可以发现，所有的标签内容都被一个div标签所包含着，div属于组合块级元素，常用来区分不同的区域或模块，它可以是独立的，可分割的，它有自动换行的属性，但你可以通过使用css来给它定义样式或布局。

h2属于标题标签，从h1到h6都可以自定义，一般网页的标题或者需要着重表现的都可以用，p标签表示段落或者一段文字介绍，img标签表示页面中的图像，你可以直接引入图片地址，注意，它是一个单标记。

那么知道了这些标签的意义，我们就可以根据自己实际的需求给这段html代码定义css样式，

首先，我想给整个区域限制一个高度和宽度，那么我们就应该这样写：

<style type="text/css">
div {
 width: 300px; /*这里给个300像素的宽度*/
}

... /*未完待续*/

</style>

如果想加入其他的样式可以继续定义，如：添加一个背景颜色，添加一个内边距或外边距。

div {
 width: 300px; /*这里给个300像素的宽度*/
 background: #f2f2f2; /*这里给一个灰色的背景*/
 padding: 20px; /*这里给一个20像素的内边距*/
 margin: 20px; /*这里给一个20像素的外边距*/ 
}

注意：内边距的意思就是一个独立的区块或者标签往内部扩展距离，外边距就是往外部扩展距离，新入门的同学这里容易搞混。

接下我们定义标题，标题比较简单，比如，给它一个20像素的大小，标题颜色为红色，需要让它居中，那么就应该这样写：

h2 {
 font-size: 20px; /*这里给个20像素的字体大小*/
 color: #ff0000; /*这里给一个红色的字体颜色*/
 text-align: center; /*让它居中*/
}
```

文字介绍和标题差不多，就是字体小一点，注意的是需要给段落定义一个行高，调整段落之间的间隔。

p {
 font-size: 14px; /*这里给个14像素的字体大小*/
 color: #333; /*这里给一个黑色的字体颜色*/
 line-height: 24px; /*这里给一个24像素的行高*/
}

最后图片就更简单了，直接让它自适应宽度，跟随div，设置一个100%。

img {
	width: 100%;
}

一个简单的网页代码和设计思路就这样完成了，如果你懂了这些代码的作用和意义，那么恭喜你，你就基本入门了，因为所有的网页代码基本都是按照这种格式和思路编写的。下一篇给大家继续介绍其他常用的html+css标签以及实战演示，谢谢观看！！！