<!-- 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>
<!-- 5.边框属性 -->
<style>
div.c2 {
height: 200px;
width: 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>
* {
margin: 0;
padding: 0;
border:1px solid red;
}
.c1,
.c2 {
height: 100px;
width: 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>
<!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 {
width: 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;
width: 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>
