7个学习资源
1，mdn
例如 选择器 mdn
2.CSS tricks
snippets：代码片段
搜索 center （居中）css tricks
image.png
block level 块级元素
.center-me {
margin:0 auto;
}
3阮一峰 张鑫旭
4.codrops films关于电影效果
5.css 魔法，css 2.1规范文档，3天看完
看到第18章，每天8小时
视频 制作导航
1.引入css
准备gitbash
body上面直接加属性 bgcolor= "grey"已经过时
内联样式
1.style属性写在标签上
style="background-color:grey"
<h1 style="text-align: center;“ color: red>
《张翼翔》三个字没有组成标签 就没有属性 没法写style，只能找个标签加style
2.style标签 一般写在head里面
/<head><style>body{bg-color:grey}</style></head>
3.新建style，a.css把所有样式放在css力
link标签的方式引入stylesheet（外部样式）
link的写法：<link rel="stylesheet" href="./a.css" >当前目录下的a.css
4.css里引入另一个css
@import url(./b.css);
内联 style属性
style 标签
外部文件css link
@import url（./b.css）
float
<ul style="list-style： none" class="clearfix">//list-style去除li的小圆点
image.png
//前面还有空白，默认样式引起的自带margin和padding
margin： 0；padding： 0”
//头像格式不一样解决floatbug的方法：加border
<ul style="border: 1px solid red;"
<li style="float:left; border: 1px solid green;">
ps:让每个东西并排就加上float，就一定会有bug
加入伪类
.clearfix::after{
content:'';
display:block;
clear:both;
}
把这个伪类写在浮动的父元素身上
<ul style="border: 1px solid red;" class="clearfix">
image.png
头像就下去了
所有子元素浮动float：left;，父元素添加clearfix
字体
用qq截图
严格匹配，中间不能加其他标签 topnavbar里必须有个nav。nav必须要有子元素ul
.topNavBar>nav>ul{
list-style: none;
margin: 0;
padding: 0;
border:1px solid red;
}
.topNavBar > nav > ul >li {
float: left;
border:1px solid green;
}
把子的大小改成12px
搜索font-size 默认16px
展示计算出来的样式
.topNavBar > nav >ul >li >a{
font-size: 12px;
}
字体颜色
tdn+ tab=text-decoration:none;删掉了下划线
如果不知道标签的取值，1.查mdn。2.删掉
image.png
间距
用qq截图
image.png
宽度34，高度16
左右两边各给17的外边距
边距写在li标签上
margin-left：17px；
margin-right：17px；
加粗
font-weight：bold；写在a标签
两部分div 平齐
a和nav都加上浮动
<div class="topNavBar clearfix>
<a class="logo" href="#" alt="logo" style="float:left">
<nav style="float:right;">
一左一右
鼠标悬停
.topNavBar > nav >ul . >li>a;hover{
border:1px solid red;
}
发现鼠标放上去会抖动
因此上来就有边框，然后悬浮变透明
.topNavBar > nav >ul >li >a{
font-size: 12px;
color: #B7B7B7;
text-decoration:none;
font-weight: bold;
border-bottom: 3px solid transparent;
//内边距 padding-top： 5px；
padding-bottom: 5px;
display:block;
}
高度
开发者工具
image.png
强制触发hover元素
网友评论