1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title></title>

  6     <link rel="stylesheet" href="./reset.css">

  7     <style>

  8     /*设置nav的大小*/

  9     .nav{

 10         width:1210px;

 11         height:48px;

 12         background-color:#E8E7E3;

 13         margin:100px auto;

 14     }

 15     /*设置nav中的li*/

 16

 17     .nav li{

 18         /*设置li设置浮动，使其横向摆列*/

 19         float:left;

 20         /*设置Li的高度*/

 21         /*将文字在父元素中居中*/

 22         line-height:48px;

 23

 24     }

 25

 26     /*设置a的样式*/

 27     .nav a{

 28         /*将a转化为块元素*/

 29         display:block;

 30         text-decoration:none;

 31         color:#777;

 32         font-size:18px;

 33         padding:0 40px;

 34

 35     }

 36     /*设置鼠标移入的效果*/

 37     .nav a:hover{

 38         background-color:#3F3F3F;

 39         color:#E8E7E3;

 40

 41     }

 42

 43     </style>

 44 </head>

 45 <body>

 46     <ul class="nav">

 47         <li><a href="#">HTML/CSS</a></li>

 48         <li><a href="#">Browser Side</a></li>

 49         <li><a href="#">Server Side</a></li>

 50         <li><a href="#">Programming</a></li>

 51         <li><a href="#">XML</a></li>

 52         <li><a href="#">Web Building</a></li>

 53         <li><a href="#">Reference</a></li>

 54     </ul>

 55 </body>

 56 </html>

显示效果

css导航条的设计的更多相关文章

  1. css -- 导航条

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

  2. css 导航条 布局

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

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

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

  4. CSS导航条nav简单样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  6. css导航条

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

  7. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  8. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  9. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...

随机推荐

  1. apache 解析漏洞（CVE-2017-15715)

    在p牛博客最近更新的文章,传送门,感觉很有意思,自己在自己本地测试了一下 0x01 正则表达式中的 '$' apache这次解析漏洞的根本原因就是这个 $,正则表达式中,我们都知道$用来匹配字符串结尾 ...

  2. C++ Primer笔记

    C++ Primer笔记 ch2 变量和基本类型 声明 extern int i; extern int i = 3.14;//定义 左值引用(绑定零一变量初始值,别名) 不能定义引用的引用:引用必须 ...

  3. git hooks All In One

    git hooks All In One $ xgqfrms git:(main) cd .git/ $ .git git:(main) ls COMMIT_EDITMSG HEAD branches ...

  4. TypeScript & React & Jest

    TypeScript & React & Jest create-react-app Jest ``tsx import React from 'react'; import { re ...

  5. taro list render bug

    taro list render bug 列表渲染 https://taro-docs.jd.com/taro/docs/list.html not support jsx map 垃圾微信 cons ...

  6. learning free programming resources form top university of the world

    learning free programming resources form top university of the world Harvard university https://www. ...

  7. perl 打印简单的help文档

    更多 PrintHelp.pm #!/usr/bin/perl package PrintHelp; require Exporter; use v5.26; use strict; use utf8 ...

  8. 云服务器Centos7部署Tomcat服务器

    目录 部署Tomcat服务器 1.安装JDK1.8 2.安装与启动tomcat 配置安全组(8080端口) 参考文章 部署Tomcat服务器 1.安装JDK1.8 JDK下载地址:https://ww ...

  9. Python算法_两数之和（01）

    给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,数组中同一个元素不能使用两遍. ...

  10. KSM概念学习

    KSM: Kernel SamePage Merging 内核同页合并 简介 KSM允许内核在两个或多个进程(包括虚拟客户机)之间共享完全相同的内存页. KSM让内核扫描检查正在运行中的程序,并比较他 ...