css导航条的设计
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导航条的设计的更多相关文章
- css -- 导航条
1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...
- css 导航条 布局
导航条(简单易用的导航) <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none ...
- 辛星与您使用CSS导航条
第一步.我们创建了一个新的my.html档.在内容填入如下面.这个html文件不动,直到最后.正是这些内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- CSS导航条nav简单样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css导航条等元素位置不变
在容器元素中插入 position: fixed; 如果是在微信小程序中,直接用bottom或者top等就可以简单的设置导航条了.
- css导航条
#nav ul { display: none; position: absolute; padding-top: 0px;} #nav li:hover ul { display: block;}
- 纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)
虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- css横向导航条
css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...
随机推荐
- HCTF Warmup (phpmyadmin4.8.1的文件包含漏洞 )
Warmup 先看hint image.png 看url有file参数,感觉可能要用伪协议啥的,试了下,没出东西扫一下目录,发现http://warmup.2018.hctf.io/source. ...
- 017.NET5_内置容器基本使用
IOC容器IServiceCollection .net 5已经内置了IOC容器. 什么是IOC? 把对象的创建交给第三方容器去创建 如何使用内置的 IOC IServiceCollection ? ...
- zsh & for loop bug
zsh & for loop bug for: command not found syntax error near unexpected token do' do' Unicode 编码 ...
- 1 line of CSS Layouts
1 line of CSS Layouts 10 modern layouts in 1 line of CSS 1. 绝对居中布局 <div class="container&quo ...
- swiper & swiper slider
swiper & swiper slider mobile swiper https://idangero.us/swiper/ https://idangero.us/swiper/get- ...
- Upcoming Browser Behavior Changes & Chrome & SameSite
Upcoming Browser Behavior Changes & Chrome & SameSite Chrome 80 https://auth0.com/blog/brows ...
- React Native & Android & Text Input
React Native & Android & Text Input react native clear input value https://stackoverflow.com ...
- SSO & Single Sign On
SSO & Single Sign On 单点登录 https://en.wikipedia.org/wiki/Single_sign-on https://cloud.google.com/ ...
- nasm astrcat函数 x86
xxx.asm %define p1 ebp+8 %define p2 ebp+12 %define p3 ebp+16 section .text global dllmain export ast ...
- dart2native 使用Dart 在macOS,Windows或Linux上创建命令行工具
下载dart2.6以上 >dart2native --help 编写源文件 // bin\main.dart main(List<String> args) { print('hel ...