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

<!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. Exception:public class feign.codec.EncodeException feign.codec.EncodeException: 'Content-Type' cannot contain wildcard type '*'

    一.异常出现的场景  Spring Cloud 服务A通过feign调用服务B;之前是好好的,但今天突然就不好了,抛以下异常===> 出现原因补充,Spring Boot默认的JSON方式 Ja ...

  2. p1530 Fractions to Decimals

    将余数记录下来,如果余数相同,那么商的下一位也相同. #include <iostream> #include <cstdio> #include <cmath> ...

  3. python模块--time & datetime

    time模块 #获取当前时间的时间戳 import time >>> time.time() 1535004894.0959966 #日期字符串转化成时间戳 >>> ...

  4. bzoj4516: [Sdoi2016]生成魔咒 sam

    题意:每次插入一个数字,查询本质不同的子串有多少个 题解:sam,数字很大,ch数组用map来存,每次ins之后查询一下新建点表示多少个本质不同的子串(l[np]-l[fa[np]]) /****** ...

  5. React文档（四）渲染元素

    元素是React应用的最小单位. 一个React元素描述了你在屏幕上所看到的东西: const element = <h1>Hello, world</h1>; 和浏览器页面中 ...

  6. Hash应用例子

    八.Hash应用例子搜索引擎会通过日志文件把用户每次检索使用的所有检索串都记录下来,每个查询串的长度为1-255字节.假设目前有一千万个记录(这些查询串的重复度比较高,虽然总数是1千万,但如果除去重复 ...

  7. R12 查询EBS用户相关SQL（转）

    https://www.cnblogs.com/quanweiru/p/4869697.html http://hutianci.iteye.com/blog/934921 --R12查询EBS在线用 ...

  8. Spring注解之@Retention

    作用是定义被它所注解的注解保留多久,一共有三种策略,定义在RetentionPolicy枚举中: package java.lang.annotation; /** * Annotation rete ...

  9. InnoDB行记录格式(compact)、InnoDB数据页结构

    1. compact 行记录格式: 变长字段长度列表,null标志位,记录头信息,列1数据,列2数据 …… 记录头信息中包含许多信息,只列举一部分: 名称 大小 描述 deleted_flag 1bi ...

  10. burpsuite只拦截特定网站数据包教程

    一.背景说明 在配置burpsuite代理截包时经常会遇到这样的情况: 浏览器经常自己发一些包(收集用户信息),干挠渗透测试人员对目标网站的检测: 如果是代理手机,那就是很多APP都时不时发一些包,干 ...