七小时带你入门HTML+CSS网页设计，编写网页代码的思路（三）-天涯论坛

6257rv7 发表于 2024-7-27 22:47:27

七小时带你入门HTML+CSS网页设计，编写网页代码的思路（三）

<div style="color: black; text-align: left; margin-bottom: 10px;">
 上一篇文案中我分享了一段图文标签，这篇文案重点给大众仔细解释一下这些代码的功效和道理，以及编写网页代码的格式与思路。
 下面我贴上html代码：
 <div>
 <h2>这是我的第1个网页</h2>
 BODY标签暗示网页主体元素的容器，它包括了网页所有的html标签如：文本、照片、列表等等。以后咱们编写的网页标签都需要放在这儿面，这儿我写了一段文字，它就会在浏览器里表示出来。这些就构成为了咱们网页的基本格式，大众亦不需要去背，晓得暗示什么意思就行，需要的时候直接拿来用。
 <img src="https://tpt360.com/tuimg/yan.png">
 </div>从代码其中能够发掘，所有的标签内容都被一个div标签所包括着，div属于组合块级元素，常用来区分区别的区域或模块，它能够是独立的，可分割的，它有自动换行的属性，但你能够经过运用css来给它定义样式或布局。
 h2属于标题标签，从h1到h6都能够自定义，通常网页的标题或需要着重表现的都能够用，p标签暗示段落或一段文字介绍，img标签暗示页面中的图像，你能够直接引入照片位置，重视，它是一个单标记。
 那样晓得了这些标签的道理，咱们就能够按照自己实质的需要给这段html代码定义css样式，
 首要，我想给全部区域限制一个高度和宽度，那样咱们就应该这般写：<style type="text/css">
 div {
 width: 300px; /*这儿给个300像素的宽度*/
 }

 ... /*未完待续*/

 </style>
 倘若想加入其他的样式能够继续定义，如：添加一个背景颜色，添加一个内边距或外边距。div {
 width: 300px; /*这儿给个300像素的宽度*/
 bac公斤round: #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标签以及实战演示，谢谢观看！！！
</div>

qzmjef 发表于 2024-10-17 04:26:05

谢谢、感谢、感恩、辛苦了、有你真好等。

j8typz 发表于 2024-11-7 03:42:49

一看到楼主的气势，我就觉得楼主同在社区里灌水。

b1gc8v 发表于 2024-11-10 18:53:20

楼主的文章非常有意义，提升了我的知识水平。

页: [1]

天涯论坛's Archiver

七小时带你入门HTML+CSS网页设计，编写网页代码的思路（三）