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

<!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. .Net调用QQ邮箱发送邮件

    话说网上发送邮件的代码很多,但是我由于不细心,导致拿别人的代码发送邮件老是失败,今天就说说几个要注意的地方吧!!! public bool SendEmail() { MailMessage msg ...

  2. p1218 Superprime Rib

    深搜,添加数字后如果仍为质数,继续递归. #include <iostream> #include <cstdio> #include <cmath> #inclu ...

  3. linux动态库

    1.编写动态库函数接口 gcc -fPIC -shared -o libfunction.so funtion.c 2.写头文件 3.测试 gcc test.c -L. -lfuntion -o ru ...

  4. Fiddler拦截http请求修改数据

    1.拦截http请求 使用Fiddler进行HTTP断点调试是fiddler一强大和实用的工具之一.通过设置断点,Fiddler可以做到: ①修改HTTP请求头信息.例如修改请求头的UA,Cookie ...

  5. P3721 [AH2017/HNOI2017]单旋

    题目:https://www.luogu.org/problemnew/show/P3721 手玩一下即可AC此题. 结论:插入x后,x要么会成为x的前驱的右儿子,要么成为x的后继的左儿子,这取决于它 ...

  6. pytorch初步学习（一）：数据读取

    最近从tensorflow转向pytorch,感受到了动态调试的方便,也感受到了一些地方的不同. 所有实验都是基于uint16类型的单通道灰度图片. 一开始尝试用opencv中的cv.imread读取 ...

  7. implode

    $names = implode('|', array_column($categoryBackNameArr, 'name'));

  8. MyBatis动态sql之${}和#{}区别

    前言 ​ 接触mybatis也是在今年步入社会之后,想想也半年多了,缺没时间去系统的学习,只知道大概,也是惭愧. ​ 不知道有多少刚毕业的同学和我一样,到现在还没仔仔细细去了解你每天都会见到使用到的框 ...

  9. 【Java】【5】List随机取值

    //shuffle 打乱顺序 Collections.shuffle(list); //随机抽取1个值 System.out.println(list.get(0)); //随机抽取N个值 Syste ...

  10. 创建springboot的聚合工程（三）

    springboot聚合工程之添加mybatis数据库持久化操作 在boot-polymer-repository工程添加mybatis的相关依赖 <project xmlns="ht ...