【转】css套路学习(一)

css3信息获取方法

  1. 文档搜索:Google css spec;
  2. Google: 关键词 MDN;
  3. css tricks成熟css代码块sinppets;
  4. Google: center css tricks
  5. Google:阮一峰 css
  6. codrops炫酷css效果

引入css的方式

    <link rel="stylesheet" href="./css/style.css">

清除浮动

<ul style="list-style:none; margin:0; padding:0" class="clearfix">


.clearfix::after{
    content: "";
    display: block;
    clear:both;
}
  1. 所有的子元素浮动
  2. 父类添加class="clearfix"
  3. 背下这三行代码

清除抖动and下部hover出下划线

img

当鼠标hover时会有抖动,因为多加了边框

解决方法:

提前设置一个边框但是为透明的

.topNavBar>nav>ul>li>a{
    font-size: 12px;
    color:rgb(204,206,209);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid transparent;

}
.topNavBar>nav>ul>li>a:hover{
    border-bottom: 1px solid red;
}

最终效果

img

开发者工具强制触发hover状态

img

触发之后左侧会出现小黄点

li没有包裹a

在a的css中使用display:block;

怎样让左右两部分对齐

先让两部分行高相同,然后让其中线对齐。

img

原文:https://juejin.cn/post/6844903794422054925

posted @ 2022-03-20 11:19  tc310  阅读(28)  评论(0编辑  收藏  举报