一、伪类选择器
<!-- 1.伪类选择器 -->
<style>
a:link {color: orange;}
a:visited {color: green;}
a:hover {color: red;}
a:active {color: pink;}
input:focus {
outline: none;
background-color: red;
}
</style>
二、伪元素选择器
<!-- 2.伪元素选择器 -->
<style>
p:first-letter {
color: red;
}
p:before {
content: '*';
color: blue;
}
p:after {
content: "[?]";
color: blue;
}
</style>
三、字体属性
<!-- 3.字体属性 -->
<style>
body {
font-family: "Microsoft Yahei", "Arial";
font-size: 14px;
font-weight: normal;
color: rgba(0,0,0,0.5);
text-align: center;
text-decoration: underline;
text-decoration: none;
/* 首行缩进0 */
text-indent: 30px;
}
</style>
四、背景属性
<!-- 4.背景属性 -->
<style>
div.c1 {
600px;
height: 400px;
background-color: pink;
background-image: url("https://imgcache.qq.com/bossweb/support/images/logo/logo_363.png");
background-repeat: no-repeat;
/* 如果设置图片不重复而又铺不满时，
可以通过position属性来设置位置 */
background-position: 50% 50%;
/* 下面是简写 */
background: pink url("") no-repeat 50% 50%;
}
</style>
五、边框属性
<!-- 5.边框属性 -->
<style>
div.c2 {
height: 200px;
300px;
background-color: pink;
/* 边框属性：边框宽度 边框样式 边框颜色 */
border: 1px solid red;
border-left: 1px solid green;
/* 顺序是上，右，下，左 */
margin: 5px 10px 15px 20px;
}
.div1 {
background-color: red;
display: none;
/* 把块级标签转换为内联标签 */
display: inline;
}
.span1 {
background-color: pink;
/* 把内联标签转换为块级标签 */
display: block;
}
/* 改变ul的方向 */
ul {
/* 清除ul的小圆点 */
list-style-type: none;
}
li {
/* 改变方向 */
display: inline;
padding: 20px;
/*border-right: 1px solid #666;*/
}
li.last {
/* 改变最后一个li的样式 */
border-right: none;
}
li>a {
border-right: 1px solid red;
padding-right: 15px;
}
</style>
六、背景不动
<!DOCTYPE html>
<html>
<head>
<title>背景不动</title>
<style>
.c1 {
height: 500px;
background-color: pink;
}
.c2 {
height: 500px;
background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center;
/* 把背景图片固定住 */
background-attachment: fixed;
}
.c3 {
height: 500px;
background-color: blue;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
七、浮动
<!DOCTYPE html>
<html>
<head>
<title>浮动</title>
<style>
* {
margin: 0;
padding: 0;
}
.c1 {
height: 500px;
20%;
background-color: pink;
float: left;
}
.c2 {
height: 500px;
80%;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
八、解决父标签塌陷的问题
原因：因为浮动会导致脱离原本的位置，漂浮起来，导致自己比父标签的位置还高
<!DOCTYPE html>
<html>
<head>
<title>解决父标签塌陷的问题</title>
<style>
* {
margin: 0;
padding: 0;
border:1px solid red;
}
.c1,
.c2 {
height: 100px;
100px;
float: left;
}
/* d1的最后再加一个伪div */
#d1:after {
content: "";
/* 这句话的意思是左边不能有浮动元素 */
clear: left;
}
</style>
</head>
<body>
<div class="d1">
<div class="c1">我是c1</div>
<div class="c2">我是c2</div>
</div>
</body>
</html>
九、
overflow: hidden;
超出的文本将会被隐藏
所有
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<!-- 1.伪类选择器 -->
<style>
a:link {color: orange;}
a:visited {color: green;}
a:hover {color: red;}
a:active {color: pink;}
input:focus {
outline: none;
background-color: red;
}
</style>
<!-- 2.伪元素选择器 -->
<style>
p:first-letter {
color: red;
}
p:before {
content: '*';
color: blue;
}
p:after {
content: "[?]";
color: blue;
}
</style>
<!-- 3.字体属性 -->
<style>
body {
font-family: "Microsoft Yahei", "Arial";
font-size: 14px;
font-weight: normal;
color: rgba(0,0,0,0.5);
text-align: center;
text-decoration: underline;
text-decoration: none;
/* 首行缩进0 */
text-indent: 30px;
}
</style>
<!-- 4.背景属性 -->
<style>
div.c1 {
600px;
height: 400px;
background-color: pink;
background-repeat: no-repeat;
/* 如果设置图片不重复而又铺不满时，
可以通过position属性来设置位置 */
background-position: 50% 50%;
/* 下面是简写 */
background: pink url("") no-repeat 50% 50%;
}
</style>
<!-- 5.边框属性 -->
<style>
div.c2 {
height: 200px;
300px;
background-color: pink;
/* 边框属性：边框宽度 边框样式 边框颜色 */
border: 1px solid red;
border-left: 1px solid green;
/* 顺序是上，右，下，左 */
margin: 5px 10px 15px 20px;
}
.div1 {
background-color: red;
display: none;
/* 把块级标签转换为内联标签 */
display: inline;
}
.span1 {
background-color: pink;
/* 把内联标签转换为块级标签 */
display: block;
}
/* 改变ul的方向 */
ul {
/* 清除ul的小圆点 */
list-style-type: none;
}
li {
/* 改变方向 */
display: inline;
padding: 20px;
/*border-right: 1px solid #666;*/
}
li.last {
/* 改变最后一个li的样式 */
border-right: none;
}
li>a {
border-right: 1px solid red;
padding-right: 15px;
}
</style>
</head>
<body>
<div class="div1">div</div>
<span class="span1">span</span>
<span class="span2">span</span>
<ul>
<li><a href="">手机</a></li>
<li><a href="">电脑</a></li>
<li class="last"><a href="">服装</a></li>
</ul>
</body>
</html>