CSS

前端三要素html(结构)+css（样式）+javascript（行为）
什么是CSS
如何学习：

CSS是shenme
CSS怎么用
** CSS 选择器（重点+难点）**
美化网页（文字，阴影，超链接，列表，渐变...)
盒子模型
浮动
定位
网页动画（特效）

1 什么是CSS

1.1 CSS 简介

Cascading Style Sheet 层叠级联样式表
字体，颜色，边距，宽度，高度，背景图片，网页定位，网页浮动
打开网页开发者工具，左侧是html，右侧是对应的css样式设置

1.2 发展史

CSS1.0
CSS2.0 DIV+CSS,提出HTML和CSS分离
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画... 浏览器兼容性

1.3 快速入门

在别的网页上审查元素，仿写

css和html写在同一个文件中，使用style标签

<!DOCTYPE html>
<html lang ="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	
	<!--规范<style>可以编写css的代码，每个声明最好用分号结尾
	语法：
		选择器{
			声明1；
			声明2；
			声明3；
		}
	-->
	<style>
		h1{
			color:red;
		}
	</style>
</head>
<body>
	<h1>我是标题</h1>
</body>
</html>

css写成单独的文件通过link引入到html文件中，写在head标签内

  <!-- rel定义当前文档与被链接文档之间的关系relationship-->
  <link rel="stylesheet" href="css/style.css">

css优势
1.内容和样式分离

网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利用SEO（搜索引擎优化），容易被搜索引擎收录

1.4 CSS的三种导入方式

行内样式

	<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
	<h1 style="color: red" > 我是标题</h1>

内部样式
在html头部加style标签
外部样式
单独的css文件，里面直接是选择器设置
** 根据就近原则排优先级，判断三种样式到底哪个生效**
扩展外部样式两种写法：
- link标签，属于html标签
- 导入式 css2.0特有的（不建议使用，先展开结构再渲染），必须在style标签里写
```
  <style>
    @import url("css/style.css");
  </style>
```

2. 选择器

作用：选择页面上的某一个或者某一类元素

2.1 基本选择器

1.标签选择器:选择一类标签，"标签{}"
2.类选择器 class: 选择所有class属性一直的标签，跨标签， ".类名{}"
3. id 选择器：全局唯一！"#id{}"
优先级：id>类选择器>标签选择器

<head>
	<meta charset="UTF-8">
	<title>css</title>
	
	<style>
	/* 选择器的优先级按精准程度划分
		id选择器>类选择器（程序员手动分类的更精准）>标签选择器
	*/
		/*标签选择器会选择到页面上所有的这个标签的元素*/
		h1{
			color:#a13d30;
			background:#3cbda6;
			border-radius:24px;
		}
		p{
			font-size:80px;
		}
		/*类选择器的格式.class名称{}
		  好处：可以多个标签归类，是同一个class,可以复用*/
		.main{
			color:red;
		}
		.sub{
			color:blue;
		}
		/* id 选择器语法,id必须保证全局唯一
			#id名称{}
		*/
		#number1{
			color: #ff008a;
		}
	</style>
	
</head>
<body>
<h1>学JAVA</h1>
<h1>开始</h1>
<p>加油</p>

<h1 class="main">标题1</h1>
<h1 class="sub">标题2</h1>
<h1>标题3</h1>

<h1 id = number1>标题一</h1>
<h1 id = number2 >标题二</h1>
<h1>标题三</h1>
</body>

2.2 层次选择器

1.后代选择器：在某个元素A的后面的所有元素B "选择器A 选择器B{}" 中间空格

		body p{
			background: red;
		}

2.子选择器, 只选择后面的一代,儿子"选择器A>选择器B{}" 中间大于号

	body>p{
		background: #3cbda6;
	}

3.相邻兄弟选择器，选择的是它下面那个（仅一个）兄弟，"选择器A+选择器B" 中间用加号连接

	.active+p{
		background: pink;
	}

