css3信息获取方法
- 文档搜索:Google css spec;
- Google: 关键词 MDN;
- css tricks成熟css代码块sinppets;
- Google: center css tricks
- Google:阮一峰 css
- 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;
}
复制代码
- 所有的子元素浮动
- 父类添加class="clearfix"
- 背下这三行代码
清除抖动and下部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;
}
复制代码
最终效果
开发者工具强制触发hover状态
触发之后左侧会出现小黄点
li没有包裹a
在a的css中使用display:block;
怎样让左右两部分对齐
先让两部分行高相同,然后让其中线对齐。