css - 210205 - 01
CSS美化
- 背景
- 渐变
- 盒子模型
- 圆角边框
- 盒子阴影
- 浮动
背景
-
背景颜色
background
-
背景图片
![](https://www.hualigs.cn/image/60aa31f0c0d3f.jpg)
渐变
一个css网站,里面有很过css样式:https://www.grabient.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变</title>
<style>
div{
height: 500px;
}
#div1{
background-color: #0093E9;
background-image: linear-gradient(206deg, #0093E9 0%, #80D0C7 100%);
}
#div2{
/*background-color: #FBAB7E;*/
background: linear-gradient(135deg, #FBAB7E 0%, #F7CE68 100%);
}
</style>
</head>
<body>
<div id="div1">白光一</div>
<div id="div2">白光一</div>
</body>
</html>
盒子模型
- margin 外边距
- padding 内边距
- border 边框
盒子计算:margin + border + padding + 内容宽度
border
- 边框粗细
- 边框大小
- 边框颜色
h1-h6,ul,li,a,body 等都会有默认边距
![](https://www.hualigs.cn/image/60aa3221b7f29.jpg)
margin
margin:0 上下左右都是0
margin:0 1px 上下0,左右1px
margin:0 1px 2px 3px 上0,右1px,下2px,左3px
margin:0 auto 居中
margin-top:
margin-bottom:
margin-right:
margin-left:
圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角</title>
<!-- border-radius:0px 全部-->
<!-- border-radius:10px 10px 10px 10px 左上,右上,右下,左下(顺时针来的)10px-->
<style>
.div1{
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50px;
}
.div2{
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 0px 10px 20px 50px;
}
.div3{
width: 100px;
height: 50px;
background-color: red;
border: 1px solid red;
border-radius: 50px 50px 0 0;
}
.div4{
width: 50px;
height: 100px;
background-color: red;
border: 1px solid red;
border-radius: 50px 0 0 50px;
}
.div5{
width: 50px;
height: 100px;
background-color: red;
border: 1px solid red;
border-radius: 0 50px 50px 0;
}
.div6{
width: 100px;
height: 50px;
background-color: red;
border: 1px solid red;
border-radius: 0 0 50px 50px;
}
img{
border-radius: 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<img src="../images/a.PNG">
</body>
</html>
盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影</title>
<style>
.div1{
width: 100px;
height: 100px;
border: 5px solid red;
box-shadow: 10px 10px 10px yellow;
}
img{
border-radius: 100px;
box-shadow: 10px 10px 10px yellow;;
}
</style>
</head>
<body>
<div class="div1"></div>
<img src="../images/a.PNG" alt="">
</body>
</html>
浮动
块级元素:独占一行
h1-h6, p , div, 列表.....
行内元素:不独占一行(行内元素,可以被包含在块级元素中,反之,不可以)
span, a , img, strong..........
display
<!--
display:
block 块元素
inline 行内元素
inline-block 块元素,可以在一行
-->
float
父级边框塌陷问题
clear
<!--
clear:
right 右侧不允许有浮动元素
left 左侧不允许有浮动元素
both 两侧不允许有浮动元素
none
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/test01.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="image/01.jpeg" alt=""></div>
<div class="layer02"><img src="image/02.jpeg" alt=""></div>
<div class="layer03"><img src="image/03.jpeg" alt=""></div>
<div class="layer04">
哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或
</div>
</div>
</body>
</html>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px solid black;
}
.layer01{
border: 1px red dashed;
display: inline-block;
float: left;
}
.layer02{
border: 1px green dashed;
display: inline-block;
float: left;
}
.layer03{
border: 1px deepskyblue dashed;
display: inline-block;
float: left;
}
.layer04{
border: 1px yellow dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: left;
clear: both;
}
-
解决1 (增加父级元素高度)
#father{ border: 1px solid black; height:500px; }
-
解决2 (加一个空的div)
<div id="father"> <div class="layer01"><img src="image/01.jpeg" alt=""></div> <div class="layer02"><img src="image/02.jpeg" alt=""></div> <div class="layer03"><img src="image/03.jpeg" alt=""></div> <div class="layer04"> 哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或 </div> <div style="clear:both; margin:0; padding:0;"></div> </div>
-
解决3 (overflow)(父类元素中添加)
#father{ border: 1px solid black; overflow: hidden; }
-
解决4 (添加伪类)
#father{
border: 1px solid black;
}
#father:after{
content: '';
display: block;
clear: both;
}
</div>
<div style="clear:both; margin:0; padding:0;"></div>
```
-
解决3 (overflow)(父类元素中添加)
#father{ border: 1px solid black; overflow: hidden; }
-
解决4 (添加伪类)
#father{
border: 1px solid black;
}
#father:after{
content: '';
display: block;
clear: both;
}