4.通用选择器,选中向下的所有符合条件的兄弟元素 "选择器A~选择器B" 中间波浪号连接

	/* 通用选择器,当前选中元素向下的所有兄弟元素 */
	.active~p{
		background:yellow;
	}

2.3 结构伪类选择器

伪类：相当于条件

<DOCTYPE html>
<html lang ="en>
<head>
	<meta charset="UTF-8">
	<titile> Titile </titile>
	
	<style>
		/*ul的第一个子元素*/
		ul li:first-child{
			background:#02ff00;
			
		}
		/*ul的最后一个子元素*/
		ul li:last-child{
			background:#ff4832;
		}
		
		/* 选中p1:定位到父元素，选择当前的第一个元素
		选择当前p元素的父级元素，选中父级元素的第一个元素，
		并且第一个是当前类型的元素才生效，按顺序*/
		p:nth-child(1){
			background:blue;
		}
		/*选中父元素的第二个p元素，按类型*/
		p:nth-of-type(2){
			background:green;
		}
		/*鼠标悬浮效果*/
		a:hover{
			background:yellow
		}

	</style>
</head>
<body>
	<p> p1 </p>
	<p> p2 </p>
	<p> p3 </p>
	<ul>
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
	</ul>
	<a href = " ">23 23</a>
</body>
</html>

2.4 属性选择器（常用）

属性选择器，把标签，id，类选择器结合，同时使用，还可以对属性值做正则限制

=绝对等于
^=以什么开头
$=以什么结尾
*=包含

<!DOCTYPE html>
<DOCTYPE html>
<html lang ="en>
<head>
	<meta charset="UTF-8">
	<style>
		.demo a{
			float:left;
			display:block;
			height:50px;
			width:50px;
			border-radius:10px;
			background:#2700ff;
			text-align:center;
			color:gainsboro;
			text-decoration:none;
			margin-right:5px;
			/*字体大小，行高,行高可以是内部元素垂直居中*/
			font:bold 20px/50px Arial;
		}
		/*存在id属性的元素,标签选择器[]方括号里为属性
		a[id]{
			background:yellow;
		}
		*/
		/* [属性名=属性值],属性值可以用正则*/
		/* id等于first的元素
		a[id="first"]{
			background:green;
		}
		*/
		
		/*等号=绝对等于，
		*=包含
		^=以什么开头
		$=以什么结尾
		*/
		/* class中有links的元素*/
		a[class*="links"]{
			background:pink;
		}
		
		/* 选中href中以http开头的元素*/
		a[href ^= "http"]{
			background:grey;
		}
		/* 选中以pdf结尾*/
		a[href $="pdf"]{
			background:yellow;
		}
		
	</style>
</head>
<body>
	<p class="demo">
		<a href="http:www.baidu.com" class="links item first" id="first">1</a>
		<a href="" class="links item active" target="_blank" title="test">2</a>
		<a href="imges/123.html" class="links item" >3</a>
		<a href="imges/123.png" class="links item" >4</a>
		<a href="imges/123.jpg" class="links item" >5</a>
		<a href="abc" >6</a>
		<a href="/a.pdf" >7</a>
		<a href="/abc.pdf" >8</a>
		<a href="abc.doc" >9</a>
		<a href="abcd.doc class="links item last" >10</a>
	</p>
	
</body>
</html>

3. 网页美化

3.1 为什么要美化网页

有效的传递页面信息
提高用户体验，吸引用户
例span 标签，重点要突出的字用span标签，突出Java字

<DOCTYPE html>
<html lang ="en>
<head>
	<meta charset="UTF-8">
	<title> Titile </title>
	<style>
		#title1{
			font-size:50px;
		}
	</style>
</head>
<body>
	欢迎学习<span  id="title1">Java</span>
	
</body>
</html>

3.2 字体样式

字体，粗细，斜体，字体大小

