尚硅谷鸿蒙架构尚硅谷前端2021

转载

mob64ca140f9cec 2023-09-18 10:11:05

文章标签 尚硅谷鸿蒙架构前端 css html 外边距 文章分类 架构后端开发

尚硅谷前端视频总结(一)

1、reset.css清空浏览器默认样式

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

2、水平布局

左外边距+左边框+左内边距+内容+右内边距+右边框+右外边距=父元素宽度

属性设置为auto，则将自动调整此属性宽度，否则优先调整右外边距

3、.clearfix

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/clearDeafult.css">
    <style>
        .box1{
            width: 200px;
            
            background-color: #bfc;
        }

        .box2{
            margin-top: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        /* 同时解决高度塌陷和外边距重叠 */
        .clearfix::before,.clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
        
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>

4、定位position

absolute绝对定位脱离文档流并参照上一个position属性不是static的元素，否则参照根元素body

relative相对定位不脱离文档流参照自己本身的位置进行偏移

fixed固定定位脱离文档流并参照浏览器视口进行定位

sticky粘滞定位实现吸顶效果兼容性不好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: fixed;
            right: 50px;
            top: 50px;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .inner{
            width: 150px;
            height: 150px;
            background-color: orange;
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .inner2{
            width: 100px;
            height: 100px;
            background-color: rgb(0, 26, 255);
            position: absolute;
            right:0;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">
        <div class="inner">
            <div class="inner2"></div>
        </div>
    </div>
    <div class="box3"></div>
</body>
</html>

5、背景图片

background-size

/* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

background-clip

/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;



border-box
背景延伸至边框外沿（但是在边框下层）。
padding-box
背景延伸至内边距（padding）外沿。不会绘制到边框处。
content-box
背景被裁剪至内容区（content box）外沿。
text 
背景被裁剪成文字的前景色

6、轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/demo1/css/clearDeafult.css">
    <style>
        img{
            width:300px;
            height: 300px;
            position: absolute;
        }
        .lunbo-box{
            position: relative;
            width: 300px;
            height: 300px;
            margin: 0 auto;
            
        }
        .item::before{
            
            content: '';
            border-radius:10px;
            width: 10px;
            height: 10px;
            background-color: gray;
            display: table;
            border: 2px solid gray;

            
        }
        .dont{
            position:absolute;
            list-style: none;
            z-index:999;
            bottom: 10px;
            left: 20px;
        }
        .item-active::before{
            background-color: white;
            background-clip: content-box;
        }
        .dont li{
            display: inline-block;
            
        }
    </style>
</head>
<body>
    <div class="lunbo-box">
        <img src="./img/1.jpg" alt="" srcset="">
        <img src="./img/2.jpg" alt="" srcset="">
        <img src="./img/3.jpg" alt="" srcset="">
        <img src="./img/1.jpg" alt="" srcset="">
        <img src="./img/2.jpg" alt="" srcset="">
        <img src="./img/3.jpg" alt="" srcset="">
        <ul class="dont">
            <li><a href="javascript:void(0)"><div class="item" onclick="change(0)"></div></a></li>
            <li><a href="javascript:void(0)"><div class="item" onclick="change(1)"></div></a></li>
            <li><a href="javascript:void(0)"><div class="item" onclick="change(2)"></div></a></li>
            <li><a href="javascript:void(0)"><div class="item" onclick="change(3)"></div></a></li>
            <li><a href="javascript:void(0)"><div class="item" onclick="change(4)"></div></a></li>
            <li><a href="javascript:void(0)"><div class="item" onclick="change(5)"></div></a></li>
            <li><a href="javascript:void(0)"><div class="item" onclick="change(6)"></div></a></li>
        </ul>
    </div>
    <script>
        let imgarray=document.querySelectorAll('img');
        let liarray=document.querySelectorAll('.item');
        var count=0;

        function change(id){
            count=id;
            
            if(count==6){
                count=0;
            }
            for(let [index,img] of imgarray.entries()){
                    if(count!=index){
                        img.style.zIndex=0;
                        liarray[index].classList.remove('item-active');
                    }
            }
            
            imgarray[count].style.zIndex=1;

            liarray[count].classList.add('item-active');
            count++;
       
        }
        setInterval(() => {
            change(count);
            
        }, 2000);

    </script>
</body>
</html>

7、综合运用——电影卡片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/clearDeafult.css">
    <style>
        .outer{
            
            border-radius: 5px;
            margin: 2px auto;
            width: 240px;
            background-color: #232331;
        }
        .innerimg img{
            vertical-align: middle;
            width: 240px;
            height: 130px;
            

        }
        h1{
            color: white;
            margin-bottom: 6px;

        }
        .sum{
            color: rgba(230,233,240,.45);
            overflow:hidden; 

            text-overflow:ellipsis;

            display:-webkit-box; 

            -webkit-box-orient:vertical;

            -webkit-line-clamp:2;
            font-size: 12px;
            line-height: 20px;
            margin-bottom: 12px;

        }
        .innertext{
           padding:  8px 12px 12px 12px;
        }
        .item li{
            display: inline-block;
        }
        .item li div{
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            width: 40px;
            height: 20px;
            padding: 2px;
            border-radius:20px;
            background-color:#343441 ;
            color:#7B746C ;
            margin-bottom: 12px;
            
        }
        .btn{
            height: 33px;
            width: 80px;
            background-image: url('./img/icon.png');
            background-size: 133px auto;
            background-position: 0 0;
            text-align: center;
            line-height: 28px;
            font-size: 12px;
            float: left;
        }
        a{
            text-decoration: none;
            color: white;
        }
        .btn:hover{
            background-position:0 -38px;
            border-color:#ffb821
            

        }
        .clearfix::before,.clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
        .icon{
            
            float: right;
        }
        .i1{
            display: inline-block;
            width: 16px;
            height: 16px;
            background-image: url(./img/icon.png);
            background-position: 0 -76px;
            background-size: 133px auto;
            
        }
        .i1:hover{
            background-position: -21px -76px;
        }
       
        .icon span{
            margin-left: 15px;
        }
        .i2{
            display: inline-block;
           
            width: 16px;
            height: 16px;
            background-image: url(./img/icon.png);
            background-position: -63px -76px;
            background-size: 133px auto;
            
        }
        .i2:hover{
            background-position:-84px -76px;
        }

        .bottom{
            position: relative;
            overflow: hidden;
        }
        .icon{
            position: absolute;
            right: 0;
            bottom: 5px;
        }
        h1 a:hover{
            color: #ff7221;
        }

    </style>
</head>
<body>
    <div class="outer">
        <div class="innerimg"> 
            <img src="./img/0.webp" alt=""> 
        </div>
        <div class="innertext clearfix">
            <h1><a href="#"> 雪中悍刀行</a></h1>
            <ul class="item">
                <li><div> 2021</div></li>
                <li><div> 古装</div></li>
                <li><div> 张若昀</div></li>
                <li><div> 武侠</div></li>
            </ul>
            <div class="sum">
                <span>简介：</span>
                <span>为逃避做隋珠公主的驸马，“天下第一纨绔”的北椋世子徐凤年在父亲徐骁的安排下褪去锦衣华服，初进江湖，和马夫老黄苦中作乐，结识了众多江湖人士。三年游历归来，韬光养晦的徐凤年洗去浮尘，始终不想按照老爹铺好的人生轨道走，更不愿接手北椋，因为成为北椋王，就意味着要成为一个没有感情的孤家寡人。但当徐凤年雪中冠礼，得知一个个至亲离他而去，为他牺牲，经历人生的至暗时刻后，终于下定决心，要当一个和父亲完全不一样的北椋王，再难也不能妥协，遂苦学武艺，凭借赤子之心和勤学苦练，成为武者，而后率丫鬟姜泥、剑仙李淳罡等护卫，二进江湖，用悍刀闹得武林势力鸡飞狗跳，看似按老爹的套路下棋，实则踏雪独闯，力抗命运安排，渐渐培植了愿为自己效忠的武当、江南文坛、西楚、徽山轩辕等武林新势力，也通过种种线索发现母亲吴素之死的真相。漫天飞雪，徐凤年一人一刀一腔仇，用自己的身躯扛起北椋战旗，最终长成为北椋王合格的接班人。</span>
            </div>
            <div class="bottom">
                <div class="btn">
                    <a href="#">
                        立即观看
                    </a>
                    
                </div>
                <div class="icon">
                    <a href="#"><span class="i1"></span></a>
                    <a href="#"><span class="i2"></span></a>
                    
                </div>
            </div>

        </div>
        
    </div>
    
</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。