p1
p2
p3
- li1
- li2
- li3
- 结果图
[](()3.5属性选择器（常用）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
- 代码示例
Title - 结果展示
[](()四、美化网页元素
=======================================================================
[](()4.1为什么要美化网页
-
有效的传递页面信息
-
美化网页，页面漂亮，才能吸引用户
-
凸显页面主题
-
提高用户体验
span标签：重点要突出的字，使用span标签括起来
Title 欢迎学习Java
[](()4.2字体样式
[](()4.3文本样式
-
颜色 color rgb rgba
-
文本对齐的方式 text-align=center
-
首行缩进 text-indent:2em
-
行高 line-height: 单行文字上下居中
-
装饰 text-decoration:
-
文本图片水平对齐：vertical-align：middle
Title 123456
123456
123456
故事介绍
天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；
而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。
太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。
然而阴差阳错，灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王，这调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。
然而面对众人对哪吒的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔，他将何去何从
哪吒之魔童降世
- 结果图展示
[](()4.4阴影
/text-shadow:水平偏移，垂直偏移，阴影半径，阴影颜色/
#price{
text-shadow: 10px 10px 2px grey;
}
[](()4.5超链接伪类
/* 未访问的链接 */
a:link {
color: #85e9ff;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
[](()4.6列表
/ul li/
/*
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
[](()4.7背景
-
背景颜色 background-color
-
背景图片 background-image
[](()4.8渐变
推荐一个网站：[Grabient](()
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
[](()五、盒子模型
=====================================================================
[](()5.1什么是盒子模型
- margin:外边距
[W3School-外边距](()
- padding：内边距
[W3School-内边距](()
- border：边框
[W3School-边框](()
- 盒子的计算方式：你这个元素到底多大？
margin+border+padding+内容宽度
[](()5.2边框
-
边框的粗细
-
边框的样式 border-style
-
边框的颜色 border-color
[W3School-CSS边框颜色](()
[](()5.3圆角边框
[W3School-CSS圆角](()
Title [](()5.4阴影
[W3School-CSS阴影](()
[](()六、浮动
===================================================================
块级元素：独占一行
h1~h6 p div 列表…
行内元素：不独占一行
span a img strong…
行内元素 可以被包含在块级元素中，反之，则不可以。
- display
Title div块元素span行内元素
- 浮动(float)
float 属性
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
- float 属性可以设置以下值之一：
left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值
父级边框塌陷的问题
- clear
none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值
- 解决方案：
1、增加父级元素的高度(简单，元素假设有了固定的高度，就会被限制)
2、浮动元素后面增加一个空的div标签，清除浮动（简单，代码中尽量避免空div）
.clear{
clear:both;
margin:0;
padding:0;
}
3、overflow（简单，下拉的一些场景避免使用）
在父级元素中增加一个 overflow：hidden;
4、父类添加一个伪类 ：after（推荐使用）
#father:after{
content:‘’;
display:block;
clear:both;
}
[](()七、定位
===================================================================
[](()7.1相对定位
Title 第一个盒子第二个盒子第三个盒子相对定位：position:relative;
相对于原来的位置，进行指定的偏移
相对定位的话，它任然在标准文档流中，原来的位置会被保留
top:-20px;
left:20px;
bottom:-10px;
right:20px;
[](()7.2绝对定位
定位：基于某一个东西进行定位，上下左右，
-
没有父级元素定位的前提下，相对于浏览器定位
-
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
-
在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移
绝对定位的话，它任然在标准文档流中，原来的位置不会被保留
[](()7.3固定定位 fixed
Title
1536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
