【css】导航栏li竖线“|”的写法；

导航栏li竖线“|”的写法；

1、li加boder-right（利用margin-right：-1px；隐去最右边的border）；

2、直接在htm写|；

3、利用<span>|</span>；

4、直接切图,利用background；

时间： 2024-12-28 20:43:48

【css】导航栏li竖线“|”的写法；的相关文章

[HTML/CSS]导航栏的下划线跟随效果

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatib

css导航栏下拉菜单代码【转自http://zxm.92.blog.163.com/blog/static/544600282010727112723874/】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c

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

纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: <body> <ul id="navWrapper"> <li> <a href="#">Menu A</a> <ul> <li><a href="#">M

纯CSS导航栏菜单

<!DOCTYPE"><html> <head> <title>导航菜单-下拉</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> .nav,.nav ul{ margin:0; padding:0; list-style-type:none; backgro

css导航栏鼠标hover的时候就出现下拉菜单

代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .two{ 8 background-color: aqua; 9 width: 500px; 10 height: 2

关于bootstrap的导航栏

以下是bootstrap的导航栏 <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">主页</a>

CSS实现动画特效导航栏

0 写在前面今天用纯CSS编写了一种带有特效的导航栏,一方面巩固熟悉了导航栏的一般写法,另一方面练习了CSS3的一些新特性. 1 实现效果当鼠标划过时,实现了一种动态百叶窗效果. 2 实现细节 2-0 导航栏基本架构首先复习导航栏的基本架构,导航栏的实现,采用的是ul-li的结构,为了能够实现导航效果,可以在li内部增加一个a标签. 实现导航栏结构的html代码如下: 1 <div class="container"> 2 <ul class="men