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