2020.7.24
40文件图标的添加(伪类选择器和属性选择器)
要在超链接后面添加图片 就要用到精灵图,先把背景换成图片 图片不能重复 再把图片挪到最右边 这时候与最后一个字重合 需要用padding-right来增大右边的范围盛放图片。
如果要选中超链接的话要这样写
但是这样写的话就会选中所有的超链接
想让图标挪到文字的后面
但是有弊端,如果在第三行新插入一个新的,就会导致后面的全部乱掉
这时候有一个更适合的选择器叫做属性选择器
可以根据不同的后缀名来显示不同的图标
无论在哪里新增,新增多少只要后缀是对的,图标就一定是对的
p41 BFC
父元素套上子元素,想让子元素与父元素有间距,在子元素加上边距,会发现
然而左右边距是不会合并的
p42 imdb排行榜
p43 阴影效果
复选框是单标签的所以无法包裹其他元素 这时需要用到伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
input[type="checkbox"]{
-webkit-appearance: none ;
margin: 50px;
height: 70px;
width: 150px;
background: #0f0;
border: 10px solid #c1c1c1;
border-radius: 30px;
background: #888;
position: relative;
box-shadow: 0 0 10px 1px #3f3f3f inset;
}
input[type="checkbox"]::after{
content: "";
width: 60px;
height: 60px;
display: block;
position: absolute;
left: -5px;
top: -5px;
border-radius: 30px;
background: gray;
background: linear-gradient(to bottom ,#d3d3d3,#9e9e9e);
box-shadow: 0px 2px 2px 0px #eee inset,2px 1px 2px 0px #333;
}
</style>
</head>
<body>
<input type="checkbox">
</body>
</html>
p44 过渡效果
选中状态时背景颜色发生变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
input[type="checkbox"]{
-webkit-appearance: none ;
margin: 50px;
height: 70px;
width: 170px;
background: #0f0;
border: 10px solid #c1c1c1;
border-radius: 30px;
background: #888;
position: relative;
box-shadow: 0 0 10px 1px #3f3f3f inset;
transition: 0.6s;
}
input[type="checkbox"]::after{
content: "";
width: 60px;
height: 60px;
display: block;
position: absolute;
left: -5px;
top: -5px;
border-radius: 30px;
background: gray;
background: linear-gradient(to bottom ,#d3d3d3,#9e9e9e);
box-shadow: 0px 2px 2px 0px #eee inset,2px 1px 2px 0px #333;
transition: 0.6s;
}
input[type="checkbox"]:checked{
background-color: #6fb500;
}
input[type="checkbox"]:checked::after{
left: 95px;
}
</style>
</head>
<body>
<input type="checkbox">
</body>
</html>
p45 字体图标
2020.7.25
p46 transform的位移和效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0; padding: 0;}
p{
color: rosybrown;
}
h2{
color: rosybrown;
}
.box{
height: 225px;
width: 225px;
margin: 143px 110px;
position: relative;
overflow: hidden;
}
.box > *{
position: absolute;
top: 0;
left: 0;
}
.box p:nth-of-type(1){
transform: translateX(-150px) translateY(44px);
transition: 1s 0.2s;
}
.box p:nth-of-type(2){
transform: translateX(-110px) translateY(92px);
transition: 1s 0.3s;
}
.box p:nth-of-type(3){
transition: 1s 0.4s;
transform: translateX(-110px) translateY(140px);
}
h2{
transform: translateX(10px) translateY(170px);
}
.box:hover p:nth-of-type(1){
transform: translateX(5px) translateY(44px);
}
.box:hover p:nth-of-type(2){
transform: translateX(5px) translateY(92px);
}
.box:hover p:nth-of-type(3){
transform: translateX(5px) translateY(140px);
}
</style>
</head>
<body>
<div class="box">
<img src="./2.png" >
<h2>哈哈哈</h2>
<p class="p1">birthday:2020.2.22</p>
<p class="p2">height:180cm</p>
<p class="p3">weight:50kg</p>
</div>
</body>
</html>
p47 transform的缩放和旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0; padding: 0;}
p{
color: rosybrown;
}
h2{
color: rosybrown;
}
.box{
height: 225px;
width: 225px;
margin: 143px 110px;
position: relative;
overflow: hidden;
}
.box > *{
position: absolute;
top: 0;
left: 0;
transition: 1s;
}
.box p:nth-of-type(1){
transform: translateX(-150px) translateY(44px);
transition: 1s 0.2s;
}
.box p:nth-of-type(2){
transform: translateX(-110px) translateY(92px);
transition: 1s 0.3s;
}
.box p:nth-of-type(3){
transition: 1s 0.4s;
transform: translateX(-110px) translateY(140px);
}
h2{
transform: translateX(10px) translateY(170px);
}
.box:hover p:nth-of-type(1){
transform: translateX(5px) translateY(44px);
}
.box:hover p:nth-of-type(2){
transform: translateX(5px) translateY(92px);
}
.box:hover p:nth-of-type(3){
transform: translateX(5px) translateY(140px);
}
.box:hover img{
transform: scale(1.3) rotateZ(5deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./2.png" >
<h2>哈哈哈</h2>
<p class="p1">birthday:2020.2.22</p>
<p class="p2">height:180cm</p>
<p class="p3">weight:50kg</p>
</div>
</body>
</html>
p48 透视与3d
一个完整的3d立方体
https://www.cnblogs.com/zhengrunlin/p/5936469.html
2020.7.26
p50 响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
cursor: pointer;
}
header{
height: 50px;width: 100%;
background: rgba(0,0,0, .7);
position: fixed;
}
header .menu{
float: right;
margin-right: 20px;
color: white;
font-size: 18px;
line-height: 50px;
display: none;
}
header .menu .nav-list{
width: 100%; position: fixed;
top: 50px; left: 0;
}
header .menu .nav-list a{
display: block;
width: 100%;
height: 50px;
background: rgba(0,0,0, .7);
color: white;
text-align: center;
border-bottom: 1px dotted white;
}
header .menu{
cursor: pointer;}
header .menu:hover .nav-list{
display: block;
}
header img.logo{
float: left;height: 50px;; margin-left: 30px;
}
header .nav-list{
display: block;
float: right;
margin-right: 20px;
}
header .nav-list a{
color: white;
font-size: 18px;
line-height: 50px;
float: left;
margin-right: 20px;
}
.banner{
background: url(./psc.jpg);
height: 400px;
width:100%;
margin-bottom: 20px;
}
.product-list li{
box-sizing: border-box;
width: 20%;
float: left;
padding: 0 10px 20px;
}
.product-list li img{
width: 100%;border-radius: 4px;
box-shadow: 0 0 6px 0 #666;
}
@media screen and (max-width:1024px){
.product-list li{
width: 25%;
}
}
@media screen and (max-width:768px){
.product-list li{
width: 33.33%
}
header .menu{
display: block;
}
header .nav-list{
display: none;
}
}
@media screen and (max-width:640px){
.product-list li{
width: 50%;
}
}
</style>
</head>
<body>
<header>
<div class="menu">
menu
<nav class="nav-list">
<a href="">文章</a>
<a href="">素材</a>
<a href="">活动</a>
<a href="">素材</a>
<a href="">文章</a>
<a href="">活动</a>
</nav>
</div>
<img src="./未标题-3_03.png"class="logo">
<nav class="nav-list">
<a href="">文章</a>
<a href="">素材</a>
<a href="">活动</a>
<a href="">素材</a>
<a href="">文章</a>
<a href="">活动</a>
</nav>
</header>
<div class="banner"></div>
<ul class="product-list">
<li>
<div>
<img src="./939528_114757003354_2.jpg" alt="">
</div>
<p>迷微型摄影展</p>
<p>
<span>2020-12-12</span>
<span>作者:哈哈哈</span>
</p>
</li>
<li>
<div>
<img src="./939528_114757003354_2.jpg" alt="">
</div>
<p>迷微型摄影展</p>
<p>
<span>2020-12-12</span>
<span>作者:哈哈哈</span>
</p>
</li>
<li>
<div>
<img src="./939528_114757003354_2.jpg" alt="">
</div>
<p>迷微型摄影展</p>
<p>
<span>2020-12-12</span>
<span>作者:哈哈哈</span>
</p>
</li>
<li>
<div>
<img src="./939528_114757003354_2.jpg" alt="">
</div>
<p>迷微型摄影展</p>
<p>
<span>2020-12-12</span>
<span>作者:哈哈哈</span>
</p>
</li>
<li>
<div>
<img src="./939528_114757003354_2.jpg" alt="">
</div>
<p>迷微型摄影展</p>
<p>
<span>2020-12-12</span>
<span>作者:哈哈哈</span>
</p>
</li>
<li>
<div>
<img src="./939528_114757003354_2.jpg" alt="">
</div>
<p>迷微型摄影展</p>
<p>
<span>2020-12-12</span>
<span>作者:哈哈哈</span>
</p>
</li>
</ul>
</body>
</html>
p51 知识补充 彩色标签
阴影
p52 移动端和pc端的差别
p53 移动端网页适配
p54 帧动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding: 100px;
}
span{
display: inline-block;
}
.heartleft, .heartright{
width: 50px;
height: 80px;
background-color: red;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.heartleft{
transform: rotateZ(-45deg);
}
.heartright{
transform: translateX(-28px) rotateZ(45deg);
}
.heart{
animation: beat 12s infinite;
}
@keyframes beat{
30%{
transform: scale(1.3);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
<span class="heart">
<span class="heartleft"></span><span class="heartright"></span>
</span>
</body>
</html>
p55 知识补充
p56 flex布局方式上
p57 flex布局方式下
对于块元素水平垂直居中
p58 移动端布局
案例
2020.7.27
录了视频
https://www.bilibili.com/video/BV1pK411J7og 电影排行榜
https://www.bilibili.com/video/BV1t5411a7XR 按钮
2020.7.28
录了视频https://www.bilibili.com/video/BV1ya4y1E77x 定位
零碎的知识点
p116 box-sizing的用法
display:none与visibility:hidden区别
mask遮罩效果
渐变
看不到渐变效果
2020.7.29
css3 样式的继承
文字相关的样式可以被继承,布局相关的不能被继承 但是可以用inherit
ps工具
快捷键:ctrl+r显示隐藏标尺(拖拽参考线用的) alt+滚轮 对图片放大缩小
微调:剪少了用alt 多了用shift
选中完毕后 crtl+c复制 ctrl+n新建 ctrl+v在新建的里面粘贴 存储为web所有格式
切片工具也行
psd切图功能
文件->生成->图像资源 点一下图标换个名字(XXX.png)就能存到电脑
p151 pc端布局
通栏:自适应浏览器宽度
版心:固定一个宽度,让容器居中
flex
学到一个一个便捷写法
但是多写几个子元素发现他不会溢出,而是做了适配
宽度达到最小值就会溢出
这时候就需要flex wrap
关于第一个,值越大的越往后
flex-grow:1 占满剩下的
0.5:多了剩下的一半