day13—CSS之导航栏
转行学开发,代码100天——2018-03-29
见过这么多网页,没有导航栏的几乎没见过。因此,对导航栏的练习非常之必要。
导航栏的实现,基本上都是通过链接列表实现,即ul->li->a标签的使用,通过CSS样式控制垂直导航或者水平导航。
<ul>
<li><a href="#1">导航1</a></li>
<li><a href="#1">导航1</a></li>
<li><a href="#1">导航1</a></li>
</ul>
改导航栏保留基本样式,一般为了美观需要重写设置其样式。
基本步骤:
1.去除a标签的下划线,ul,li标签的圆点标签,去除页面边距等
*{
margin: 0px;
padding: 0px;
}
li
{
list-style:none;
}
a{
text-decoration: none;
}
2.增加a标签内容样式,字体,背景颜色,边距,行高,居中等;ul,li标签的背景颜色,边距等
a: font-size;background-color;margin;line-height;text-align
li: width,height,background-color;margin;display
因为本例中同时创建了垂直导航和水平导航,所以在li中需要区别对待,水平导航需要设置inline,float
3.标签操作美化,主要针对边框,鼠标移动样式
案例中边框可设置圆角,a标签可增加:hover样式以增加用户体验。
4.CSS内容优化-OOCSS
如果仅是普通的样式要求,至此可以说基本上完成了导航栏标签的样式设置。
但是实际应用中,往往网站的内容很多,样式设置远比这些复杂,因此样式中会产生大量重复样式,造成文件占用资源较多。
鉴于今天学习了OOCSS,也就是面向对象的CSS样式,特对文中样式进行了优化。避免大量重复样式的编写。
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
background-color: #f1f1f1;
} li,a
{
display: block;
color: #000;
text-decoration: none;
width: 100px;
height: 50px;
font-size: 16px;
line-height: 50px;
text-align: center;
}
li
{
margin-right: 10px;
} li,a:hover
{
background-color: #555;
border-radius: 8px;
} #Vnav li
{
display: block;
margin-top: 10px;
margin-left: 10px;
background-color: #f1f1f1;
} #Hnav li
{
display: inline;
background-color: #ccc;
float: left;
} </style>
优化之后较之前的CSS内容,减少了很多,看起来也更加清爽。最后呈现的效果如下:
对于OOCSS,简单地说,需要注意以下几点:
day13—CSS之导航栏的更多相关文章
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
- 第8天:CSS制作导航栏
今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...
- Css之导航栏学习
Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...
- CSS 笔记——导航栏、下拉菜单、提示工具
8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...
- HTML/CSS:导航栏水平和垂直
1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...
- HTML+CSS实现导航栏二级下拉菜单完整代码
工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...
- html css二级导航栏
二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...
随机推荐
- js获取select下拉框中的值
现在有一id为userType的下拉框,怎么获取选中的值: 用户类型: <select name="type" id="userType"> < ...
- locale报错,显示中文乱码
locale: Cannot set LC_CTYPE to default locale: No such file or directorylocale: Cannot set LC_MESSAG ...
- Samba服务问答
1. samba服务用在什么地方?samba服务用于把Linux服务器上的文件或者打印接共享给windows或者Linux. 2. 在samba服务的配置文件中,[global]配置部分的securi ...
- MySQL-第十篇多表连接查询
1.SQL92规范.SQL99规范 2.广义笛卡尔积,多表之间没有任何连接条件,得到的结果将是N x M条记录. 3.SQL92中的左外连接.右外连接,连接符有(+或*),放在连接条件那一边就叫做左或 ...
- SQL 中的正则函数
ORACLE中支持正则表达式的函数主要有下面四个: 1,REGEXP_LIKE :与LIKE的功能相似,比LIKE强大得多. 2,REGEXP_INSTR :与INSTR的功能相似. 3,REGEXP ...
- Spring事务嵌套引发的问题--Transaction rolled back because it has been marked as rollback-only
转载https://blog.csdn.net/f641385712/article/details/80445912 读了两边才找到问题
- OtterTune配置记录
0. 准备两台Ubuntu 18.04的虚拟机,安装mysql(供server-side存储调优数据用)和postgresql(供client-side存储业务数据用,这里以PostgreSQL为例. ...
- linux强制用户下线命令
linux强制用户下线命令 前提:必须是root权限操作:(1)使用who查看目前有哪些用户登录了服务器,见下图(2)使用pkill -kill -t pts/1命令踢出第一个用户.命令解释:pt ...
- ubuntu16.04安装mysql数据库
安装 sudo apt-get install mysql-server(安装过程中按提示设置root密码) sudo apt-get install mysql-client sudo apt-ge ...
- no hash tools
import itertools class Set(list): def __init__(self, params): super(Set, self).__init__() ...