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>标签, ...
随机推荐
- Vue 基础 day06 webpack 3.x 结合vue
在普通页面使用 render 函数渲染组件 var login = { template: '<h3>login</h3>' } var vm = new Vue({ // c ...
- Mybatis-学习笔记(1)SqlSessionFactory、SqlSession、Mybatis配置文件configuration的属性标签
1.mybatis引入项目,只需要引入mybatis-x.x.x.jar包即可. (当然数据库驱动的引入必不可少) 2.SqlSessionFactory 由SqlSessionFactoryBuil ...
- Kotlin学习(3)类
声明类和接口: //类 class A{ } //接口,接口中的方法可以有默认实现 interface B{ fun show(){ print("i'm B") } } //用冒 ...
- %.*f (特殊的输出符)
c语言中每一种数据类型都有自己的专属占位符,如整型的%d,浮点型的%f等,而*也是一个占位符,比较特殊而已. 比如输入一个n,输出0.5的n次方,就可以这么写 #include<bits/std ...
- http请求中的Content-Length作用机制与分块chunked
httpclient-4.5.9.jar org.apache.http: auth 身份 client 端 conn 连接 cookie 本地 impl: 实现 exe ...
- MySQL第五天——日志
日志 log_error(错误日志) 用于记录 MySQL 运行过程中的错误信息,如,无法加载 MySQL数据库的数据文件,或权限不正确等都会被记录在此. 默认情况下,错误日志是开启的,且无法禁止. ...
- C# 给DataTable去重
using System; using System.Data; namespace DelegateTest { public class Program { public static void ...
- Java架构师需要掌握的技术栈
- window x86编译openssl vs2013
1.下载OpenSSL,http://www.openssl.org/source/(Feb 8 18:29:10 2011 openssl-.0.0d.tar.gz[LATEST] ),winrar ...
- luogu3350 [ZJOI2016]旅行者
链接 P3350 [ZJOI2016]旅行者 题目大意:给出网格图,求两点之间最短路,多组询问. \(n*m\leq10^5\ \ q\leq 10^5\) 考虑\(CDQ\)分治. 首先把询问离线, ...