HTML一级导航制作
今天分享一下简单导航栏的制作方法:
第一步:引入css样式表,新建一个id为nav的层,使用<ul>、<li>、<a>标签来制作完成效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/yiji.css"/>
</head>
<body>
<div id="nav">
<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>
</ul>
</div>
</body>
</html>
第二步设置CSS样式:
1.设置nav的属性
#nav{
width: 500px;
height: 50px;
border: 1px solid red;
}
展示效果如下所示:
2.清除<ul>标签前面自带的点
#nav ul{
list-style: none;
}
3.设置<ul>下包含的<a>标签的属性
#nav ul li a{
width: 98px;
height: 50px;
float: left;
border: 1px solid red;
text-align: center;
line-height: 50px;
text-decoration: none;
}
4.设置鼠标滑过效果
#nav ul li a:hover{
background-color: #ABCDEF;
}
最终效果:
完整HTML代码部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/yiji.css"/>
</head>
<body>
<div id="nav">
<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>
</ul>
</div>
</body>
</html>
完成CSS样式代码部分:
*{
margin: 0;
padding: 0;
}
#nav{
width: 500px;
height: 50px;
border: 1px solid red;
margin: 30px;
} #nav ul{
list-style: none;
}
#nav ul li a{
width: 98px;
height: 50px;
float: left;
border: 1px solid red;
text-align: center;
line-height: 50px;
text-decoration: none;
} #nav ul li a:hover{
background-color: #ABCDEF;
}
大家觉得有用请打赏一下LZ。。ing
0.1也是您的帮助
HTML一级导航制作的更多相关文章
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(22)-权限管理系统-模块导航制作
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(22)-权限管理系统-模块导航制作 最近比较忙,系统难度独步增加,文章的发布速度明显比以前慢了. 由于我们 ...
- Flutter实战视频-移动电商-12.首页_GridView类别导航制作
12.首页_GridView类别导航制作 首页导航区的制作 外面用一个gridview来写.里面单独提出来 新建导航组件 还是在home_page.dart里面写代码 新建一个静态的组件: 快捷键写组 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(22)-权限管理系统-模块导航制作
系列目录 最近比较忙,系统难度独步增加,文章的发布速度明显比以前慢了. 由于我们已经跑通了整个系统,所有东西都回到了简单,接下来我们做模块制作也就是操作SysModule表. 首先我们来回顾一下之前的 ...
- HTML静态网页导航制作
普通导航栏制作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- CSS一级导航-天蓝色(带阴影)
一款亮丽的导航,能给网站一个画龙点睛的作用.导航在指引用户搜寻内容时,还能改变用户浏览网站的心情,浏览网站也像一场旅行,有创意的导航栏让用户欣赏起来也会更加愉悦,增加对网站的兴趣. 本人不擅长美工制作 ...
- Flutter移动电商实战 --(23)分类页_左侧类别导航制作
自动生成dart类 https://javiercbk.github.io/json_to_dart/ 生成的代码 class Autogenerated { String code; String ...
- 微信小程序框架分析小练手(一)——猫眼电影底部标签导航制作
旧版猫眼电影底部有4个标签导航:电影.影院.发现.我的,如下图所示: 一.首先,打开微信开发者工具,新建一个项目:movie.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标的素材放到ima ...
- thinkcmf导航制作
<?php $tree = sp_get_menu_tree('main'); ?> <foreach name="tree" item="vo&quo ...
- 网页a标签:导航制作 怎么让鼠标经过A标签的时候显示块状背景?
文章出处:http://dongguan.seosrx.net/website/6.html
随机推荐
- 【SSRS】入门篇(七) -- 报表发布
原文:[SSRS]入门篇(七) -- 报表发布 完成[SSRS]入门篇(六) -- 分组和总计后,第一份简单的报表就已完成了,下面把报表发布到报表服务器上. (实际情况下,报表展示给用户未必是用报表服 ...
- web开发中的多线程死锁问题,避免死锁
1.什么是死锁,产生死锁的原因,和产生死锁的必要条件 所谓死锁(DeadLock),是指多个进程或线程在运行过程中因争夺资源而造成的一种僵局,当进程或线程处于僵局时,若无外力作用,它们将无法再向前推进 ...
- IOC容器在框架中的应用
IOC容器在框架中的应用 前言 在上一篇我大致的介绍了这个系列所涉及到的知识点,在本篇我打算把IOC这一块单独提取出来讲,因为IOC容器在解除框架层与层之间的耦合有着不可磨灭的作用.当然在本系列前面的 ...
- html5 canvas+js实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
- [翻译]HBase 中的 ACID
同前面翻译的一篇关联的,同作者的另一篇:ACID in HBase 这一篇不是单纯地描述一个问题,而是以 ACID 为主题,介绍了其在 HBase 中各个部分的体现及实现. ACID,即:原子性(At ...
- C# STA和MTA线程设置
参考资料: http://www.yesky.com/20010207/158097.shtml http://www.ftponline.com/china/XmlFile.aspx?ID=242 ...
- Python Learing(二):Basic Image Processing 1
<写在前面> Basic image processing 1: 0.(以简单的曲线图为例)对于生成的图自定义外观,使用子图,多个数据集,标题,标签,交互式标注,图例: 1.生成散点图,直 ...
- Lak3 Counting(POJ No.2386)
问题描述: 有个大小为N*M的园子,雨后积起了水.八连通的积水被认为是连接在一起的.求出园子里总共有多少水洼. N, M <= 100 输入例: : 问题分析: 八连通即:上.左上.左,左下,下 ...
- xhEditor struts2实现图片上传
xhEditor的环境搭建请参考http://blog.csdn.net/itmyhome1990/article/details/38422255,这时我们打开图片功能 是没有上传按钮的 如果想要出 ...
- fancybox关闭弹出窗口parent.$.fancybox.close();
fancybox弹出窗口右上角会自带一个关闭窗口,并且点击遮罩层也会关闭fancybox 有时我们不需要这样进行关闭,隐藏关闭窗口,并且遮罩层不可点击 在弹出窗口页面加一链接进行关闭使用parent. ...