<!DOCTYPE html>
<html lang ="en">
<head>
	<meta charset="UTF-8">
	<title>页面结构分析</title>
	<!--
		font-family: 字体
		font-size:大小
		font-weight:粗细
		color:颜色
		font-style:oblique斜体
	-->
	<style>
		body{
			/*可以设置两种字体，一种针对英文，一种针对中文*/
			font-family:"Arial Black",楷体;
			color:#a13d30;
			}
		h1{
			/*px像素，em当前文本一个个字体尺寸*/
			font-size:50px;
	
		}
		.p1{
			font-weight:bold;
		}
	<!--通常设置字体的时候整合在一行设置，不分开写--
		font: oblique bolder 12px "楷体"
	-->
	</style>
	
	
</head>
<body>
	<h1>平凡的世界</h1>
	<p>《平凡的世界》是中国作家路遥创作的一部全景式地表现中国
	当代城乡社会生活的百万字长篇小说。全书共三部。1986年12月首次出版
	</p>
	<p class= p1>
	该书以中国70年代中期到80年代中期十年间为背景，通过复杂的矛盾纠葛，
	以孙少安和孙少平两兄弟为中心，刻画了当时社会各阶层众多普通人的形象；
	劳动与爱情、挫折与追求、痛苦与欢乐、日常生活与巨大社会冲突纷繁地交
	织在一起，深刻地展示了普通人在大时代历史进程中所走过的艰难曲折的道路
	</p>
	
	<p>
	“Some of us get dipped in flat, some in satin, some in gloss.... 
	But every once in a while you find someone who's iridescent,
	and when you do, nothing will ever compare
	</p>
</body>
</html>

3.3 文本样式

颜色 color rgb rgba
文本对齐方式 text-align=center
首行缩进 text-indent:2em
行高 line-height:"line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部"
用来文字居中
装饰下划线 text-decoration
文本图片水平对齐： vertical-align:middle

<!DOCTYPE html>
<html lang ="en">
<head>
	<meta charset="UTF-8">
	<title>文本样式</title>
	
	<!--
	颜色：
		单词
		#RGB值（000000黑色，FFFFFF白色,FF0000红色）#a13d30
		#RGBA，A表示透明度取值范围0-1 rgba{红，绿，蓝，透明度}
	text-align:
		对齐方式center,right,left
	text-indent: 
	line-height行高：
	height块高度：
		行高line-height和块的高度height一致，就可以上下居中
	vertical-align:
		对齐有参照物，两个元素对齐，给文字加span形成块
		实现的效果是水平上高度一致
	-->
	<style>
		h1{
			color: rgba(0,255,255,0.9);
			text-align:center;
		}
		.p1{
			text-indent:2em;
		}
		.p3{
			background:blue;
			height:300px;
			line-height:300px;
		}
		.l1{
			text-decoration:underline;
		}
		.l2{
			text-decoration:overline;
		}
		.l3{
			text-decoration:line-through;
		}
		/*对齐*/
		img,span{
			vertical-align:middle;
		}
		/*去掉a标签的下划线*/
		a{
			text-decoration:none;
		}
	</style>
</head>
<body>
	<p class="l1">1232323</p>
	<p class="l2">23243435</p>
	<p class="l3">3498380d</p>
	<a href="">a tag</a>
	<h1>平凡的世界</h1>
	<p>《平凡的世界》是中国作家路遥创作的一部全景式地表现中国
	当代城乡社会生活的百万字长篇小说。全书共三部。1986年12月首次出版
	</p>
	<p class= p1>
	该书以中国70年代中期到80年代中期十年间为背景，通过复杂的矛盾纠葛，
	以孙少安和孙少平两兄弟为中心，刻画了当时社会各阶层众多普通人的形象；
	劳动与爱情、挫折与追求、痛苦与欢乐、日常生活与巨大社会冲突纷繁地交
	织在一起，深刻地展示了普通人在大时代历史进程中所走过的艰难曲折的道路
	</p>
	
	<p class=p3>
	“Some of us get dipped in flat, some in satin, some in gloss.... 
	But every once in a while you find someone who's iridescent,
	and when you do, nothing will ever compare
	</p>
	
	<p class=p4>
		<img src=
