导图社区网页结构01

网页结构01

"掌握网页设计的核心要素，从盒子模型到CSS样式全解析！本指南涵盖盒子模型基础、边框图片切割技巧（borderimagesource/slice/repeat）、内外边距设置（margin/padding）、圆角边框实现（borderradius），以及文本样式控制。重点讲解div标签应用、CSS选择器使用、背景属性配置，并详解边框综合设置（borderwidth/style/color）。通过清晰的属性分类和代码示例，助你快速构建标准化网页结构"！

编辑于2025-03-31 20:15:40

CSS盒子模型
边框样式属性
网页布局基础

EDvPwCZB

他的近期作品查看更多>>

网页结构01
"掌握网页设计的核心要素，从盒子模型到CSS样式全解析！本指南涵盖盒子模型基础、边框图片切割技巧（borderimagesource/slice/repeat）、内外边距设置（margin/padding）、圆角边框实现（borderradius），以及文本样式控制。重点讲解div标签应用、CSS选择器使用、背景属性配置，并详解边框综合设置（borderwidth/style/color）。通过清晰的属性分类和代码示例，助你快速构建标准化网页结构"！

网页结构01

社区模板帮助中心，点此进入>>

EDvPwCZB

他的近期作品查看更多>>

网页结构01
"掌握网页设计的核心要素，从盒子模型到CSS样式全解析！本指南涵盖盒子模型基础、边框图片切割技巧（borderimagesource/slice/repeat）、内外边距设置（margin/padding）、圆角边框实现（borderradius），以及文本样式控制。重点讲解div标签应用、CSS选择器使用、背景属性配置，并详解边框综合设置（borderwidth/style/color）。通过清晰的属性分类和代码示例，助你快速构建标准化网页结构"！

相似推荐
大纲

论语孔子简单思维导图
- 74.2k
- 827
- 1.0k
- 418
MindMaster
《傅雷家书》思维导图
- 122.0k
- 1.6k
- 2.6k
- 1.2k
MindMaster
《童年》读书笔记
- 41.8k
- 460
- 958
- 331
MindMaster
《茶馆》思维导图
- 10.2k
- 171
- 181
- 39
MindMaster
《朝花夕拾》篇目思维导图
- 22.9k
- 491
- 1.1k
- 289
MindMaster
《昆虫记》思维导图
- 28.0k
- 255
- 769
- 270
MindMaster
《安徒生童话》思维导图
- 15.2k
- 259
- 259
- 64
MindMaster
《鲁滨逊漂流记》读书笔记
- 19.0k
- 289
- 544
- 163
MindMaster
《这样读书就够了》读书笔记
- 93.2k
- 12.2k
- 8.9k
- 2.2k
Ethan
妈妈必读：一张0-1岁孩子认知发展的精确时间表
- 7.7k
- 1.6k
- 396
- 42
Ethan

网页结构01

标签

样式

注释标签

双标签

<标签名>内容</标签名>

单标签

< 标签名/ >

基本格式

<!DOCTYPE>

<html >

<head >

<body>

文本控制标签

段落文本

align：设置水平线的对齐方式可选择left，right、 center

size：设置水平线的粗细

color：设置水平线的颜色

width：设置水平线的宽度

换行标签

文本样式标签

文本内容

face

设置文字的字体

size

设置文字的大小

color

设置文字的颜色

文本格式化标签

粗体

和

斜体

和

删除线

下划线

和 <ins></ins>

下划线

和 <ins></ins>

上标

下标

预格式化标签<pre>

图像标签

img src ="图像URL" / >

src：图像的路径

alt：图像不能显示时的替换文本

title：鼠标悬停时显示的内容

align

left 将图像对齐到左边

right 将图像对齐到右边

top 将图像的顶端和文本的第一行文字对齐，其他文字居图像下方

middle 将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方

bottom 将图像的底部和文本的第一行文字对齐，其他文字居图像下方

路径

绝对路径

带有盘符的路径

相对路径

不带有盘符，通常是以HTML 网页文件为起点，通过层级关系描述目标图像的位置。

CSS

引入CSS样式表

行内式

<标签名（p） style="属性1:属性值1"> 内容 </标签名>

内嵌式

CSS代码集中写在<head >头部标签

内嵌式CSS样式只对当前页面有效

链入式

CSS选择器

基础选择器

