HTML5&CSS3_移动端day01


如有错误,各位大佬帮忙在评论区指正,感谢~~~

学习内容

174

字体图标

175

案例购物车

1-通过一个大标签包含,里面通过三个标签分别实现购物车图像,文字和小箭头(因为三个内容需要分别设置样式,如果通过一个标签写完,后面不好调,再者后期配合后端,必须有单独标签才能改变数据)

2-引入阿里图标库的css,class:iconfint必须给,因为定义了字体,然后要使用哪个字体图标,再引入这个字体图标的class样式

<!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="../04-综合案例/iconfont/iconfont.css">
    <style>
        .orange{
            color: orange;
        }
        *{
            margin: 0px;
            padding: 0px;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-cart-Empty-fill ozrange">
                    </span>
                    <span>购物车</span>
                    <span class="iconfont icon-arrow-down"></span>
                </a>
            </li>
        </ul>
    </div>
    
</body>
</html>

iconfont平台没有想要的字体图标怎么办呢?

1-可以直接使用图片,或者背景图精灵图代替

2-在iconfont网站上传想要的图标,再下载使用

www.iconfont.cn

176

平面转换

transition过渡,tansform使改变; 使改观; 使转换;translate翻译; 译; 被翻译; 被译成; (使)转变,变为; (以某种方式)理解;

177

注意x正数往右,y正数是往下

位移

178

实现定位盒子居中

众所周知盒子定位后,无法再用margin:auto居中,那么怎么办呢

179

1-使用绝对定位的left,top,right,bottom去调,一般设置为50%,但是这个50%调完之后,只是盒子的左上角在盒子的中单,并没有真正居中,于是还需要用到margin-left/right/top/bottom去调。

当需求盒子大小经常改变,或者盒子大小的50%是一个小数,这种方法就十分麻烦,所以有了第二种方法

2-把后面通过margin调整,改为通过transform:translate(x,y)调整,因为translate的50%总是自身的一半。

双开门案例

180

疑问:伪元素不是分别在class:box的前后吗,为啥这个图片会覆盖在class:box的上面呢?

原因:没有理解伪元素::after/before,只知道会在原box的前后加入内容,但是没明白内容结构(再提醒,伪元素必须和content一起用)

181

如图:加入伪元素后,它们是在原盒子p里面构建了两个行内元素,这个伪元素不是在需要加内容的box的前面后面,而是在box的里面,只是在当前box内容的前后。

旋转

rotate旋转

182
transition过渡配合使用,不然转了一圈没反应,其实转了但是你看不到。

deg为degree的缩写

修改旋转点(转换中心点)

事实上改变的是转换中心点,位移和渐变也能使用。

origin源头,起源,源点

当作复合属性来写。transform-origin:right bottom;就是以右下那个点做为旋转点,right和bottom之间用空格隔开,不是逗号。

183

多重转换(即位移又旋转等)

当作复合属性来学,用空格隔开

184

185

注意

1-要实现轮胎变旋转变位移,需要使用复合属性,transform:translate() rotate()

2-必须位移写在前面,因为如果旋转在前面,会改变平面坐标轴方向,位移方向就会发生改变

3-不能写一个位移,下面再下一个旋转,因为css具有层叠性,这样就只旋转不位移,因为旋转的css把位移的覆盖了

缩放

186

单纯通过width:150%放大是从左上角放大,如果需要从中心放大,需要使用transform:scale(缩放倍数)

渐变

linear-gradient linear线性的,gradient坡度斜度 (温度、压力等的)变化率,梯度变化曲线;

意思就是逐渐的慢慢变化

187

属性名与设置背景图片相同为background-image,里面多个颜色用逗号隔开

现在企业一般使用透明到半透明,而不会像上面一样,很明显的颜色渐变,不美观。

188

transparent透明的,清澈的

display:none的隐藏,不支持动画过渡渐隐,只会一瞬间消失,opacity可以渐隐。

padding的设置也会受到tansition过渡的影响。

一个元素可以同时定位和浮动

css书写,先写浮动定位,再写盒子的margin等,再下文字样式

z-index调整层级,不设置的话,标准流<浮动<定位第三层,但是它们默认为0,想谁在上面,给这个盒子设置z-index:1;即可

案例华为

189

我的代码

缺点:

1-没写功能注释

2-结构混乱,没有遵守从外到内,从上到下,以及css的书写规则

3-选择器选择混乱,虽然能实现当前需求,但是维护与产品迭代起来非常困难,因为后续更新选择器可能选中了不需要的标签,或者选不中需要的标签。

<!DOCTYPE html>
<html lang="zh-CN">
<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>华为案例</title>
    <style>
    </style>
    <link rel="stylesheet" href="./huawei.css">
</head>
<body>
    <div class="banxing">
        <ul>
            <li>
                <a href="#">
                    <img src="../04-综合案例/images/huawei1.jpeg" alt="">
                    <div class="txt">
                        <h5>
                            行业洞察
                        </h5>
                        <h4>迈向人工智能2030年</h4>
                        <p>
                            <span>了解更多</span>
                        </p>
                    
                
                    </div>
                    <div class="mask"></div>
            </a>
            </li>   
            <li><a href="#">
                    <img src="../04-综合案例/images/huawei1.jpeg" alt="">
                    <div class="txt">
                        <h5>
                            行业洞察
                        </h5>
                        <h4>迈向人工智能2030年</h4>
                        <p>
                            <span>了解更多</span>
                        </p>
                        
                    </div>
                </a>
            </li>
            <li><a href="#">
                    <img src="../04-综合案例/images/huawei1.jpeg" alt="">
                    <div class="txt">
                        <h5>
                            行业洞察
                        </h5>
                        <h4>迈向人工智能2030年</h4>
                        <p>
                            <span>了解更多</span>
                        </p>
                    </div>
                
                 </a>
             </li>
        </ul>

    </div>
    
</body>
</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: aliceblue;
}