"https://img2020.cnblogs.com/blog/2278103/202106/2278103-20210610091501515-484678755.png"
		alt="">
		<span>天朗气清，心情愉悦,伴着晨辉奔跑.在溪畔，在路边，在山间。
		每个地方留下你的汗水，承载你的喜悦。
		</span>
	</p>

</body>
</html>

3.4 文本阴影和超链接伪类

a:hover 鼠标悬浮效果
a:active 鼠标点击效果
a:visited 鼠标点击过后的效果
text-shadow:阴影的颜色，阴影x,y坐标，阴影半径*

<!DOCTYPE html>
<html lang ="en">
<head>
	<meta charset="UTF-8">
	<title>文本结构和超链接伪类</title>
	<style>
		/*默认的颜色*/
		a{
			text-decoration:none;
			color:#000000;
		}
		/* 鼠标悬浮的颜色*/
		a:hover{
			color:orange;
			font-size:50px;
		}
		/* 鼠标按住未释放的效果*/
		a:active{
			color:green;
		}
		/*浏览过的特效*/
		a:visited{
			color:#ff008a;
		}	
		/*text-shadow:阴影的颜色，阴影x,y坐标，阴影半径*、
		#price{
			text-shadow:#3cc7f5 10px 10px 10px
		}
	</style>
</head>
<body>
<a href="#">
	<img src ="1.jpg" alt="" width="10%">
</a>
<p>
	<a href="#">码出高效：Java开发手册 </a>
</p>
<p>
	<a href="">作者：孤尽老师</a>
</p
<p id="price">
	￥99
</p>
</body>
</html>

3.5 列表

ul li里的list-style:

none去掉圆点
circle空心圆
decimal数字
square正方形

<!DOCTYPE html>
<html lang ="en">
<head>
	<meta charset="UTF-8">
	<title>列表</title>
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--写的是导航栏，不会让它占据整个篇幅
	一般不会使用<nav>标签，而是使用div,id通常标注为nav
-->
<div id="nav">
<h2 class="title">全部商品分类</h2>

<ul>
	<li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>
		&nbsp;&nbsp;<a href="#">数字商品</a>
	</li>
	<li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">收集</a>
		&nbsp;&nbsp;<a href="#">数码</a>
	</li>
	<li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
	<li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>
		&nbsp;&nbsp;<a href="#">厨具</a>
	</li>
	<li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</li>
	<li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>
			&nbsp;&nbsp;<a href="#">珠宝</a>
	</li>
	<li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</li>
	<li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;
		<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a>
	</li>
</ul>
</div>
</body>
</html>

style.css

/*css代码建议从页面外面写到里面有顺序的写*/
#nav{
	/*调试大小可以在浏览器中审查元素，在线更改调试*/
	width:300px;
	background:#a0a0a0;
}
.title{
	font-size:18px;
	font-weight:bold;
	text-indent:1em;
	line-height:35px;
	background:red;
}
/*
ul{
	
}
*/
/*
list-style:
	none去掉圆点
	circle空心圆
	decimal数字
	square正方形
*/
ul li{
	height:30px;
	list-style:none;
	text-indent:1em;
	
}
a{
	text-decoration:none;
	font-size:14px;
	color:#000;

}
a:hover{
	color:orange;
	text-decoration:underline;
}

展示效果

3.6 背景图像应用及渐变

3.6.1 背景颜色 background:颜色

3.6.2 背景图片

div{
	width:1000px;
	height: 700px;
	border: 1px solid red;
	/*默认是全部平铺的,图片小就x,y都重复拼起来*/
	background-image:url(running.jpg);
}
.div1{
	background-repeat:repeat-x;
}
.div2{
	background-repeat:repeat-y;
}
/*不平铺*/
.div3{
	background-repeat:no-repeat;
}

例：给导航栏加向下箭头，向右箭头

/*颜色，图片路径，图片位置，平铺方式*/
background:red url("d.jpg") 270px 10px no-repeat;
/*或者下面这种写法*/
background-image:url("r.jpg");
background-repeat:no-repeat;
background-position: 236px 2px;

