个人练习，各位大神勿笑  。。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin: ;
  11.             padding: ;
  12.         }
  13.  
  14.         ul{
  15.             width: 810px;
  16.             height: 50px;
  17.             background-color:green;
  18.             margin: 100px auto;
  19.             list-style: none;
  20.         }
  21.  
  22.         ul li{
  23.             float: left;
  24.             width: 90px;
  25.             height: 50px;
  26.             text-align: center;
  27.             line-height: 50px;
  28.             margin-left: 10px;
  29.         }
  30.  
  31.         ul li a{
  32.             text-decoration: none;
  33.             display: inline-block;
  34.             width: 90px;
  35.             height: 50px;
  36.         }
  37.  
  38.         ul li a:visited{
  39.             color:blue;
  40.         }
  41.  
  42.         ul li a:hover{
  43.             color: white;
  44.             background-color:pink;
  45.         }
  46.  
  47.     </style>
  48. </head>
  49. <body>
  50.     <ul>
  51.         <li><a href="#">我是导航</a></li>
  52.         <li><a href="#">我是导航</a></li>
  53.         <li><a href="#">我是导航</a></li>
  54.         <li><a href="#">我是导航</a></li>
  55.         <li><a href="#">我是导航</a></li>
  56.         <li><a href="#">我是导航</a></li>
  57.         <li><a href="#">我是导航</a></li>
  58.         <li><a href="#">我是导航</a></li>
  59.     </ul>
  60. </body>
  61. </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: ;
padding: ;
}
 
ul{
width: 810px;
height: 50px;
background-color:green;
margin: 100px auto;
list-style: none;
}
ul li{
float: left;
width: 90px;
height: 50px;
text-align: center;
line-height: 50px;
margin-left: 10px;
}
ul li a{
text-decoration: none;
display: inline-block;
width: 90px;
height: 50px;
}
ul li a:visited{
color:blue;
}
ul li a:hover{
color: white;
background-color:pink;
}
 
 
</style>
</head>
<body>
<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>
<li><a href="#">我是导航</a></li>
</ul>
</body>
</html>

CSS学习笔记-04 a标签-导航练习的更多相关文章

  1. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  2. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  3. 【CSS学习笔记】a标签的四种伪类

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  4. CSS学习笔记（5）--导航ul，li浮动问题

    为什么只给li设置浮动,没有给ul设置浮动,ul后的元素div也会跟着浮动?   添加评论 分享   默认排序按时间排序 3 个回答   张思远 程序员 2 人赞同 代码是不是这样的啊?<ul& ...

  5. CSS学习笔记04 CSS文字排版常用属性

    字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使 ...

  6. 【CSS学习笔记】超链接标签

    有些网址后面为什么是#? 比如,href="http://www.xxx.com/index.html/#q2"标示网页index.html的q2位置处,浏览器读取这个URL后,会 ...

  7. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  8. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. eclipse---->error and exception 和常用配置

    1.eclipse打开后报错:An internal error occurred during: "Initializing Java Tooling". java.lang.N ...

  2. every day a practice —— morning（2）

    Two years at sea have fostered a close relationship between the two fellow sailors as they cross the ...

  3. webpack+vue多入口环境搭建

    项目地址:https://pan.baidu.com/s/1c1Dflp2 使用前提:安装nodejs环境,webpack的配置官网的例子跟着跑一遍,会vue开发 研究webpack+vue研究了一个 ...

  4. H5微信页面开发 IOS系统 input输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置，导致弹框里的按钮响应区域错位

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  5. Single Number leetcode java

    问题描述: Given an array of integers, every element appears twice except for one. Find that single one. ...

  6. 『TensorFlow』第九弹_图像预处理_不爱红妆爱武装

    部分代码单独测试: 这里实践了图像大小调整的代码,值得注意的是格式问题: 输入输出图像时一定要使用uint8编码, 但是数据处理过程中TF会自动把编码方式调整为float32,所以输入时没问题,输出时 ...

  7. suse11安装mysql5.7

    下载地址http://mirrors.sohu.com/mysql/MySQL-5.7/ 1.    wget -c  http://mirrors.sohu.com/mysql/MySQL-5.7/ ...

  8. 【Java】【6】JDK8 Stream操作整理

    摘要: 1,List<EntityOld>转换为List<EntityNew> List<EntityOld> list = oldList; List<En ...

  9. python-django rest framework框架之解析器

    1.解析器 : 对请求的数据进行解析 - 请求体进行解析. 解析器在你不拿请求体数据时 不会调用. class UsersView(APIView): def get(self,request,*ar ...

  10. Leetcode 999. 车的可用捕获量

    999. 车的可用捕获量  显示英文描述 我的提交返回竞赛   用户通过次数255 用户尝试次数260 通过次数255 提交次数357 题目难度Easy 在一个 8 x 8 的棋盘上,有一个白色车(r ...