网站前端开发利用CSS伪元素:before实现li与li之间的分隔符

发布时间:2018-11-02 23:29:57 来源:腾巢网络

前端开发是创建Web页 面呈现给用户的过程。通过HTML,CSS等各种技术、前端框架解决方案,来 实现互联网产品的用户界面交互。而在 我们网站项目进行前端开发最少不了的就是导航条及面包屑式导航,并且都是使用li标签实现。有的伙伴会问li与li之间如何分隔呢?这时我们可以用CSS伪元素:before来实现。

实现方式

css样式写法 li+li:before{content: "|";}即可,则要加空隙写上padding: 0 20px;。

CSS样式

.header ul{float: right;line-height: 60px;padding: 0px 30px;}
.header ul li{float: left; font: 16px; list-style: none;}
.header ul li+li:before { padding: 0 20px; color: #ddd;content: "|";}

HTML

<div class="header">
	<div class="menu">
		<ul>
			<li>网站前台</li>
			<li>站内信息</li>
			<li>管理员:Mr.Yang</li>
			<li>设置</li>
		</ul>
	</div>
</div>

浏览效果

网站前端开发利用CSS伪元素:before实现li与li之间的分隔符

最新资讯

  1. 移动互联网建站:遵 义做网站建设那家公司好
  2. 贵 州腾巢网络成功入驻熊掌号,再 现移动互联时代新域名
  3. 贵 阳旅游网站建设及技术开发解决方案
  4. 贵 阳企业营销型网站建设重点在于效果而不是价格高低
  5. 遵义企业开发小程序,助 企业快速进入新移动互联网时代
  6. 新 移动时代的制胜法宝——百度智能小程序
  7. 贵阳网站建设,附:网站建设明细报价表
  8. 贵州遵 义做网站建设那家公司好?
  9. 为留住Safari默认搜索引擎“宝座”,谷歌将向苹果支付90亿美元
  10. 小程序的未来如何?是否新商机?
  11. 腾 巢绥阳本土网络公司,提 供网站建设及小程序开发服务
  12. 腾 巢网络自主开发微信小程序正式上线投入运营
友情链接:    网上如何买彩票   中彩网首页   彩友网---首页_欢迎您   免费彩票软件_安全购彩   中彩网首页