html导航栏纵向代码,html横向导航栏怎么做?横向导航条代码实例
大家好,又见面了,我是你们的朋友全栈君。
有不少小伙伴在刚学习 html 的时候都会遇到这样一个问题:html 横向导航栏怎么做?今天W3Cschool小编就为大家分享一下简单的横向导航条代码,相信会对大家有所帮助。
html 横向导航栏一般用两种方法来制作:第一种,我们使用块状结构结合行内结构来制作。第二种,我们使用float属性来制作。由于第一种比较常用,一下就以第一种方式来介绍。
首先大家要明确一下块状元素与行内结构的不同之处:
(1)块状结构可以自定义宽、高、边框、边距等属性,而行内元素只支持对行高、边距进行自定义,块状元素拥有的外边距、上线边距、边框属性行内元素都没有。
(2)块状结构不能与其他元素在同一行使用,而行内元素支持在其他元素中嵌套使用。
横向导航条代码实例:
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:140px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:15px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#e6e6e6;
}
以上就是本文的全部内容了,今天和大家分享了 html 横向导航栏怎么做,有兴趣的朋友可以使用我们W3Cschool的 html在线编辑器进行调试非常方便!
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/140350.html原文链接:https://javaforall.cn
相关文章
- SAP License:实例讲解SAP与金税接口
- html超链接位置怎么改,如何修改HTML超链接样式?
- html中超链接使用_HTML超链接代码
- HTML 表格表单代码实例(个人简介表)
- 用html设计一个动漫网站_HTML一个介绍的页面代码
- 简单构建HTML页面,连接MySQL数据库(html连接mysql)
- 使用HTML连接MySQL数据库实现功能(html连接mysql数据库)
- MySQL存储HTML页面的简单技巧(mysql存储html)
- 深入学习Linux软中断:掌握实用实例方法(linux软中断实例)
- MySQL中NOT操作的使用方法与实例分析(mysql中not)
- MySQL数据库中如何存储和检索带有HTML标签的文本(mysql中html标签)
- HTML与Oracle新的组合引发了新的机遇与挑战(html oracle)
- asp去除html的函数代码分析附实例说明
- JQuery解析HTML、JSON和XML实例详解
- java后台调用HttpURLConnection类模拟浏览器请求实例(可用于接口调用)
- PHP处理Oracle的CLOB实例
- html的DOM中Event对象onblur事件用法实例
- html的DOM中document对象forms集合用法实例
- 实例讲解Python中的私有属性
- Cocos2d-xUI开发之文本类使用实例