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

<!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. 基于BindingSource的WinForm开发

    BindingSource控件介绍 BindingSource控件介绍 BindingSource控件是.NET Framework 2.0提供的新控件之一.BindingSource控件与数据源建立 ...

  2. java学习进度

    上周日玩的比较high,忘记写进度报告,今天补上.通过这些天的学习,我对java有了初步的认识,java和c有很多的不同和相同之处,然后就是java的代码在记事本里写,等慢慢深入之后又可以用eclip ...

  3. Being a Good Boy in Spring Festival HDU - 1850

    桌子上有M堆扑克牌:每堆牌的数量分别为Ni(i=1…M):两人轮流进行:每走一步可以任意选择一堆并取走其中的任意张牌:桌子上的扑克全部取光,则游戏结束:最后一次取牌的人为胜者. 现在我们不想研究到底先 ...

  4. Shiro中Realm

    6.1 Realm [2.5 Realm]及[3.5 Authorizer]部分都已经详细介绍过Realm了,接下来再来看一下一般真实环境下的Realm如何实现. 1.定义实体及关系   即用户-角色 ...

  5. ADG配置（主备库环境）

    @font-face { font-family: "Courier New"; }@font-face { font-family: "宋体"; }@font ...

  6. ECharts 报表事件联动系列三：柱状图，饼状图实现联动

    源码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  7. 专题[vjudge] - 数论0.1

    专题[vjudge] - 数论0.1 web-address : https://cn.vjudge.net/contest/176171 A - Mathematically Hard 题意就是定义 ...

  8. mybatis与spring的整合（代码实现）

    mybatis与spring的整合(代码实现) 需要jar包: mybatis核心包:依赖包:log4j包:spring croe;beans;tx;aop;aspects;context;expre ...

  9. vijos 清点人数

    背景 NK中学组织同学们去五云山寨参加社会实践活动,按惯例要乘坐火车去.由于NK中学的学生很多,在火车开之前必须清点好人数. 描述 初始时,火车上没有学生:当同学们开始上火车时,年级主任从第一节车厢出 ...

  10. 基于js的CURD插件

    前言: 每个web程序对数据库的创建(Create).更新(Update).读取(Retrieve)和删除(Delete)操作都是必不可少的,于是我决定开发一个基于JavaScript和jQuery框 ...