使用html，css实现简单的导航栏

标题:使用html，css实现简单的导航栏

一、实现过程

首先通过ul,li实现一个无序列表，添加背景得到如图所示的样式【文档流】
让li浮动，使得垂直排列–>水平排列，【注意需要开启bfc，让ul脱离文档流，使得其宽高由ul中的内容li撑开】
为li设置宽度，使得ul中的内容分布均匀
为超链接设置宽度，使得可以点击的范围更大【注意：此步骤需先将内联元素–>块元素，才能设置宽度】
设置字体颜色，大小，去掉超链接的下划线，将文字放置在内容中央即可

二、注意：text-align：center;让内容【文字】放在中央
而margin:0 auto;是将元素放置中央

<!doctype html>
<html><head><meta charset="utf-8"><title>测试导航栏2   再写一次</title> <style type="text/css">*{margin:0;padding:0;}.nav{/*去掉默认装饰*/list-style:none;/*设置宽度*/width:800px;/*设置背景*/background-color:pink;/*设置位置*/margin:10px auto;/*开启bfc*/overflow:hidden;}li{/*移动块元素li*/float:left;/*设置宽度*/width:25%;}a{/*将内联元素设置为块元素*/display:block;/*设置宽度  使得扩大范围,要先设置为块元素,否则宽度无效*/  width:100%;/*设置字体大小*/font-size:20px;/*字体颜色*/color:black;/*文字的位置*/text-align:center;/*去掉下划线*/text-decoration:none;}a:hover{/*设置鼠标移入状态*/background-color:green;}</style></head><body><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">新闻</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul><img src="magazine-unlock-hi1057703.jpg" width="300"  alt="周杰伦"/><br/>         </body>
</html>

使用html，css实现简单的导航栏相关推荐

HTML css web简单的导航栏
html web简单的导航栏 Emm.. 本人的第一篇博客,不知写点什么.. 也不会写什么,哈哈.由于实习工作所需接触了一些前端的知识.下面是平时工作时无聊学习的css.做一个简单的导航栏. body ...
html+css简单立体导航栏
html+css简单立体导航栏一.简单立体导航栏效果二.代码实现 1.html 2.css 一.简单立体导航栏效果二.代码实现 1.html 代码如下(示例): <!DOCTYPE htm ...
简单浮动导航栏（HTML+CSS实现）
简单浮动导航栏,鼠标移上去自动展开下拉菜单,使用HTML+CSS实现. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
前端-01-编写简单的导航栏
导航栏基础的HTML语法我就不讲了,这些在W3C.菜鸟教程.壹佰教程等都能找到,下边我就分享一个前端导航栏是怎么写出来的: 1.工具俗话说,工欲善其事,必先利其器,分享一个写前端的利器,Hbuil ...
如何用最简洁的css代码写一个导航栏
如何用最简洁的css代码写一个导航栏首先我们在里面通过标签添加一个logo,然后通过标签简单的设置几个导航栏中的内容. 注:标签主要是用于设置超链接. <div><img src= ...
android仿微信的activity平滑水平切换动画,Android实现简单底部导航栏 Android仿微信滑动切换效果...
Android实现简单底部导航栏 Android仿微信滑动切换效果发布时间:2020-10-09 19:48:00 来源:脚本之家阅读:96 作者:丶白泽 Android仿微信滑动切换最终实现效果 ...
直播app开发搭建，纯css/html实现侧边导航栏
直播app开发搭建,纯css/html实现侧边导航栏 css代码: *{margin: 0px;padding: 0px;}#box{position: absolute;height: 300px; ...
精致纯CSS打造绿色漂亮导航栏
代码简介: 极精致的纯CSS实现的菜单,兼容性非常好,条例WEB标准,能用性好,用到有修饰图片,请根据代码地址自己下载. 代码内容: <!DOCTYPE html PUBLIC "-/ ...

使用html，css实现简单的导航栏

标题:使用html，css实现简单的导航栏

使用html，css实现简单的导航栏相关推荐

最新文章

热门文章