1.导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
ul{
list-style-type:none
}
li{
display: inline-block;
width:20%;
background:grey;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: large;
text-decoration: none;
}
li:hover{
background: black;
color: white;
text-decoration: none;
}
a:hover{
color: snow;
text-decoration: none;
}
</style>
<body>
<ul style="list-style:none">
<li ><a href="http://www.w3school.com.cn/html/index.asp">HTML</a></li>
<li ><a href="http://www.w3school.com.cn/css3/index.asp">CSS</a></li>
<li ><a href="http://www.w3school.com.cn/js/index.asp">JS</a></li>
<li ><a href="https://blog.csdn.net/forever_wen">Python</a></li>
</ul>
</body>
</html>
2.分页练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style-type: none;
}
li {
text-decoration: none;
display: inline-block;
width: 10%;
padding-top: 5px;
padding-bottom: 5px;
background: snow;
color: #333333;
text-align: center;
font-size: large;
text-transform: capitalize;
}
li:hover {
background: green;
color: snow;
}
a:hover {
color: snow;
}
.active{
background: gray;
}
#pageintor{
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="pageintor">
<ul>
<li><a href="#">上一页</a></li>
<li class="active"><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="#">...</a></li>
<li><a href="#">28</a></li>
<li><a href="#">下一页</a></li>
</ul>
</div>
</body>
</html>
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
