pink老师HTML5+CSS3学习笔记 | DAY11

目录

1、案例分析-产品模块

2、案例分析2-快报模块

3、圆角边框

①语法

②原理

③圆形边框

④圆角矩形

4、盒子阴影（重点）

①语法

②属性值

③注意

5、文字阴影

①语法

②属性值

---

1、案例分析-产品模块

• 要求：仿下列小米官网产品模块

• css部分

/* css */
* {
	padding: 0;
	margin: 0;
}

.bigbox {
	background-color: #f5f5f5;
	height: 330px;
	width: 955px;
	margin: 100px auto;
	overflow: hidden;
}

.box:hover {
	box-shadow: 4px 4px 15px rgb(234, 232, 232);
}

.box {
	background-color: #ffffff;
	display: inline-block;
	width: 220px;
	height: 300px;
	margin: 15px 0px;
	margin-left: 15px;
}

.box img {
	width: 160px;
	margin: 15px 30px;
}

.name {
	color: black;
	text-align: center;
	font-size: 14px;
	font-weight: normal;
}

.details {
	color: gray;
	font-size: 8px;
	text-align: center;
	margin-top: 3px;
}

.price {
	color: #ff6700;
	text-align: center;
	margin-top: 12px;
	font-size: 14px;
}

s {
	color: gray;
}

• html部分

<!-- html -->
<div class="bigbox">
	<a href="#"><div class="box">
		<img src="images/img1.png" alt="">
		<h3 class="name">Redmi 12C</h3>
		<div class="details">高性能长续航，5000万像素超清双摄</div>
		<div class="price">699元起</div>
	</div></a><!-- 消除行内块元素之间的缝隙 
	--><a href="#"><div class="box">
		<img src="images/img2.png" alt="">
		<h3 class="name">Redmi K60</h3>
		<div class="details">骁龙8+| 2K 高光直屏|5500mAh+67...</div>
		<div class="price">2499元起</div>
	</div></a><!-- 消除行内块元素之间的缝隙 
	--><a href="#"><div class="box">
		<img src="images/img3.png" alt="">
		<h3 class="name">Redmi K60 Pro</h3>
		<div class="details">[第二代骁龙8] 狂暴引擎</div>
		<div class="price">3249元起 <s>3299元</s></div>
	</div></a><!-- 消除行内块元素之间的缝隙 
	--><a href="#"><div class="box">
		<img src="images/img4.png" alt="">
		<h3 class="name">Redmi Note 12 Pro 极速版</h3>
		<div class="details">高通骁龙778G，OLED柔性直屏+一亿</div>
		<div class="price">699元起</div>
	</div></a>
</div>

• 成果展示：

2、案例分析2-快报模块

• 要求：

/* css */
* {
	padding: 0px;
	margin: 0px;
	/* 清除列表的样式 */
	list-style: none;
}

.box {
	width: 300px;
	height: 176px;
	border: 1px solid #ccc;
	margin: 100px auto;
}

.box h3 {
	height: 40px;
	font-size: 16px;
	border-bottom: 1px dotted #ccc;
	line-height: 40px;
	font-weight: normal;
	/* 这里用padding而不用margin是因为，这里并没有设置width，所以用padding不会撑开盒子，而如果用margin则下面的点线也会一起往左移 */
	padding-left: 15px;
	color: #666
}

.box ul li a {
	color: #666;
	font-size: 14px;
	height: 25px;
	line-height: 25px;
	text-decoration: none;
}

.box ul li a:hover {
	text-decoration:underline;
}

.box ul {
	margin: 5px 9px;
}

<!-- html -->
<div class="box">
	<h3>品优购快报</h3>
	<ul>
		<li><a href="#">【特惠】 爆款耳机5折秒!</a></li>
		<li><a href="#">【特惠】 母亲节，健康好礼低至5折!</a></li>
		<li><a href="#">【特惠】 爆款耳机5折秒!</a></li>
		<li><a href="#">【特惠】 9.9元洗100张照片!</a></li>
		<li><a href="#">【特惠】 长虹智能空调立省1000</a></li>
	</ul>
</div>

•  成果展示：

3、圆角边框

• css3中新增的圆角边框样式；

①语法

/* 设置四个值分别表示左上角，右上角，右下角，左下角 */
/* 设置三个值分别表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值 */
/* 设置两个值分别表示左上角和右下角使用第一个数值，右上角和左下角使用第二个数值 */
/* 设置一个数值则表示四个角使用相同数值 */
border-radius: length;*/

/* 分开写： */
border-top-left-radius: length;    /* 左上 */
border-top-right-radius: length;    /* 左下 */
border-bottom-left-radius: length;    /* 右上 */
border-bottom-right-radius: length;    /*右下*/

②原理

• 圆与边框相交形成的圆角效果；
• 其中我们填写的length数值就是圆的半径；
• 所以length越大，圆角弧度越明显；

③圆形边框

• 当边框是正方形，并其边长等于圆的直径时，形成一个圆形的边框；
• 语法：

/* css */
.circle {
	width: 100px;
	height: 100px;
	background-color: #000;
	border-radius: 50px;
}

.circle2 {
	width: 100px;
	height: 100px;
	background-color: #000;
	/* 50%的含义为宽度的一半 */
	border-radius: 50%;
}
<!-- html -->
方法一：length=width*0.5
<div class="circle"></div>
方法二：border-radius: 50%
<div class="circle2"></div>

• 成果展示：

④圆角矩形

• length设置为高度的一半即可；
• 语法：

/* css */
.yjjuxing {
	width: 100px;
	height: 30px;
	background-color: #000;
	border-radius: 15px;
}

<!-- html -->
<div class="yjjuxing"></div>

• 成果展示：

4、盒子阴影（重点）

• CSS3中新增了盒子阴影

①语法

box-shadow: h-shadow v-shadow blur spread color inset;

②属性值

• h-shadow：必须属性；水平阴影的位置，允许负值；
• v-shadow：必须属性；垂直阴影的位置，允许负值；
• blur：模糊距离；
• spread：阴影的尺寸；
• color：阴影的颜色；
• inset：将外部阴影(outset) 改为内部阴影；

③注意

• 默认为外阴影（outset），但不允许填写这个；
• 盒子阴影不占用空间，不影响排列；

5、文字阴影

①语法

text-shadow: h-shadow v-shadow blur color;

②属性值

• h-shadow：必须属性；水平阴影的位置，允许负值；
• v-shadow：必须属性；垂直阴影的位置，允许负值；
• blur：模糊距离；
• color：阴影的颜色；