<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSSTest</title>

     <style type="text/css">

         *{

             margin: 0;

             padding: 0;

         }

         .nav {

             list-style: none;

             background-color: #6495ed;

             width: 1000px;

             margin: 50px auto;

             /*高度塌陷，子元素浮动*/

             overflow: hidden;

         }

         .nav li {

             float: left;

             /*为每个li指定一个宽度，虽然效果出来了，但是每个li

               不具有超链接属性,易用性不好，li是a的父元素，先给父元素一个

               宽度值，再来设置a宽度

             */

             width: 12.5%;

         }

         /*当鼠标移入时改变背景颜色*/

         .nav a:hover {

             background-color: #c00;

         }

         a {

             /**为a标签指定一个宽度

                a是一个内联元素宽度失效，转为块元素*/

             display: inline-block;

             width: 100%;

             /*设置文字居中*/

             text-align:center;

             /*设置一个上下内边距*/

             padding: 5px 0;

             /*去除下划线*/

             text-decoration: none;

             /*字体颜色设置*/

             color: white;

             /*字体加粗*/

             font-weight: bold;

         }

     </style>

 </head>

 <body>

     <!-- 导航条练习 -->

     <ul class="nav">

         <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导航条nav简单样式的更多相关文章

  1. css 导航条 布局

    导航条(简单易用的导航) <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none ...

  2. css -- 导航条

    1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...

  3. 辛星与您使用CSS导航条

    第一步.我们创建了一个新的my.html档.在内容填入如下面.这个html文件不动,直到最后.正是这些内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  4. css导航条等元素位置不变

    在容器元素中插入 position: fixed; 如果是在微信小程序中,直接用bottom或者top等就可以简单的设置导航条了.

  5. css导航条的设计

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  6. css导航条

    #nav ul { display: none; position: absolute; padding-top: 0px;} #nav li:hover ul { display: block;}

  7. vue导航条选中项样式

    html: <div id="app"> <div class="collection"> <a href="#!&qu ...

  8. amazeui学习笔记--css（常用组件10）--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  9. 分享一个导航条哈(⊙o⊙)…

    原文:http://www.sharejs.com/js/menu/1601 CSS样式表: <!--[if lt IE 9]> <script src="http://h ...

随机推荐

  1. npm install 报错Unexpected end of JSON input while parsing near...

    安装node http://nodejs.cn/download/ 克隆代码 ....... 执行安装 npm install 然后就报了一坨错误 清理一下缓存 sudo npm cache veri ...

  2. zoj3956(Course Selection System)_Solution

    zoj3956_Solution H=sum(hi),C=sum(ci),Value=H*H-H*C-C*C 求Value的最大值 Solution: 动态规划: 共两维:H,C           ...

  3. 原生js实现级联下拉列表

    <!DOCTYPE> <html> <head> <title>级联下拉列表</title> <meta charset=" ...

  4. JSP+MySQL中文乱码

    问题:JSP页面传输到MySQL数据库时,中文为乱码(数据库中存储乱码). 解决办法: 1.将所有的涉及到编码的都设置为 utf8(utf-8). 设置数据库编码:命令行执行:mysql> sh ...

  5. springboot的小知识总结

    1.RestTemplate提交表单数据的三种方法 https://blog.csdn.net/yiifaa/article/details/77939282 2.spring data的分页实现:p ...

  6. java生成二维码（最初版）

    研究了2个小时,发现自己竟然智障,用原先的图片覆盖另一个图片 package com.tz.util; import java.awt.Color;import java.awt.Graphics2D ...

  7. Java_myBatis_xml代理写法

    这种开发方式只需要写好Mapper.xml和对应的Interface就可以了. 1.编写Mapper.xml <?xml version="1.0" encoding=&qu ...

  8. .Net MVC发布出错 Server Error in '/' Application.

    发布的时候遇到这个错误:Server Error in '/' Application.  Could not load file or assembly 'SettingsProviderNet' ...

  9. 【1】存在大于1s的FullGC

    目前有存在大于1s的FullGC,金桥的机器目前是2C4G的,使用的GC方法只能使用单线程进行串行的回收,导致GC比较慢. 建议可以调整GC参数,改用CMS,能够解决这个问题, 参数修改方法: 在应用 ...

  10. Centos7更改yum镜像源

    1. 备份本地yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo_bak 2.获取阿里yum源配置文 ...