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

<!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>
<!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. English trip EM2-LP-1A Hi Teacher:Taylor

    课上内容(Lesson) 词汇(Key Word ) Introduce  vt. 介绍:引进:提出:采用 greet  [ɡrit]  vt. 欢迎,迎接:致敬,致意:映入眼帘  n. (Greet ...

  2. linux之bash shell

    GNU bash ======================================================== 通常计算机硬件是由运算器.控制器.存储器.输入/输出设备等等这些物理 ...

  3. change_bit 按位取反

    int change_bit(int nr, void * addr){    int oldbit;    //1.第nr位取反, 原nr位入CF    //2. sbbl带借位减(把源操作数和标志 ...

  4. Centos7 下coreseek的安装

    Coreseek介绍: Sphinx默认不支持中文索引及检索,基于Sphinx开发了Coreseek 全文检索服务器,Coreseek应该是现在用的最多的Sphinx中文全文检索,它提供了为Sphin ...

  5. CSU OJ 1340 A Sample Problem

    Description My girlfriend loves 7 very much, she thinks it is lucky! If an integer contains one or m ...

  6. [luogu P2324] [SCOI2005]骑士精神

    [luogu P2324] [SCOI2005]骑士精神 题目描述 输入输出格式 输入格式: 第一行有一个正整数T(T<=10),表示一共有N组数据.接下来有T个5×5的矩阵,0表示白色骑士,1 ...

  7. ActiveMQ queue和topic，持久订阅和非持久订阅

    消息的 destination 分为 queue 和 topic,而消费者称为 subscriber(订阅者).queue 中的消息只会发送给一个订阅者,而 topic 的消息,会发送给每一个订阅者. ...

  8. Auto Encoder用于异常检测

    对基于深度神经网络的Auto Encoder用于异常检测的一些思考 from:https://my.oschina.net/u/1778239/blog/1861724 一.前言 现实中,大部分数据都 ...

  9. PyCharm调试运行Scrapy教程

    一.使用scrapy创建一个项目 这里使用scrapy官方第一个示例 scrapy startproject tutorial 使用PyCharm打开项目,在tutorial/tutorial/spi ...

  10. Eclipse集成weblogic教程

    1.在线安装插件 1.1安装Oracle Weblogic Servers Tools oeop是添加的软件仓库的名字,随便写主要是方便记. 仓库链接:http://www.oracle.com/te ...