WEB前端(7)—— 简单的 HTML+CSS 导航栏案例

适合每个新手的导航栏：

代码与运行效果如图：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>导航栏</title><style type="text/css">ul{/*设置导航栏的框框*/margin: 30px auto;/*框框整体的位置，30px是指离网页的顶部和下部的距离，auto控制的是左右距离为自动调节*/width: 600px;/*框框的宽度*/height: 350px;/*框框的长度*/padding: 0px;/*将框框的padding设置为零，不然会导致框框里的内容与框边缘有间隔*/border:1px solid #000;/*添加边框*/}li{list-style-type: none;/* 去掉li前的点 */float: left;/*将li设置成做浮动，变为联动*/}a{display: block;/*将a变成块状*/width: 100px;/*设置块的宽度*/height: 50px;/*设置块的长度*/font-family: Microsoft Yahei;line-height: 50px;/*设置字体在块中的高度*/background-color: #aaa;margin: 0px 0px;/*块里的高宽通过margin设置*/color: #fff;text-align: center;/*字体居中*/text-decoration: none;/*去掉下划线*/font-size: 15px;}a:hover{background-color: pink;/*鼠标点击后显示的颜色*/}</style>
</head>
<body><div ><!-- ul标签定义的是表格当中无序列表，表格当中的无序列表都是在<ul>标签之中，无序列表都是和<li>标签在一起使用的。 a是连接标签。--><ul class="daohang"><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><!-- 下面是添加一张图片，style是样式要图片能够完全的显示在设置的框中 --><div><img src="./image/1074148.jpg" alt="" style="width: 600px;height: 301px;"></div></ul></div>
</body>
</html>

WEB前端(7)—— 简单的 HTML+CSS 导航栏案例相关推荐

【响应式Web前端设计】Bootstrap入门Demo(导航栏)
文章目录 1 导入bootstrap.min.css 2 效果 3 代码 1 导入bootstrap.min.css 2 效果 3 代码 <!--作者:88304454@qq.com时间:202 ...
好程序员web前端分享值得参考的css理论：OOCSS、SMACSS与BEM
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular C ...
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
web前端实训作业 html+css+javascript 水果网页设计实例企业网站制作
web前端实训作业 html+css+javascript 仿果然新鲜水果(6页面)网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无 ...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
web前端期末大作业 html+css+javascript 校园主题(东北大学8页)网页设计实例代码质量高...
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能满足你的需求 ...
《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class
本节书摘来自异步社区<Web前端开发精品课 HTML与CSS进阶教程>一书中的第1章,第1.4节,作者: 莫振杰更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南优点简单,不需要工程,不用puppeteer生成骨架d ...
web前端知识总结二（css（其他）+移动web网页开发）
web前端知识总结二(css(其他)+移动web网页开发) 文章目录 web前端知识总结二(css(其他)+移动web网页开发) 字体图标平面转换-位移位移:绝对定位居中开门效果旋转转换原点 ...

WEB前端(7)—— 简单的 HTML+CSS 导航栏案例

适合每个新手的导航栏：

WEB前端(7)—— 简单的 HTML+CSS 导航栏案例相关推荐

最新文章

热门文章