3.63 渐变

body{
	background-image: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);
}

查看渐变色的网址，该项目为github开源项目
https://www.grabient.com/

4. 盒子模型

4.1 什么是盒子

margin:外边距
padding:内边距
border:边框,盒子的边框，往里面到内容的距离是内编剧，往外面到其他空件或者页边的距离是margin
盒子的计算方式：你这个元素到底多少？
margin+border+padding+内容宽度

4.2 边框

边框的粗细
边框的样式
边框的颜色

border:1px solid red;
border:2px dashed #4d0b8c;

4.3 内外边距

当为0时，可以省略单位*/

/*上下左右都为0*/
margin:0;
/*上下0左右自动剧中*/
margin:0 auto;

/* top,right,bottom,left顺时针*/
margin:10px, 11px, 12px,13px;

div：nth-of-type(1){
  padding:10px 2px;
}

4.4 圆角

div{
width:100px;
height:100px;
border:solid red;
/* 4个参数顺时针，参数是半径,
基于盒子边框+内容的大小调整半径可以把图形改成任意形状*/
border-radius:51.5px 51.5px 51.5px 51.5px;
}

4.5 阴影

/*坐标，透明度，阴影颜色*/
box-shadow:10px 10px 100px yellow;

做前端模仿学习别人的网站写法：

打开网页，另存为，下载了源码。打开文件夹模仿修改
源码之家网站，搜索登录页面
替换图片，修改细节
图片调整像素大小，用paint打开图片，resize看原始图片的像素大小来
写后台管理系统，搜索后台管理系统（/门户网站）模板之家模板之家网站
前端比较好看的 layui,vue-elment-admiin,飞冰 https://ice.work/阿里的组件

5. display和浮动

5.1 标准文档流

不布局的情况，html展示自动按照从上到下分配元素

块级元素：独占一行
h1-h6,p,div,列表
行内元素
span, a, img,strong(强调文本)
行内元素可以被包含在块级元素里面，反之不可以

5.2 display

默认span是inline的，默认div是block

/*   block块元素
inline-block 行内块，不独占一行
inline 变为行内元素
none 不在展示,消失了
*/
div{
	width:100px;
	height:100px;
	border:1px solid red;
	display:none;
}
span{
	width:100px;
	height:100px;
	border:1px solid red;
	display:inline-block;
}

例 QQmenu栏是通过ul li来写的display的时候设置成inlin-block成为一行内的块元素
display也是一种实现行内元素排类的方式，但是我们很多情况都使用float.
float是飘起来的不受文档流限制

5.3 float

左右浮动
float:right;
float:left;

5.4 父级边框塌陷问题

clear：right清除右侧浮动元素,如果右侧有浮动元素，那就排到下面去
clear:left 同理清除左侧浮动元素
clear:both两侧都进行清除
clear：none 没有清除效果

当父级元素不设置高度，高度由内容自适应获得，此时如果子级元素全部设置成浮动，则父级元素高度变成0塌陷
但此时父级边框仍旧没把块包起来，解决父级边框塌陷的方法方法：

增加父级边框高度height:1000px（low不建议）
增加空的div标签，clear:both,这样空的div就会排在最后一行将父级边框撑起来
注意有时空div会被浏览器忽略，检查元素时发现并没有这个div元素，可以在div里加空格&nbsp

<div id="father">
	<div class="layer01"><img src="images/1.jpg" alt=""></div>
	<div class="layer02"><img src="images/2.jpg" alt=""></div>
	<div class="layer03"><img src="images/3.jpg" alt=""></div>	
	<div class= "layer04">
		浮动的盒子可以向左浮动，也可以向右浮动，知道它的我i边缘碰到包含
	</div>
        <!--增加空div-->
	<div class="clear">&nbsp</div>
</div>

对应css设置

