完成一个版块

骑猪看日落 2021-05-16 20:37 411阅读 0赞

### 完成一个版块 ###

*  任务描述
 *  相关知识
 *   *  外阴影
     *  多行省略
     *  设置圆角
     *   *  代码文件

# 任务描述 #

本关任务：实现下面效果，包括外阴影，多行省略，圆角的设置。

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]

# 相关知识 #

为了完成本关任务，你需要掌握：  
1.外阴影，  
2.多行省略，  
3. 设置圆角。

## 外阴影 ##

下面是基本的html结构：

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]  
现在要左边，右边，下边都添加阴影。  
效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]  
该如何实现呢？

咱们先实现右边和下边的阴影。

如上面所说，添加如下代码：

.shadow{
       box-shadow: 10px 10px 10px #000;
    }

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]  
可以看出，这两边已经添加上了，还缺左边，修改上面代码：

.shadow{
       box-shadow: 10px 10px 10px #000, -10px 10px 10px #000;
    }

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]

这里已经实现了。

就 `box-shadow: 10px 10px 10px #000;`介绍一下`box-shadow`的属性值：

*  第一个参数表示水平阴影的位置，正数表示右边，负数表示左边；
 *  第二个参数表示垂直阴影的位置，正数表示下边，负数表示上边；
 *  第三个参数表示模糊距离，就是模糊的程度；
 *  第四个参数表示阴影的颜色。

三边阴影实现的想法： 右边和下边阴影很容易实现，就是左边阴影该怎么实现呢？ 再添加一组阴影，为左边和下边就可以了。

## 多行省略 ##

先讲单行省略。

在上面的结构中添加一行文字，结构如下：

<div class="shadow">
              <p>起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站</p>
         </div>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]

如何让它单行省略呢？ 添加如下代码：

.shadow p{
        overflow: hidden;       // 自动隐藏文字
        text-overflow:ellipsis; //文字隐藏后添加省略号
        white-space: nowrap;    //强制不换行
    }

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]

如何实现多行出现省略号呢？这里以3行为例，想法是设置好3行的高度，每一行的高度也就知道了， 在高度范围内隐藏并出现省略号。  
添加如下代码：

.shadow p{
        height: 72px;
        line-height: 24px;
        overflow: hidden;
        text-overflow:ellipsis; 
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 7]

比较难懂的是下面3个属性：

`display: -webkit-box;` 将对象作为弹性伸缩盒子模型显示 ；

\-`webkit-box-orient: vertical;` 设置或检索伸缩盒对象的子元素的排列方式；

\-`webkit-line-clamp: 3;` 限制在一个块元素显示的文本的行数。

这三个属性是结合在一起使用的。

## 设置圆角 ##

对于下面的效果，只实现圆角，`hover`效果相信大家是可以做出来的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 8]

这里用到了 `border-radius` 这个属性。

基本结构如下：

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 9]

要实现圆角效果，添加如下代码：

.radius{
      border-radius: 20px 20px 20px 20px;
    }

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 10]

这里介绍一下 `border-radius` 的属性值：

*  四个值分别代表四个圆角，顺序为顺时针方向，第一个为左上角，依次为右上角，右下角，左下角；
 *  如果四个角都一样，可以用一个角表示，所以上面可以简写为： `border-radius: 20px;`。

### 代码文件 ###

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title>少儿教育</title>
    		<style type="text/css"> * { margin: 0; padding: 0; } ul, li { list-style: none; } a { color: #888888; text-decoration: none; font-size: 16px; } body { background: #f7f7f7; position: relative; } .diary-block { width: 90%; height: 450px; padding: 0 40px; margin: 40px auto; } .diary-item { width: 26%; float: left; overflow: hidden; /*---------- Begin ----------*/ /*设置圆角为20px*/ border-radius:20px 20px 20px 20px; /*设置左边,右边,下边的外部阴影, 水平阴影和垂直阴影的值为10px,模糊距离为20px,颜色为#ccc */ box-shadow:10px 10px 20px #ccc,-10px 10px 20px #ccc; } /*---------- End ----------*/ .diary-item:not(:last-child) { margin-right: 7%; } .diary-item .diary-img { overflow: hidden; } .diary-item .diary-img img { width: 100%; height: 232px; transition: all .3s ease-in; } .diary-item .diary-img img:hover { transform-origin: center; transform: scale(1.1); } .diary-item .diary-details { height: 180px; padding: 10px 30px; color: #888; } .diary-item .diary-details p { line-height: 26px; } .diary-item .diary-details .diary-describe { height: 72px; /*-------- Begin --------*/ /*自动隐藏文字*/ overflow:hidden; /*文字隐藏后添加省略号*/ text-overflow:ellipsis; /*-------- End ----------*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin-top: 10px; line-height: 24px; } </style>
    	</head>
    
    	<body>
    
    		<div class="diary-block">
    			<div class="diary-item clearfix">
    				<div class="diary-img">
    					<img src="https://www.educoder.net/attachments/download/198656" alt="" />
    				</div>
    				<div class="diary-details">
    					<p>如何选择培训机构 ？</p>
    					<p>2017 06-15</p>
    					<p class="diary-describe">
    						起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
    					</p>
    				</div>
    			</div>
    			<div class="diary-item">
    				<div class="diary-img">
    					<img src="https://www.educoder.net/attachments/download/198657" alt="" />
    				</div>
    				<div class="diary-details">
    					<p>如何选择培训机构 ？</p>
    					<p>2017 06-15</p>
    					<p class="diary-describe">
    						起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
    					</p>
    				</div>
    			</div>
    			<div class="diary-item">
    				<div class="diary-img">
    					<img src="https://www.educoder.net/attachments/download/198658" alt="" />
    				</div>
    				<div class="diary-details">
    					<p>如何选择培训机构 ？</p>
    					<p>2017 06-15</p>
    					<p class="diary-describe">
    						起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
    					</p>
    				</div>
    			</div>
    		</div>
    
    	</body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20210516/18d57978f6274c4c9ebd95b7333a1879.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20210516/cb47d6e0e8aa4da8ae5d9b9e38d9e9f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]: /images/20210516/e5bd1ad951a7499f827ac4e3e4c003e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]: /images/20210516/455da072ce0a49be9f751b21fec44001.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]: /images/20210516/0f332c274d8242aeb007ad8a2b3763a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]: /images/20210516/fd0ac6579e234c74a506447601ff73e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]: /images/20210516/0b01f33be57f4a66a5b84e13ffbab378.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 7]: /images/20210516/933b6e6bb8574209b8809e709b024db0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 8]: /images/20210516/5a6e814bba7a41e4b6bc92d177081ad2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 9]: /images/20210516/5e272e142240438f86bcb9d0f6e77031.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 10]: /images/20210516/c6d36a8d93ec4b04b07d66d88338c763.png