img {
    width: 100%;
    vertical-align: middle;
}
.banxing{
    margin: 20px auto;
    height: 400px;
    width: 1000px;
}
.banxing img{
    width: auto;
    height: 200px;
    transition: all .5s;
}
.banxing li{
    float: left;
    position: relative;
    margin-right: 49px;
    transition: transform .5s;
    overflow: hidden;
}
.banxing h4{
    margin-top: 5px;
    margin-bottom: 30px;
    margin-left: 20px;
}
.banxing h5
{
    margin-left: 20px;
}
.banxing p span{
    margin-left: 20px;
}
.txt{
    position: absolute;
    left: 0px;
    bottom: -50px;
    transition: all .5s;
    z-index: 2;

}
.banxing li:hover .mask{
    opacity: 1;
}
.banxing li:hover .txt{
    transform: translateY(-50px)

}
.banxing li:hover img{
    transform: scale(1.1);
}
.mask{

    height: 200px;
    width: 283px;
    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,.6)
    );
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: all .5s;
}

标准代码

<!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>华为新闻</title>
    <link rel="stylesheet" href="./css/demo.css">
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/product.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>产品</h4>
                        <h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>

                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei1.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>行业洞察</h4>
                        <h5>迈向智能世界2030</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>
                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei2.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>《ICT新视界》刊首语</h4>
                        <h5>笃行致远,共建具有获得感、幸福感、安全感的智慧城市</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>
                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    vertical-align: middle;
}

.box {
    width: 1110px;
    height: 247px;
    margin: 20px auto;
    /* background-color: pink; */
}

.box li {
    position: relative;
    float: left;
    width: 350px;
    height: 247px;
    margin-right: 30px;
    overflow: hidden;
}

.box li:last-child {
    margin-right: 0;
}

.box .txt {
    position: absolute;
    left: 0;
    bottom: -50px;
    width: 350px;
    height: auto;
    padding: 20px 30px;
    z-index: 1;
    color: #fff;
    transition: transform .5s;
    /* transition: all .5s; */
}

.box .txt h4 {
    font-size: 14px;
    font-weight: 400;
    line-height: 2em;
    color: #fff;
}

.box .txt h5 {
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 1.5em;
    color: #fff;
}

.box .txt p {
    color: #fff;
    font-size: 14px;
}

.box .txt p .iconfont {
    color: #c7000b;
    vertical-align: middle;
    font-size: 20px;
    font-weight: 700;
}

/* 1. 渐变背景的盒子 */
.box .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 350px;
    height: 247px;
    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,.6)
    );
    opacity: 0;
    transition: all .5s;
}

/* 2. hover效果 */
/* 2.1 图片缩放 */
.box li .pic img {
    transition: all .5s;
}
.box li:hover .pic img {
    transform: scale(1.2);
}


/* 2.2 渐变背景显示 */
.box li:hover .mask {
    opacity: 1;
}

/* 2.3 文字向上移动 */
.box li:hover .txt {
    transform: translateY(-50px);
}

文章作者: 瑾年
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 瑾年 !
评论
  目录