标签选择器

p{ font-size:12px; color:red; font-family:"微软雅黑";}

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名

.类名{属性1:属性值1; 属性2:属性值2;}

id选择器

使用“#”进行标识，后面紧跟id名 :#id名{属性1:属性值1; 属性2:属性值2;}

通配符选择器

“*”号表示，它是所有选择器中作用范围最广的

* { margin: 0; /* 定义外边距*/ padding: 0; /* 定义内边距*/ }

新增选择器

属性选择器

div [id^ =section] 表示匹配包含id属性，且id属性值是以“section”字符串开头的 div标签。

div [id$ =section] 表示匹配包含id属性，且id属性值是以“section”字符串结尾的 div标签。

div [id*=section] 表示匹配包含id属性，且id属性值包含“section”字符串的div 标签。

关系选择器

子代选择器 h1 > strong 表示选择嵌套在h1标签的子标签strong。

临近兄弟选择器 h2+p 表示选择h2标签后紧邻的第一个兄弟标签p。

普通兄弟选择器 p~h2 表示选择p标签所有的h2兄弟标签。

结构化伪类选择器

伪元素选择器:标签后面紧跟英文冒号“:” ，英文冒号后是伪元素名。

p:before 表示在p标签的内容前面插入内容

p:after 表示在p标签的内容后面插入内容

CSS文本样式

ont-size属性用于设置字号，

font-family属性用于设置字体

ont-weight属性用于定义字体的粗细

font-style属性用于定义字体风格

normal ：默认值

italic：浏览器会显示斜体的字体样

oblique：浏览器会显示倾斜

p{ font:italic bold 30px/40px Arial,"宋体" ;}

word-wrap属性用于实现长单词和URL地址的自动换行。

文本外观属性

color属性用于定义文本的颜色

letter-spacing属性用于定义字间距， word-spacing属性用于定义英文单词之间的间距

line-height属性用于设置行高，即字符的垂直间距。

text-decoration: none：没有装饰（正常文本默认值） underline：下划线 overline：上划线 ine-through ：删除线

text-align属性用于设置文本内容水平对齐

text-indent属性用于设置首行文本的缩进。em作为设置单位。

设置省略标签

为包含文本的对象定义宽度。应用“white-space:nowrap;”样式强制文本不能换行。应用“overflow:hidden;”样式隐藏溢出文本。应用“text-overflow:ellipsis;”样式显示省略标签。

盒子模型概述

<div>标签

边框属性——border

边框宽度 border-width:上边 [右边下边左边]; 像素值,none ，则不论宽度设置为多少都无效。

边框样式 border-style: 上下左右上下左右上左右下上右下左 none无（默认）、 solid单实线、 dashed虚线、 dotted点线、 double双实线，

边框颜色 border-color:上边 [右边下边左边]; 颜色值、 #十六进制、 rgb(r,g,b)、 rgb(r%,g%,b%)

综合设置边框 border:四边宽度四边样式四边颜色;

圆角边框 border-radius:水平半径参数/垂直半径参数; 像素值或百分比

边距属性

内边距（ padding）

padding-top:上边距; padding-right:右边距; padding-bottom:下边距 padding-left:左边距; padding：四边内边距;

外边距（margin）

圆角边距（border-radius）

边框图片（border-image）

border-image-source: 边框图片的来源 • border-image-slice: 定义如何切割图片 • border-image-width: 定义图片的显示宽度，默认与边框宽度相同 • border-image-outset: 控制边框向外扩展的距离 • border-image-repeat:定义图片如何平铺（仅在切割后生效）

box

阴影——（box-shadow）

h-shadow 元素水平阴影位置，可以为负值（必选属性）

v-shadow 元素垂直阴影位置，可以为负值（必选属性）

blur 阴影模糊半径（可选属性）

spread 阴影扩展半径，不能为负值（可选属性）。

color 阴影颜色（可选属性）

内阴影（inset）/外阴影（默认）（可选属性）

box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，

盒子

背景属性

背景颜色

ackground-color的默认值为transparent ，即背景透明

背景图像background-image :url(地址)

背景图像平铺background-repea

repeat 沿水平和竖直两个方向平铺（默认值）

no-repeat 不平铺（图像位于元素的左上角，只显示一次）

repeat-x 只沿水平方向平铺

repeat-y 只沿竖直方向平铺