学前端的记录帖html+css b站千峰20版

其他 2021-01-30 17:31:59 阅读次数: 0
这次看的是加百利老师的视频。这位老师超级棒很用心，连视频都是有字幕的，而且里面的动画效果非常棒。

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：多了剩下的一半

先告一段落 学js去了

猜你喜欢

转载自blog.csdn.net/xiaozhazhazhazha/article/details/107552666
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022