上节课最后讲到了css的套路图形~~~// css tricks 网站有很多套路的图形,而且有直接的代码 多看多模仿,多练习,日后工作中写css 就轻松很多了~~~!@@
继续写简历:
- 在main div区域,用了hr分割线,可是它不是全屏满长度~~ 因为受到float的影响,自动收缩了,怎么解决呢?//重写hr样式,让他自动适应宽度~~
- 当两个相邻的元素都用了margin,并且重叠,原本是要合并的,只要其中一方是display为inline-block 就不会合并
- 在调试之前用*{margin:0;padding:0;} 来去掉所有默认的样式,这样在调试css的时候就方便很多
遇到小难题了~~: 文字对称,左右结构//如何实现?因为在那部分文字里面,我们用了dl标签~~~,他们的子元素都只有一个父元素...
- 当用了dl的标签的时候,浮动的话,这些字都全部浮动在一行上面了,不是我们想要的对称结构//如何解决?用宽度50% 让他们自动换行,原本浮动在一行上面的字,只要设置宽度是50%,就起到了自动对称+换行//我们为了美观,用了三七分
做图标,我们要去iconfont.cn上找,用svg做,做icon也是一个重要知识点具体步骤
- 登录iconfont.cn 搜索相关的icon
- 用github账号登录,图标收藏在项目里面
- 注意一点:关于图标任何改动,只要他提示你更新了底子,你就要更新,否则引用是无效滴~~
- 跟着网站上的操作指南一步步完成
//我选择的是symbol写法
//在这个过程中,你会发现一个小细节:给的地址不写协议用//代替了~~这是为了避免日后网站升级出bug,干脆不写http 或者 https 直接用//
继续
- 然后调试logo icon
- svg代码是和css不太一样的,
- svg具体调试+ 圆形的hover显示如何实现,具体代码如下
.userCard > footer.media{
background:gray;
text-align: center;
}
.userCard > footer.media > a{
display: inline-block;
width: 40px;
line-height: 30px;
border-radius: 50%; //圆形
padding: 5px 0;//撑起高度宽度
margin: 16px ;//icon间隔
}
.userCard > footer.media > a:hover{
background:rgba(222, 45, 65, 1);
}
.userCard svg{
width: 30px;
height: 30px;
fill: white; //相当于css的color
vertical-align: top;//位置不对调整
}
继续
- 空标签,就是没有内容的标签,或者说没有子元素的标签//input 和 button的区别就体现出来了,input就是空元素,没有子元素的
- 伪类(不是真的元素,不就是为元素咯
):就是非空元素才有的,自带::after ::before 不过隐藏起来了// - 又出现一个工具网站了~~~略略略:generator//这个工具就是产生线性渐变的工具
- 做出了一个会动的太极图~~~ 代码在饥人谷,在css trick shape 也有
- codepen.io 上面有很多很好玩的东西~~
- css 太多太复杂,多写不一样的东西才是王道
- 有时候用定位不太适合的时候,可以用-margin
内联元素只有左右padding才有效果上下是无效的//除外内联元素居中要在他的父元素上用text-align:center; 还有老师说,让每个区块都独立起来,也就是div 不影响 div 说白了就是注意BFC~~~ 其中,这部分中,老师有意无意说了一下,不是block做不出什么鬼效果感觉他的意思是inline-block和block是有本质区别的,有点效果做不出来~~
做一个平滑的过渡阴影按钮
//阴影的效果,主要就是立体感
继续~~~
遇到小难题,做进度条,老师的做法是在一个div里面包裹一个div,父元素给高度,子元素高度100%,然后让两个背景色不一样,子元素宽度各取所需,这用就做出了一个进度不一样的进度条,难点在于 子元素进度条的右边距,因为实际效果是左边的子元素都有margin-right 而右边的没有?//
- 用nth-child(even) 真的6666啊~~~
- 也就是说实现了一个左右结构,分别靠左靠右,而且是在又padding的情况下
~~ - :单冒号就是伪类,::双冒号就是为元素
此外这里面还有个小难点就是宽度50%让元素自动对齐,可是要有padding,这就做不了对齐了,老师用了box-sizing 把盒模型更改了~~~
又有一个小难题:让class是skills下面的6个li 里面的被包裹的div的背景都不一样~~~
//难在于每个都不一样,要用到nth-child 可是坑的是,这个属性前必须接的是元素,写法要非常注意,最终的写法是// .skills li:nth-child(1) .progress{width: 90%;} 因为这个class为progress是被div包裹的~~~
// 其实有更简单的方法,在html标签里面,把每个li元素的style写死,这样做的办法更简单,
还有一点小细节:
为了让标题和ol里面的元素 分开来, 背景色只给ol>li 而且阴影也是,是的即使在同一个div里面也做到背景的不一样
继续往下做~~~
- 做了一个状态开