div{
	margin:10px;
	padding:5px;
}
#father{
	border:1px black solid;
	/*height:1000px*/
}
.layer01{
	border: 1px #F00 dashed;
	disply:inline-block;
	float:left;
}
.layer02{
	border: 1px #00F dashed;
	disply:inline-block;
	float:left;
}
.layer03{
	border: 1px #060 dashed;
	disply:inline-block;
	float:right;
}
/*
clear：right清除右侧浮动元素,如果右侧有浮动元素，那就排到下面去
clear:left 同理清除左侧浮动元素
clear:both两侧都进行清除
clear：none 没有清除效果
*/
.layer04{
	border: 1px #666 dashed;
	font-size:12
	disply:inline-block;
	float:right;
	clear:both;
}
/*空div清除浮动*/
.clear{
	clear:both;
	margin:0;
	padding:0;
}

overflow消除浮动
在父级元素增加一个overflow: hidden,因为父级元素不设置元素

#father{
	border:1px black solid;
	/*height:1000px*/
	overflow:hidden;
}

扩展： overflow当父级元素设置高度时，可以取值(hidden,scroll,auto )
hidden表示修剪掉（隐藏）溢出的部分，scroll加滚动条，auto自适应，在需要的时候才加滚动条

父类添加一个伪类:after （推荐，为了设置格式写在css里，不和html掺和在一起）

#father:after{
	/*在父级元素后面添加内容为空的元素*/
	content:''; 
	/*将该元素变为块元素*/
	display:block;
	/*清除块元素两边的浮动*/
	clear:both;
}

小结：

设置父元素高度
简单，元素有了固定的高度，高度会被限制
浮动元素后面增加空的div
简单，代码中尽量避免使用空的div
overflow:hidden
简单，但是下拉的场景避免使用，会切除了部分
父类添加一个伪类:after(推荐)
写法微复杂，但是没有副作用，推荐

5.5 display和float对比

display
方向不可以控制
float
浮动起来的话脱离标准文档流，所以要解决父级边框塌陷的问题

6.定位

6.1 相对定位

position:relative;
相对原来的位置进行指定的偏移,偏移是在上下左右指定方向上加减像素值。
相对定位，它仍然在标准文档流中，原来的位置会保留。
top:-20px;
left:10px;
right；-10px;
bottom:30px;

<DOCTYPE html>
<html lang ="en>
<head>
	<meta charset="UTF-8">
	<title> Titile </title>
	<!--相对定位position:relative 
		相对于自己原来的位置进行偏移
		top,left,right,bottom距离四个边的距离
		-->
	<style>
	body{
		padding:20px;
	}
	div{
		margin:10px;
		padding:5px;
		font-size:12px;
		line-height:25px;
	}
	#father{
		border:1px solid #666;
		padding:0px;
	}
	#first{
		background-color:#a13d30;
		border:1px dashed #b27530;
		position:relative;
		/* 元素原来的位置top方向减20个像素*/
		top:-20px;
		/* 元素左边的位置加20个像素*/
		left:20px;
	}
	#second{
		background-color:#255099;
		border:1px solid #255066;

	}
	#third{
		background-color:#1c6699;
		border:1px solid #1c6615;
		position:relative;
		bottom:20px;
		
	}
	</style>
</head>
<body>
<div id = "father">
	<div id="first">第一个盒子</div>
	<div id="second">第二个盒子</div>
	<div id="third">第三个盒子</div>
</div>
	
</body>
</html>

练习题

<DOCTYPE html>
<html lang ="en>
<head>
	<meta charset="UTF-8">
	<title> Titile </title>
	<style>
	#box{
		border:solid red 1px;
		width:300px;
		height:300px;
		paddnig:10px;
	}
	a{
		background-color:pink;
		width:100px;
		height:100px;
		text-decoration:none;
		/* line-height=height使其居中*/
		line-height:100px;
		text-align:center;
		color:white;
		/*变成块元素了，独占一行*/
		display:block;
	}
	a:hover{
		background-color:blue;
	}
	#link1{
		position:relative;
		
	}
	#link2,#link4{
		position:relative;
		top:-100px;
		left:200px;
	
	}

	#link4{
		position:relative;
		top:-100px;
	}
	#link5{
		position:relative;
		top:-300px;
		left:100px;
	}
	</style>
