1、阴影
盒子阴影:box-shadow:inset h-shadow v-shadow blur-radius color;
inset表示阴影类型为内阴影
outset表示阴影类型为外阴影(不添加时默认为外阴影,但是添加后反而无效)
h-shadow表示阴影水平位移量,可以为负值
v-shadow表示阴影垂直位移量,可以为负值
blur-radius表示阴影模糊半径,即阴影向外模糊的模糊范围,值越大越模糊
文字阴影:text-shadow
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影</title>
<style>
.box {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: greenyellow;
/* box-shadow:x y blur color inset :盒子里面的阴影,默认是outset*/
box-shadow: -20px -20px 10px rgb(207, 21, 52);
}
p {
font-size: 30px;
color: pink;
/* text-shadow文字阴影*/
text-shadow: 3px 10px 4px red;
}
</style>
</head>
<body>
<div class="box"></div>
<p>
缑欣
</p>
</body>
2、列表样式
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表样式</title>
<style>
ul li {
/* 去掉默认样式 */
list-style: none;
}
ol li {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li>dsfsjfoew</li>
</ol>
</body>
3、轮廓样式
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* input {
/* outline: none; */
/* 轮廓和元素的距离 */
/* outline-offset: 20px; */
/* outline-style: dotted;
outline-color: aquamarine;
outline-width: 20px; */
/* } */
input:focus {
outline-color: blueviolet;
}
</style>
</head>
<body>
<input type="text">
</body>
4、外边距与内边距
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.box {
width: 400px;
height: 400px;
background-color: aquamarine;
/* 内边距 */
/* padding: 20px; */
/* padding-top: 30px;
padding-left: 30px; */
/* padding: 上 右边 下 左 */
padding: 30px 0 0 30px;
/* padding:40;四个方向都是内边距40 */
padding: 40px;
/* 上下 左右 */
padding: 5px 40px;
/* 外边距 */
margin-bottom: 30px;
/* margin-right: ; */
/* margin: 30px 0 30px 30px; */
}
.box1 {
width: 100px;
height: 100px;
background-color: blueviolet;
}
.box2 {
width: 400px;
height: 400px;
background-color: rgb(215, 48, 210);
/* 外边距合并:谁大听谁的 */
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
5、定位:静态定位、相对定位、绝对定位、固定定位、粘性定位
/* 静态定位*/
position: static;
/* 相对定位:相对于自身位置进行移动的 保留原先的位置*/
position: relative;
/* 绝对定位:子绝父相,父亲没有相对定位,向上继续找既有相对定位的,如果都没有,则相对浏览器进行定位,不占有原来位置*/
position: absolute;
/* 固定定位,不保留原来位置 */
position: fixed;
/* 粘性定位,滑动到一定位置不动 */
position: sticky;
6、叠放顺序:z-index:1 值越大优先级越高
7、元素的显示和隐藏
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
p {
/* 元素的隐藏 */
/* display: none;不占位置 */
/*display: block; */
/* display: inline-block; */
/* visibility: hidden;
visibility: visible; */
}
.box {
/* 元素的显示 */
width: 300px;
height: 100px;
background-color: pink;
/* overflow: visible; */
/* overflow: scroll; */
overflow: hidden;
}
</style>
</head>
<body>
<p>sdivfpksos </p>
<div class="box">
据公告,此次获得股份奖励的3名高管中,孙东旭获得的股份奖励最多,共300万股,按照4月11日收盘价计算,价值高达8700万港元。俞敏洪获得150万股、价值约4350万港元,尹强获得60万股、价值约1740万港元。 其余151名参与者均为东方甄选雇员,他们将获得合计2535.9万股股份激励,价值约7.4亿港元。平均下来,每位参与的员工将获得市值为487万港元(约合人民币427万元)的股票。
</div>
</body>
8、display
display、显示和隐藏标签值为none:隐藏,display:none;隐藏 不占位置
visibility:hidden;隐藏 区别.v隐藏后标签仍然存在,透明度为0的隐藏====opacity为0
Display:控制标签属性,转换标签的属性。默认块元素的display值为block 行内元素为inline行内标签和块标签
用a做导航栏:引出inline-block:极具有块元素的属性,又不霸道
9、文本溢出
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
width: 150px;
height: 50px;
background-color: aquamarine;
/* 强制一行显示 */
white-space: nowrap;
/* 隐藏溢出 */
overflow: hidden;
/* 加...... */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>
ajskdjsedewlkdkewjdlekdewdekd
</p>
</body>
10、css3提供的布局
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
/* flex-direction:容器项目排列方向 */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
/* 主轴对齐方式 */
/* justify-content: space-between; */
justify-content: center;
/* justify-content: space-around; */
/* justify-content: flex-end; */
/* justify-content: space-evenly; */
/* 侧轴对齐方式 */
/* align-items: flex-end; */
/* align-items: flex-start; */
align-items: center;
align-items: stretch;
width: 800px;
background-color: pink;
margin: 0 auto;
height: 400px
}
.son1,
.son2,
.son3 {
/* 均分 */
flex: 1;
background-color: blueviolet;
}
.box2 {
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
<div class="box2">4</div>
<div class="box2">4</div>
<div class="box2">4</div>
</div>
</body>
11、flex多行
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;/*换行*/
width: 1000px;
height: 500px;
margin: 0 auto;
background-color: aqua;
}
ul li {
list-style: none;
width: 155px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
作业:小米导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米官方导航栏</title>
<style>
*{
margin: 0;
padding: 0;
}
.top {
font-family: 微软雅黑;
margin: 0 auto;
background-color:black;
width: 1350px;
height: 60px;
display: flex;
justify-content: space-between;
opacity: 0.7;
position: sticky;
top: 0px;
}
.left {
margin-top: 10px;
margin-left: 50px;
}
a {
display: inline-block;
text-decoration: none;
color: white;
margin-left: 12px;
margin-right: 12px;
font-size: 15px;
margin-top: 20px;
font-weight: 900px;
}
a:hover {
color:#CB5709;
}
.right {
color: white;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="top">
<div class="left">
<img src="./1.jpg" alt="1" width="40px">
</div>
<div class="cen">
<a href="#">小米官网</a>
<a href="#">小米商城</a>
<a href="#">小米影像</a>
<a href="#">MIUI</a>
<a href="#">IoT</a>
<a href="#">云服务</a>
<a href="#">天星数科</a>
<a href="#">有品</a>
<a href="#">小爱开放平台</a>
<a href="#">企业团购</a>
</div>
<div class="right">
<a href="#">登录</a>
<span>|</span>
<a href="#">注册</a>
</div>
</div>
</body>
</html>