水平导航栏制作

在网页中水平导航栏是每一张网页都有的。

现在做一个简单的导航栏：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html" charset="utf-8">
<style type="text/css">
ul#nav{
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul#nav li{display: inline;}
ul#nav li a{
padding: 5px 20px;
margin: 0px 2px;
border: 1px solid #666;
background-color: #ccc;
text-decoration: none;
text-align: center;
}
ul#nav li a:hover{
background-color: #333;
color: #fff;
}
</style>
<title></title>
</head>
<body>
<ul id="nav">
<li><a href="/">Water</a></li>
<li><a href="/">Fire</a></li>
<li><a href="/">Air</a></li>
<li><a href="/">Earth</a></li>
<li><a href="/">Beyond</a></li>
</ul>
</body>
</html>

结果如图：

水平导航栏制作,布布扣,bubuko.com

时间： 2024-12-24 12:23:50

水平导航栏制作的相关文章

制作水平导航栏

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <title>制作水平导航栏</title> 9 <style type="text/css&qu

水平导航栏

有两种方式:行内列表或者浮动列表:但是如果你想实现,相同宽度的连接,就只能够使用浮动列表: html代码: <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a:link,a:visited { display:block; width:120px; font-w

关于网页导航栏制作的几种方法与常见问题解决（新人向）

无序列表是html页面排版经常用到的非常实用的标签,但是新手在使用无序列表时,经常会在横向排版上出现问题,笔者在这里提供了笔者在使用无序列表制作网页导航栏时的几种方法与常见问题的解决问题.(以css内部样式为例) [注:有同学之前问过我怎么制作一张网页,但只会html,本文用到均为css.故说明:若急需制作导航,无css技术基础的,在<head>标签中加<style rel="stylesheet" type="text/css"><s

03-Flutter移动电商实战-底部导航栏制作

1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平板电脑.台式机和其他平台提供一致,更广泛的外观和感觉.我喜欢称它为纸墨设计.Material Design 风格是一种非常有质感的设计风格,并会提供一些默认的交互动画. cupertino风格:即 IOS 风格组件,它重现了很多经典的有 IOS 特性的交互和界面风格,让适用于 IOS 的人感觉亲切和

原生js代码水平导航栏效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* 标签和文本结合区域效果制作: 1.用ul做分类标签 2.把ul的display定义为block使ul区域和下面div区域结合在一起 3.

最简单的css3实现的水平导航栏的手风琴效果

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 ul{ 8 list-style: none; 9 } 10 .tab{ 11 width: 100px; 12 height: 200px; 13 float: left; 14 b

导航栏制作

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px; /*盒子外边距*/ padding: 0px; /*盒子内边距*/ } .NavigatorView { width: 100%; height: 50px; background-color: WhiteSmoke;

Bootstrap4后台导航栏制作

<!Doctype html> <html lang="zh-cn"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

父容器为inline-block的导航栏

常见的水平导航栏实现方法有: 1.li {display:inline} 缺点:内联元素,无法设置长与宽 2.li {float:left} 缺点:需要清除浮动 3.li {display:inline-block} 缺点:每个inline-block之间有4px的空白 本文介绍的方法是:将父元素设置为inline-block,子元素浮动 <ul> <li>abc</li> <li>bcd</li> <li>cde</li>