</head>
<body>
	<div id="box">
	<a id="link1" href="#">链接1</a>
	<a id="link2" href="#">链接2</a>
	<a id="link3" href="#">链接3</a>
	<a id="link4" href="#">链接4</a>
	<a id="link5" href="#">链接5</a>
	</div>
	
</body>
</html>

前端不难，但是要不停的仿别人的图来练习

6.2 绝对定位

1.没有父级元素定位的前提下，是相对于浏览器定位的
2.假设父级元素存在定位，相对父级元素进行偏移
3.在父级范围内移动
绝对定位：相对父级元素或者浏览器进行指定的偏移，定位后它不在标准文档流中，原来的位置不会被保留
例:第二个盒子进行绝对定位，然后原来位置不会由空白占据

<html lang ="en>
<head>
	<meta charset="UTF-8">
	<title> Titile </title>
	<!--相对定位position:relative 
		相对于自己原来的位置进行偏移
		top,left,right,bottom距离四个边的距离
		-->
	<style>
	body{
		padding:20px;
	}
	div{
		margin:10px;
		padding:5px;
		font-size:12px;
		line-height:25px;
	}
	#father{
		border:1px solid #666;
		padding:0px;
		position:relative;
	}
	#first{
		background-color:#a13d30;
		border:1px dashed #b27530;
	}
	#second{
		background-color:#255099;
		border:1px solid #255066;
		position:absolute;
		right:30px;
		top:-10px;
	}
	#third{
		background-color:#1c6699;
		border:1px solid #1c6615;

	}
	</style>
</head>
<body>
<div id = "father">
	<div id="first">第一个盒子</div>
	<div id="second">第二个盒子</div>
	<div id="third">第三个盒子</div>
</div>
	
</body>
</html>

6.3 固定定位

不论怎样滑动页面，该块的位置固定不动，应用场景如导航栏，回到页面顶端等按钮

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		body{
			height:1000px;
		}
		/*绝对定位，此处相对浏览器*/
		div:nth-of-type(1){
			width:100px;
			height:100px;
			background:red;
			position:absolute;
			right:0;
			bottom:0;
		}
		/*fixed固定定位，应用如导航栏*/
		div:nth-of-type(2){
			width:50px;
			height:50px;
			background:yellow;
			position:fixed;
			right:0;
			bottom:0;
		}
	</style>

</head>
	<body>
		<div>div1</div>
		<div>div2</div>
	</body>
</html>

6.4 z-index

图层的概念
z-index:默认是0，最高无穷。结合定位使用来实现堆叠的效果

实现这种在图片+背景+上加字多层堆叠的效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="stytle1.css">
</head>
<body>
<div id="content">
	<ul>
		<li><img src ="bg.jpg" alt=""></li>
		<li class = "tipText">学习微服务</li>
		<li class = "tipBg"></li>
		<li >时间：2031-6-7</li>
		<li >地点：生命一号基地</li>
	</ul>
</div>

</body>
</html>

对应css

#content{
	width:380px;
	padding: 0px;
	margin: 0px;
	overflow:hidden;
	font-size:12px;
	line-height:25px;
	border:1px #000 solid;
}
ul,li{
	padding: 0px;
	margin: 0px;
	list-style:none;
}
/*父级ul设置为相对定位*/
#content ul{
	position:relative;
}
.tipText, .tipBg{
	position:absolute;
	width:300px;
	height:25px;
	top:300px;
}
.tipBg{
	background:red;
	/*背景透明度,透明了也可一把下面一层文字显示出来*/
	opacity:0.5;
}
.tipText{
	color:yellow;
	/*z-index表示处在第几层，999基本上就是顶层了*/
	z-index:999;
}

扩展：opacity:0.5 调整背景透明度

7. 动画及视野拓展

css3有动画，一般javascript，canvas
（总结思维导图待补）

posted @ 2021-06-17 17:14 晒网达人阅读(49) 评论(0) 编辑收藏举报

刷新页面返回顶部