1.html结构
无序列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>案例</title> </head> <body> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">发现</a></li> <li><a href="#">我的</a></li> <li><a href="#">动态</a></li> <li><a href="#">留言</a></li> <li><a href="#">友链</a></li> <li><a href="#">反馈</a></li> </ul> </div> </body> </html>
2.CSS部分
1.清除body的影响
*{ margin: 0; padding: 0; }
2.设置背景图
body{ background-image: url(../image/src=htt.jfif); }
3.把链接的位置放在中间
.nav{ width: 960px; height: 40px; margin: 100px auto;<!--居中--> }
4.去掉超链接小圆点
ul{ list-style: none; }
5.通过向右浮动 向右的间距10个像素设置超链接的样式
height: 40px; line-height: 40px;
设置高度和行高一样大小可以使文字水平居中
.nav ul li{ float: right; margin-right: 10px; width: 120px; height: 40px; line-height: 40px; text-align: center; background-image: url(../image/src=htt.jfif); background-repeat: repeat-x; }
6.通过伪类选择器设置超链接样式以及动效改字体改大小改背景颜色
.nav ul li a:link, ul li a:visited { text-decoration: none; color: white; } .nav ul li a:hover{ background-color:rgb(248, 145, 10); font-family: "楷体"; font-size: 24px; color:black; }
这里可以看到显示的范围是文字的范围，这是只需要将a标签设置宽高即可
6.最后
我们知道a标签是行内元素，无法对其设置宽高，这时就要用到display: block;意思是将行内元素改为转换为块级元素
.nav ul li a{ width: 120px; height: 40px; display: block; }
3.完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>display案例</title> <style> *{ margin: 0; padding: 0; } body{ background-image: url(../image/src=htt.jfif); } ul{ list-style: none; } .nav{ width: 960px; height: 40px; margin: 100px auto; } .nav ul li{ float: right; margin-right: 10px; width: 120px; height: 40px; line-height: 40px; text-align: center; background-image: url(../image/src=htt.jfif); background-repeat: repeat-x; } .nav ul li a:link, ul li a:visited { text-decoration: none; color: white; } .nav ul li a{ width: 120px; height: 40px; display: block; } .nav ul li a:hover{ background-color:rgb(248, 145, 10); font-family: "楷体"; font-size: 24px; color:black; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">发现</a></li> <li><a href="#">我的</a></li> <li><a href="#">动态</a></li> <li><a href="#">留言</a></li> <li><a href="#">友链</a></li> <li><a href="#">反馈</a></li> </ul> </div> </body> </html>
