html网页综合项目实战

第1关：header——头部

想要让它们排成一排，这里就需要用到float属性。 float 属性定义元素在哪个方向浮动，我们这里用到的是左边，添加代码如下：

1. .head li{
2. float: left;
3. }

现在离成功已经不远了，没实现的是上下垂直居中和每个li标签之间左右间距，添加代码如下：

1. .head li{
2. float: left;
3. padding: 0 20px; /*左右间距*/
4. line-height:70px; /*上下垂直居中，70px是父元素的高度*/

鼠标滑过时的效果。这里用css的hover选择器，hover选择器在鼠标滑过该元素时添加的特殊样式。添加的代码如下：

1. .head li:hover{
2. color: orange;
3. text-decoration: underline;
4. }

	
		
		
		
	

	
		

			

				
				

					

						首页
					
					

						班级设置
					
					

						师资团队
					
					

						童画日记
					
					

						关于我们
					
					

						联系我们
					
				
			
		
	

第2关：用Swiper实现轮播图

搭建Swiper环境

1.下载插件

进入Swiper官网 下载Swiper - Swiper中文网，只需要下载swiper-4.2.2.min.js和swiper-4.2.2.min.css就可以了。

2.引入插件

    ...
    


    ...
    

3.HTML结构

    

        
Slide 1
        
Slide 2
        
Slide 3
    
    
    

    
    

    

• 这里的HTML结构是固定的，不可以随便更改；

• 这里的类是固定的，外面最大的容器类为swiper-container，放图片的容器类为swiper-wrapper，放图片的类为swiper-slide。

4.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {
width: 600px;
height: 300px;
}

5.初始化Swiper：最好是挨着标签

这里简单的介绍一下基本的几个参数：

• direction: 'horizontal'，表示水平滑动，垂直滑动是 direction: vertical。默认是水平滑动；

• loop: true，表示最后一张图片会和第一张图片连起来播放，就像循环播放一样； loop: false，表示最后一张图片是终点；

• autoplay: 3000， 表示自动切换的时间间隔，3000表示3秒；

• speed: 1000， 表示滑动从开始到结束的时间，1000表示1秒

第3关：用CSS3实现移动效果

transform属性

下面是基本的html结构，：

2. 向上移动

咱们先实现往上移动200px，用到了 transform属性。添加如下代码：

1. .move:hover{
2. border: 2px solid #000;
3. }
4. .move:hover p{ /*注意是给 p 添加的*/
5. transform : translate(0, -200px);
6. }

基本用法：

transform: translate(x,y);

参数详解：

• x 表示左右移动，正数表示向右移动，负数表示向左移动；

• y 表示上下移动，正数表示向下移动，负数表示向上移动。

transition属性

基本效果已经实现了，就是有点突兀，如何平滑的过渡呢？这里用到了transition属性。

添加如下代码：

1. .move p{
2. transition: all 1s linear;
3. }

这就已经实现了。这里解释一下上面的参数：

• all指所有属性，包括width，height；

• 1s指过渡效果花费的时间；

• linear指过渡效果的时间曲线，这里是平滑过渡。默认是 "ease"，先慢再快最后慢。

	
		
		
		
	

	
		
			

				

					

						
						
儿童装饰画
						
装饰
					
				
				

					

						
						
趣味素描
						
sketch
					
				
				

					

						
						
漫画阅读
						
comic
					
				
				

					

						
						
手工制作
						
manual
					
				
			
	
	

第4关：用CSS3实现放大效果

相关知识

为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。

transform属性

下面是基本的html结构，：

2. 

效果如下：

现在需要基于中心放大1.2倍。

效果如下：

该如何实现呢？ 咱们先实现放大1.2倍，用到了 transform 属性。

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

1. .scale:hover img{ /*注意给 img 添加属性*/
2. transform: scale(1.2,1.2);
3. transform-origin: center center;
4. }

效果如下：

可以看出，上面的图片超出了边框，而且放大有点突兀。先解决超出边框的问题，添加如下代码：

1. .scale{
2. overflow: hidden; /*内容溢出时隐藏*/
3. }

这里解释一下参数：

• scale表示放大或缩小；

• ()里大于1 表示放大，小于1 表示缩小；

• 第一个数表示x轴的缩放，第二个数表示y轴的缩放，如果两个数一样，可以用一个数代替。

transition属性

基本效果已经实现了，就是有点突兀，如何平滑的过渡呢？这里用到了transition属性。

添加如下代码：

1. .scale img{
2. transition: all 0.3s linear;
3. }

效果如下：

这就已经实现了，参数和上一关一样。

这里再介绍一下可以转变元素位置的属性：

transform-origin: center center;

这里表示基于中心进行缩放或移动。

参数详解：

• 第一个参数可以为：left， center，right，定义视图被置于 X 轴的何处；

• 第二个参数可以为：top，center， bottom， 定义视图被置于 Y 轴的何处。

它默认是基于中心的。用图表示如下：

编程要求

在右侧编辑器中，补全Begin至End中间的部分，按照提示完成代码：

• 给img所有属性添加0.3s的平滑过渡效果(linear)，不考虑兼容性；

• 设置img缩放中心为center；

• 设置img放大倍数为1.1倍。

	
		
		
		
	

	

		

			

				

					
				
				

					
如何选择培训机构 ？
					
2017 06-15
					

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

				

					
				
				

					
如何选择培训机构 ？
					
2017 06-15
					

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

				

					
				
				

					
如何选择培训机构 ？
					
2017 06-15
					

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

	

第5关：完成一个版块

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

效果如下：

相关知识

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

外阴影

下面是基本的html结构：

效果如下：

现在要左边，右边，下边都添加阴影。 效果如下：

该如何实现呢？

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

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

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

效果如下：

可以看出，这两边已经添加上了，还缺左边，修改上面代码：

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

效果如下：

这里已经实现了。

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

• 第一个参数表示水平阴影的位置，正数表示右边，负数表示左边；

• 第二个参数表示垂直阴影的位置，正数表示下边，负数表示上边；

• 第三个参数表示模糊距离，就是模糊的程度；

• 第四个参数表示阴影的颜色。

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

多行省略

先讲单行省略。

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

2. 起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站

效果如下：

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

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

效果如下：

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

1. .shadow p{
2. height: 72px;
3. line-height: 24px;
4. overflow: hidden;
5. text-overflow:ellipsis;
6. display: -webkit-box;
7. -webkit-box-orient: vertical;
8. -webkit-line-clamp: 3;
9. }

效果如下：

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

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

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

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

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

设置圆角

对于下面的效果，只实现圆角，hover效果相信大家是可以做出来的。

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

基本结构如下：

2. 全部资讯

效果如下：

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

1. .radius{
2. border-radius: 20px 20px 20px 20px;
3. }

效果如下：

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

• 四个值分别代表四个圆角，顺序为顺时针方向，第一个为左上角，依次为右上角，右下角，左下角；

• 如果四个角都一样，可以用一个角表示，所以上面可以简写为： border-radius: 20px;。

编程要求

在右侧编辑器中，补全Begin至End中间的部分，按照提示完成代码：

• 给.diary-item设置圆角为20px；

• 给.diary-item设置左边,右边,下边的外部阴影。水平阴影和垂直阴影的值为10px，模糊距离为20px，颜色为#ccc；

• 给.diary-describe设置自动隐藏文字；

• 给.diary-describe设置文字隐藏后添加省略号

注意：这里圆角用省略模式，用一个数表示就可以。

效果如下：

	
		
		
		
	

	

		

			

				

					
				
				

					
如何选择培训机构 ？
					
2017 06-15
					

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

				

					
				
				

					
如何选择培训机构 ？
					
2017 06-15
					

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

				

					
				
				

					
如何选择培训机构 ？
					
2017 06-15
					

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

	

 

第6关：清除浮动

任务描述

本关任务：清除浮动。

效果如下：

相关知识

为了完成本关任务，你需要掌握：1.浮动出现的问题，2.清除浮动的方法。

浮动出现的问题

基本的html结构如下：

3. 我是box1不浮动的内容

5. 左浮动