web前端导航条的简单实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>test</title><style>*{margin: 0px;padding: 0px;}.nav{list-style:none;    /* 去除无序列表的每条记录的标识 */}ul{width: 1000px;height: 30px;background-color: #550;overflow: hidden;margin: 50px auto;   /* 元素水平居中 */} li{float: left;width: 250px;}a{text-decoration: none;color: white;font-weight: bold;padding: 5px 0;   /* 增加内边距，将li元素的高度撑起来，li元素已经设置漂浮，其高度只能通过子元素来撑起来 */text-align: center;display: block;     /* 设置成块元素之后,可以设置宽高,将漂浮的块元素li撑起来*/width: 100%;}.nav li a:hover{background-color: deepskyblue;  /*设置整个元素的背景 */color: darkred;  /*设置的是标签内容(这里是文字)的颜色 */}</style></head><body><div ><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">新闻</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></div></body>
</html>

今天，模仿做了一个导航条，还是很有成就感的：)，今天清明假的第二天。

web前端导航条的简单实现相关推荐

web前端导航条制作
以百度为例: 没有加超链接,如果有人要用加上就好了 <!DOCTYPE html> <html><head><meta charset="utf-8 ...
浮动、导航条和简单布局
一.浮动 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
web前端 | 一条“不归路” - 学习路线
本文属于职业解惑系列,读完此文要么生,要么死.要么充满斗志,要么颓废放弃. 没错,此文的观点可以让你极端,但极端的选择,完全取决于你个人! 付出就有回报,做好现在,技术只是为了改变生活!-- 小北哥哥 ...
CSS导航条以及简单下拉菜单实现
以京东导航条来练习,导航条的制作可以采用浮动或者弹性布局,这里采用浮动,要注意高度塌陷的问题.这里简单仿写一下下面实现鼠标移动到江苏实现下拉菜单的实现,首先要有一个下拉菜单,设置好宽高,把他隐藏起来 ...
web前端页面——移动端简单登录页面、下拉菜单（代码详细注释）
今天跟着专业老师复习了一下前端,感觉好多都已经忘记了,我将今天复习的一些重点整理出来. https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微 ...
Web前端工作笔记004---js--webSocket简单介绍和使用方法
JAVA技术交流QQ群:170933152 Websocket 1.websocket是什么? WebSocket是为解决客户端与服务端实时通信而产生的技术.其本质是先通过HTTP/HTTPS协议进行 ...
Web前端 | 进度条 | 动态进度条 | IOS进度条 | 仿IOS进度条
一.Html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
web前端html+css+js 简单模仿敲木鱼
由于上传不了视频只能压缩成gif 我们来直接看看效果这里点击是有声音的.同时设置了重置按钮. 我们看看html部分 <body><div class="box" ...
web前端期末大作业简单的学生网页作业源码基于html css javascript绿色的在线教育平台网站响应式企业网站模板

web前端导航条的简单实现

web前端导航条的简单实现相关推荐

最新文章

热门文章

web前端 导航条的简单实现

web前端 导航条的简单实现相关推荐

最新文章

热门文章

web前端导航条的简单实现

web前端导航条的简单实现相关推荐