CSS-网站导航栏标题之间的分隔符
在一个网页上,尤其是导航栏文字与文字之间,大多数情况下都会有分隔符,也就是文字之间的一个小竖线,这个小小的分隔符,每个网站都有不同的样式,常用的写法就是用标签的边框,这个写法也比较简单,用起来也方便,但是,却满足不了越来越绚丽的网页,很多情况下用标签的边框是写不出来现有要的样式的,那就需要其他的写法,下面总结一些常见的,如有不足或者错误之处,欢迎大家批评指正。
1、标签边框.
这个写法比较简单,不需要额外增加HTML页面的结构,给标签一个左边框或者右边框,用css修饰一下即可。
2、<span>|</span>
这种写法就需要额外增加HTML页面结构了,也就是需要添加额外的标签,当然,这个标签不仅限于span,p、i...标签都行,在标签里面写上一个键盘上就有的竖线即可,然后用css修饰一下,这种写法适合一些分隔符较小,而且简单的地方。
3、伪元素
很多时候,上面的两种方式并不能满足要求,不管是大小还是位置,都不能随意控制,即使能写出来,也会比较麻烦,这时候,就需要伪元素了。用伪元素的好处就是可以通过css控制位置,大小,样式等,而且代码写起来也简单。
4、背景图片
有一些比较华丽的网站,分隔符也是做得很漂亮,各种好看的样子,纯css很多时候就写不出来,而且各个浏览器不同,加载出来的样式也会有些差异,这个时候就需要图片了,将UI设计的图片添加为标签的背景样式,正常格式的图片(如:jpg,png,gif等)在各个浏览器上都是没有兼容问题的,网速好的话,都能加载出一样的样式。
5、代码
在阿里巴巴矢量图标库等网站上有很多小图标的代码,自己想要什么样子的,就去上边下载人家写好的,当然了,一些大神也可以自己写,这些都是没问题的。
以上是自己在写网页中总结出来的五种常用的方式,写法肯定也不止上边五种,每个人都有自己的习惯,每个网站都有不一样的样式,根据要求按照自己习惯的方式就行,切记,一定要根据产品经理的要求来写。欢迎大家在评论区给出自己的方式。分享知识才有意思!
CSS-网站导航栏标题之间的分隔符的更多相关文章
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 【转】iOS中设置导航栏标题的字体颜色和大小
原文网址:http://www.360doc.com/content/15/0417/11/20919452_463847404.shtml iOS中设置导航栏标题的字体颜色和大小,有需要的朋友可以参 ...
- iOS中设置导航栏标题的字体颜色和大小
iOS中设置导航栏标题的字体颜色和大小,有需要的朋友可以参考下. 在平时开发项目的时候,难免会遇到修改导航栏字体大小和颜色的需求,一般使用自定义视图的方法,其实还存在一种方法. 方法一:(自定义视图的 ...
- UINavigationController-自定义导航栏标题按钮.
见视频0416 自定义导航栏标题按钮,在Bar Button Item中加入UIButton,设置UIButton的图片和标题,还可以自定义自定义UIButton实现特效按钮.
- uni-app动态修改顶部导航栏标题
动态修改顶部导航栏标题有两种方法方式一.使用自定义到导航栏,覆盖原生导航栏 缺点:自定义到导航栏性能远远不如原生导航栏,手机顶部状态栏区域会被页面内容覆盖,这是因为窗体是沉浸式的原因,即全屏可写内容: ...
- 前端css小米导航栏设置及盒子定位居中问题
1.小米最上部导航栏设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 初尝微信小程序2-Swiper组件、导航栏标题配置
swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...
- HTML+CSS实现导航栏二级下拉菜单完整代码
工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- day13—CSS之导航栏
转行学开发,代码100天——2018-03-29 见过这么多网页,没有导航栏的几乎没见过.因此,对导航栏的练习非常之必要. 导航栏的实现,基本上都是通过链接列表实现,即ul->li->a标 ...
随机推荐
- postgresql-查看表大小
drop table tablesize create table tablesize( phone int) create table tablesize( phone text) create t ...
- golang 闭包求斐波那契数列
题目是Go指南中的闭包求斐波那契数列 package main import "fmt" // 返回一个"返回int的函数" func fibonacci() ...
- Docker三剑客之Docker Swarm
一.什么是Docker Swarm Swarm是Docker公司推出的用来管理docker集群的平台,几乎全部用GO语言来完成的开发的,代码开源在https://github.com/docker/s ...
- sql必知必会
1.根据条件查询数据库中数据,并返回数据条数 去掉count就会返回数据库中符合条件的所有数据 SELECT COUNT(*) FROM sentiment_info WHERE sentiment_ ...
- Bash算术运算
使用let命令 let let let let let let let 使用expr命令 - ` # + ` # \* ` # / ` # / ` # − \* ` # +` # + -*· # -* ...
- 使用控制台程序搭建WebApi
原文参考: ASP.NET Web Api 2.2: Create a Self-Hosted OWIN-Based Web Api from Scratch 新建控制台程序,引入Owin包 PM&g ...
- 记一次cocos项目的加载速度优化
半个月前,我们用cosos creator做了一个简单的小游戏,也许算不上小游戏吧..一边学cocos,一边做,几经波折后终于上线了.然鹅,功能是实现了,但是加载速度十分感人(毕竟没经验嘛,无辜脸). ...
- 第一个WCF程序
WCF的服务需要寄宿在进程中,我们把服务端的叫做宿主,为服务指定宿主指定的过程叫服务寄宿.有两种方式一种是自我寄宿(Self-Hosting),一种是IIS寄宿方式.Self-Hosting我们通过一 ...
- 本地主机访问不了nginx 页面,请求超时
虚拟机可以正常访问nginx页面,但是电脑浏览器访问不了,一番排差,防火墙的问题. /etc/init.d/iptables stop
- 最短路径算法----floyd(转)
一.Floyd算法 假设从i到j的最短路径上要经过若干个顶点,这些中间顶点中最大的顶点编号为k,最小的顶点为t,因此要求算dist[i][j]的最小值,那么只需要求算dist[i][s]+dist[s ...