天涯论坛

 找回密码
 立即注册
搜索
查看: 87|回复: 3

七小时带你入门HTML+CSS网页设计,编写网页代码的思路(三)

[复制链接]

2964

主题

144

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139409
发表于 2024-7-27 22:47:27 | 显示全部楼层 |阅读模式

上一篇文案中我分享了一段图文标签,这篇文案重点大众仔细解释一下这些代码的功效道理,以及编写网页代码的格式与思路。

下面我贴上html代码:

<!--HTML--> <div> <h2>这是我的第1个网页</h2> <p>BODY标签暗示网页主体元素的容器,它包括了网页所有的html标签如:文本、照片、列表等等。以后咱们编写的网页标签都需要放在这儿面,这儿我写了一段文字,它就会在浏览器里表示出来。这些就构成为了咱们网页的基本格式,大众不需要去背,晓得暗示什么意思就行,需要的时候直接拿来用。</p> <p><img src="https://tpt360.com/tuimg/yan.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像素的宽度*/ 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标签以及实战演示,谢谢观看!!!





上一篇:杭州网站建设企业是怎么样制作网页的
下一篇:网站制作价格|网站制作多少钱科普
回复

使用道具 举报

3069

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99138952
发表于 2024-10-17 04:26:05 | 显示全部楼层
谢谢、感谢、感恩、辛苦了、有你真好等。
回复

使用道具 举报

3061

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139052
发表于 2024-11-7 03:42:49 | 显示全部楼层
一看到楼主的气势,我就觉得楼主同在社区里灌水。
回复

使用道具 举报

3047

主题

3万

回帖

9606万

积分

论坛元老

Rank: 8Rank: 8

积分
96065852
发表于 2024-11-10 18:53:20 | 显示全部楼层
楼主的文章非常有意义,提升了我的知识水平。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-22 22:59 , Processed in 0.178086 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.