前端基础知识学习完成，对第一次页面制作后的感悟

目前对css和html的基本知识已经学习完毕，于是开始着手了简单的页面制作，实际应用环节。在一个星期内将一个小米页面做好之后对css布局和html也是有了更深刻的了解。因为小米比较简单，所以我也做了一个华为动态图片的效果，目前利用css和html是可以将有些动态做好的，而且我发现效果很不错。并且在写代码的过程中也是掌握了一些没有掌握的技巧。

一：对属性选择器的应用，由于在页面制作中，同一个部分的商品推荐等，它的布局都相同只不过内容不同，如果单独来对每一个盒子布局和设置内容的话需要写的代码太多，并且容易将自己搞混，所以这时候的属性选择器就非常好用了。比如你需要将多个盒子的布局写好，并且它们的布局都相同，你就可以将他们命名为含有相同部分的类名，具体代码如下

 <div class="note111">
            <a href=""><img src="../img/note11pro.webp" alt="note11pro">
                <p class="mi1">Redmi Note 11 Pro系列</p>
                <p class="mi2">Redmi Note 11 Pro系列</p>
                <p class="mi3">1799元起</p>
            </a>
        </div>

.sj div[class*="note11"]:hover{
    transform: translateY(-2px);
    box-shadow: 5px 5px 15px 1px #5F5750;
}
.sj div[class*="note11"] a{
    display: block;
    width: 100%;
    height: 100%;
}
.section2 .sj div[class*="note11"] img{
    width:200px;
    padding-left: 20px; ;
}

二：hover的应用，原先对hover的应用太简单了，只知道无脑hover，现在知道了其它的用法。

1：在：hover前加个空格是选择队该父级的所有子级生效

2：在：hover后加一个空格再跟类名，是鼠标经过父级时，该元素起作用

三：在排版布局方面，由于后期代码很长，所以一定要根据页面特性，把类名起好。不然太容易看晕。可能少了一个</div>就导致页面变形了（深有体会）

华为图片动态制作，是根据overflow hidden做的，利用transfor里的translate使盒子移动到外面，在hover之后再移回来就可以了

<a href="">
				<div class="p1">
					<img src="../huaweiphotosva9-pro-m.jpg"class="img1">
					<div class="mask">
					</div>
					<div class="yyqx">
						<span>产品</span>
						<h2>HUAWEI nova 9 Pro</h2>
						<span>精彩 由我摄定</span>
						<p>&nbsp;</p>
						<span>了解更多</span><i class="iconfonte icon-youjt"></i>
					</div>
				</div>
				</a>

.picture .p1{
	position: relative;
	margin-right: 28.5px;
	width: 780px;
	height: 380px;
}
.picture .mask{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.picture .mask:hover{
	background-image: linear-gradient( rgba(0,0,0,0)0%, rgba(0,0,0,.5)70%);
}
.picture .yyqx{
	position: absolute;
	left:20px;
	bottom: 20px;
	color: #fff;
	transform: translateY(50px);
	transition: all 0.5s;
}
.picture .p1:hover .yyqx{
	transform: translateY(-15px);
}
.picture a:hover img{
	transform: scale(1.1);
}

这两段代码就能实现华为的动态图片效果了，并不困难。