垂直导航栏

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>垂直菜单</title>    <style>        *{margin:0;padding: 0;font-size: 14px;color: #cccccc}  <!--清除所有样式，并且给字体设置大小 -->        ul{list-style: none;width: 100px}  <!--消除ul 前的圆点，并且设置宽度 -->        a{text-decoration: none;display: block;height: 30px;line-height: 30px;             width: 100px;background-color:white;margin-bottom: 1px;text-indent: 10px}         a:hover{color: black；}  <!--消除a标签的下划线，并且将a标签编程块级元素 -->    </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>

</ul>

</body></html>

时间： 2024-08-29 03:18:36

垂直导航栏的相关文章

Css常用操作——————导航栏

一.垂直导航栏 ul{ list-style-type: none; margin: 0px; padding: 0px; } a:link,a:visited{ text-decoration: none; display: block; background-color: aqua; color: black; width: 50px; text-align: center; } a:active,a:hover{

CSS导航栏

CSS导航栏:http://www.w3school.com.cn/css/css_navbar.asp#导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的: 1 水平导航栏:(此例子中链接的宽度不同) 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <style> 6 ul 7 { 8 list-style-type:none; 9 margin:0; 10 padding:0

CSS 导航栏

实例: 导航栏 Home News Articles Forum Contact About 导航栏熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接列表作为标准的HTML基础一个导航栏是必须的 .在我们的例子中我们将建立一个标准的HTML列表导航栏. 导航条基本上是一个链接列表,所以使用 <ul> 和 <li>元素非常有意义: 实例 <ul><li><a href="de

CSS06-响应式导航栏实验

把菜鸟里响应式导航栏和下拉菜单的示例加在了一起,但是没有出现预期的效果,出现的问题有两个:1.设置两个媒体查询时,只有一个生效,和代码顺序无关,而且单个测试时都能生效.2.水平导航栏添加的下拉菜单会出现溢出,如果将overflow设置为hidden下拉菜单不会显示.代码如下: Nav02.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

一个可以拓展的垂直多级导航栏 Demo

大四党忙忙碌碌找工作,博客荒废久矣,可谓:终日昏昏醉梦间,忽闻春尽强登山.因过竹院逢僧话,偷得浮生半日闲. 这是个垂直的导航栏,可以有无限多层的子级菜单,看代码注释就够了: 1 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>sidebarMenu</title> 5 </head> 6 7 <ul id="menuid"

2016/2/25 1， margin auto 垂直方向测试无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;} 竖直方向上margin:auto;无效.2.测试margin重叠的发生条件及现象,并自行搜索“父子div”也会发生margin重叠,写出代码及效果图. <!DOCTYPE html> <html> <head> <title>测试父子DIV-margin</tit

垂直滚动条滑到页面里面的导航栏时，导航栏固定到窗口顶部

如标题,这个功能,有很大的实用性,通过样式以及JS,还是比较容易实现的. 不多说了,直接上代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>菜单导航可悬浮在顶部</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <script typ

巧妙使用checkbox制作纯css动态导航栏

前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked 属性.巧妙地制作导航栏结果: 我们主要制作成这样这样的的导航栏: 首先.我们写出相对的html 由于时间问题.svg没有处理到类中.所以这里给出svg的空标签.大家如果想看效果.可以到我的git里面fork一份 <div class="nav-child"> <in

jquery实现的点击可以展开折叠的垂直导航菜单

jquery实现的点击可以展开折叠的垂直导航菜单:本章节介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />