导航布局案例

原创 2018-11-01 16:27:49 202
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航</title> <style>  *{margin: 0px;padding: 0px;} ul{ list-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
<style> 
*{margin: 0px;padding: 0px;}
ul{ list-style: none; text-align: center; }
li{display: inline; float: left; border:1px #ccc; /*margin-left: 2px;*/ background-color:#bebebe;width: 20%; }
a{ display: block; width: 120px;color:#FFFFFF; padding: 2px; text-decoration: none;}
a:hover{background-color: red;}

</style>


</head>
<body>
 <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>
 </ul>

 
</body>
</html>

去掉边距 *{margin: 0px;padding: 0px;}

ul标签去掉点 list-style: none;

a标签鼠标移上去使用伪元素 hover


批改老师:韦小宝批改时间:2018-11-01 16:30:29
老师总结:下次记得加上总结哦!把每次的作业当做笔记去完成!这样意义就会大不一样咯!而且在以后的学习中遇到了什么困难还可以翻翻笔记看看以前有没有写过或者是遇到过!这样对我们以后学习会有很大的帮助的哦!继续加油吧!

发布手记

热门词条