摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>CSS基础及样式控制-DEMO_1</title> &nb
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS基础及样式控制-DEMO_1</title>
<style type="text/css">
*{
padding: 0;/*内边距清0*/
margin: 0;/*外边距清0*/
}
a:link{ /*未访问的标签*/
color:#000000;/*黑色*/
text-decoration:none;/*去掉下划线*/
}
a:hover{/* 鼠标移动到链接上*/
color: #FF0000;/*红色*/
text-decoration: underline;/*添加下划线*/
}
a{
margin-left: 10px;/*距离左边*/
}
#box{
margin:20px auto; /*居中*/
width:100px; /*宽度*/
}
ul{
box-shadow: 0px 0px 5px #cccccc inset; /*阴影*/
border-radius: 10px;/*圆角边框*/
}
ul li{
list-style: none;/*清空默认list样式*/
height:40px;/*高度*/
line-height: 40px;/*行高*/
border-bottom: 1px solid #cccccc;/*实线边框*/
text-align: center;/*文字居中*/
/*background:#ADD8E6;*/
border-radius: 10px; /*圆角边框*/
}
ul li:hover{/* 鼠标移动到li上*/
background: #FFC0CB;/*背景颜色*/
}
</style>
}
</head>
<body>
<div id='box'>
<ul>
<li><a href="#">测试1</a></li>
<li><a href="#">测试2</a></li>
<li><a href="#">测试3</a></li>
<li><a href="#">测试4</a></li>
<li><a href="#">测试5</a></li>
<li><a href="#">测试6</a></li>
</ul>
</div>
</body>
</html>
批改老师：韦小宝批改时间：2019-01-12 14:16:02
老师总结：写的很不错 css的每行的总结都很清楚 基础这里没有什么太复杂的逻辑 要记得课后需要多练习
