css代码段-带你开始HTML+CSS网页设计、网页代码编译思路

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

带你开始HTML+CSS网页设计、网页代码编译思路

本文主要给大家详细讲解一下这段代码的作用和意义，以及网页代码的编译格式和思路。

下面我粘贴html代码：

这是我的第一个网页
BODY标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面，这里我写了一段文字，它就会在浏览器里显示出来。这些就构成了我们网页的基本格式，大家也不需要去背，知道表示什么意思就行，需要的时候直接拿来用。

复制

从代码中可以发现，所有的标签内容都被一个div标签所包含。 div是组合的块级元素，常用于区分不同的区域或模块。 它可以是独立的，也可以是可分的。 它有手动换行符，但您可以使用 css 为其定义样式或布局。

h2属于标题标签css代码段，可以自定义h1到h6。 一般可以使用网页的标题或者需要强调的内容。 p标签表示一段段落或文字介绍，img标签表示页面中的图像。 可以直接引入图片地址，注意是单个标签。

这样知道了这个标签的含义，我们就可以根据自己的实际需要来定义这段html代码的css样式了，

首先，我想限制整个区域的高度和长度，所以我们应该这样写：

如果想添加其他样式，可以继续定义，比如添加背景色、添加内行距或外行距。

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%;
}

复制

一个简单的网页代码和设计思路就这样完成了。 如果你明白了这段代码的功能和意义，那么恭喜你css代码段，你基本上已经入门了，因为所有的网页代码基本上都是按照这些格式和思路来编译的。 下一篇将继续介绍其他常用的html+css标签以及实际演示。 感谢您的观看！ ！ ！