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

<!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 V1 - B 6.Where Are You From？ Teacher:Patrick Key: 一般疑问句和否定句中的be动词

    In this lesson you will learn to talk about countries and languages.  本节课你将学习到关于谈论城市和语言 课上内容(Lesson) ...

  2. 小程序点击跳转外部链接 微信小程序提示：不支持打开非业务域名怎么办 使用web-view 配置业务域名

    小程序点击跳转外部页面 1.index.wxml  添加点击事件   标签可以是小程序支持的 <!-- 邀请好友 --> <cover-image src='/img/invitat ...

  3. 【洛谷p5015】标题统计

    (写上瘾了再来一篇吧) 标题统计[传送门] 洛谷算法标签 字符串这种东西,我看到是崩溃的.因为我们只学到了二维数组[这个梗自行get],总之我们当时还没有学.然后显然就是各种翻书,各种百度.大致了解了 ...

  4. leetcode-algorithms-13 Roman to Integer

    leetcode-algorithms-13 Roman to Integer Roman numerals are represented by seven different symbols: I ...

  5. json2.js 序列化 和反序列化 转

    http://www.cnblogs.com/youring2/archive/2013/03/01/2938850.html json2.js的源码地址: https://github.com/do ...

  6. SQL server语句中如何实现分页

    SELECT TOP 页大小 *FROM table1WHERE id NOT IN ( SELECT TOP 页大小*(页数-1) id FROM table1 ORDER BY id )ORDER ...

  7. Spring Boot: remove jsessionid from url

    参考代码 :Spring Boot: remove jsessionid from url 我的SpringBoot用2.0.*,答案中的第一二个方案亲测无效. 应该在继承了Configuration ...

  8. -bash: /etc/init.d/nginx: /bin/bash^M: bad interpreter: No such file or directory

    -bash: /etc/init.d/nginx: /bin/bash^M:bad interpreter: No such file or directory 这个使为了弄nginx自启的,然后在官 ...

  9. django学习之——我的 Hello World

    pycharm 打开django 创建的项目:添加views.py文件 修改 urls.py from django.conf.urls import patterns, include, url f ...

  10. rtp rtcp rtsp sip协议了解方法

    vlc有个串流功能 可以流各种推流 方便拉取. 能够方便抓包查看协议. 1.菜单媒体->流 打开对话框 分别可以选择本地文件 关盘文件 网络流 捕获设备做流化处理. 2. 选择 串流->新 ...