编辑主页 > 列表 > 正文
CSS几点技巧
作者:acct 发布时间:2018/12/14 15:23:44 分数:0 跟帖:0
  1、在CSS使用:not() 在菜单上应用/取消应用边框,先给每一个菜单项添加边框/* add border */.nav li {  border-right: 1px solid #666;}  ……然后再除去最后一个元素……//* remove border */.nav li:last-child {  border-right: none;}  ……可以直接使用 :not() 伪类来应用元素:.nav li:not(:last-child) {  border-right: 1px solid #666;}  这样,代码干净,易读,易于理解。当然,如果新元素有兄弟元素的话,也可以使用通用的兄弟选择符(~):..nav li:first-child ~ li {  border-left: 1px solid #666;} 2、为body添加行高,不需要分别添加 line-height 到每个 <p>,<h*>等。只要添加到 body 即可:body {  line-height: 1;}  这样,文本元素就可以很容易地从body 继承。  3、所有一切都垂直居中,要将所有元素垂直居中,太简单了:html, body {  height: 100%;  margin: 0;}
body {  -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;  display: -webkit-flex;  display: flex;}  请看,是不是很简单呀。  注:在IE11中要小心flexbox。 4、逗号分隔的列表,让HTML列表项看上去像一个真正的,用逗号分隔的列表:ul > li:not(:last-child)::after {  content: ",";}  对最后一个列表项使用 :not() 伪类。
  [网络技术CSS的几点高级技巧


网友跟帖 共0 条 [我也要发表回复]
版区推荐 >>
广告区