第1关：header——头部

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

.head li{
float: left;
}

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

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

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

.head li:hover{
color: orange;
text-decoration: underline;
}

<!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: #fff;position: relative;}#top{width: 80%;margin: 0 auto;}.bg-header {border-bottom: 1px solid #eee;}/*********  Begin **********/#top .logo {width: 120px;height: 50px;margin-top: 11px;/*向左浮动*/float: left;}#top .head-list {/*向右浮动*/float: right;}#top .head-list li {padding: 0 20px;/*垂直居中，高度为74px*/line-height:74px;/*向左浮动*/float: left;}/*********  End  *********/#top .head-list li a:hover {color: #333;text-decoration: underline;}</style></head><body><header class="bg-top"><div id="top" class="clearfix"><img src="https://www.educoder.net/api/attachments/196816" alt="logo" class="logo" /><ul class="head-list"><li><a href="javascript:void;">首页</a></li><li><a href="javascript:void;">班级设置</a></li><li><a href="javascript:void;">师资团队</a></li><li><a href="javascript:void;">童画日记</a></li><li><a href="javascript:void;">关于我们</a></li><li><a href="javascript:void;">联系我们</a></li></ul></div></header></body></html>

第2关：用Swiper实现轮播图

搭建Swiper环境

1.下载插件

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

2.引入插件

<!DOCTYPE html>
<html>
<head>...<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>...<script src="path/to/swiper.min.js"></script>
</body>
</html>

3.HTML结构

<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><!-- 如果需要分页器（下面的小点点） --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 （左右按钮）--><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
</div>

这里的HTML结构是固定的，不可以随便更改；
这里的类是固定的，外面最大的容器类为swiper-container，放图片的容器类为swiper-wrapper，放图片的类为swiper-slide。

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

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

5.初始化Swiper：最好是挨着</body>标签

<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
autoplay: 3000,
speed: 1000,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>

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

direction: 'horizontal'，表示水平滑动，垂直滑动是 direction: vertical。默认是水平滑动；
loop: true，表示最后一张图片会和第一张图片连起来播放，就像循环播放一样； loop: false，表示最后一张图片是终点；
autoplay: 3000，表示自动切换的时间间隔，3000表示3秒；
speed: 1000，表示滑动从开始到结束的时间，1000表示1秒

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>少儿教育</title><link rel="stylesheet" href="step2/swiper.min.css" /><style type="text/css">* {margin: 0;padding: 0;}ul,li {list-style: none;}a {color: #888;text-decoration: none;font-size: 16px;}body {background: #fff;position: relative;}.swiper-container {width: 100%;height: 280px;margin-left: auto;margin-right: auto;overflow: hidden;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}.swiper-slide img {width: 100%;height: 100%;}</style></head><body><!--------  Begin  ---------><!-- swiper最大的容器类--><div class="swiper-container"><!-- 图片容器类--><div class="swiper-wrapper"><!---------  End  ----------><div class="swiper-slide"><img src="https://www.educoder.net/api/attachments/198516" alt="轮播图1" /></div><div class="swiper-slide"><img src="https://www.educoder.net/api/attachments/198517" alt="轮播图2" /></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev swiper-button-white"></div><div class="swiper-button-next swiper-button-white"></div></div><script src="step2/swiper.min.js"></script><script type="text/javascript">var swiper = new Swiper('.swiper-container', {direction: 'horizontal',//------------- Begin  ------------//开启loop模式，设置图片为循环播放loop: true,//自动切换的时间为1.5秒autoplay: 1500,//--------------  End  ------------speed: 1000,pagination: '.swiper-pagination',nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',autoplayDisableOnInteraction: false,});</script></body></html>

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

transform属性

下面是基本的html结构，：

<div class="move">
<p>向上移动</p>
</div>

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

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

基本用法：

transform: translate(x,y);

参数详解：

x 表示左右移动，正数表示向右移动，负数表示向左移动；
y 表示上下移动，正数表示向下移动，负数表示向上移动。

transition属性

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

添加如下代码：

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

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

all指所有属性，包括width，height；
1s指过渡效果花费的时间；
linear指过渡效果的时间曲线，这里是平滑过渡。默认是 "ease"，先慢再快最后慢。

<!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;}#nav {width: 100%;margin: 0 auto;padding: 40px 0;}#nav .nav-item {width: 21%;height: auto;text-align: center;color: #ff7415;padding-top: 10px;float: left;transition: all .3s ease-in;-moz-transition: all .3s ease-in;-webkit-transition: all .3s ease-in;}#nav .nav-item:not(:last-child) {margin-right: 28px;}#nav .nav-item:hover {border: 1px solid #FF7415;}/*----------  Begin  -----------*/#nav .nav-item:hover .nav-info {/*向上移动10px*/transform : translate(0, -10px);}#nav .nav-item .nav-info {/*给所有属性添加0.3s的 平滑过滤效果(linear),不考虑兼容性*/transition: all 0.3s linear;}/*------------ End --------------*/#nav .nav-item img {width: 64px;height: 64px;margin: 20px auto;}#nav .nav-item .nav-title {font-size: 22px;margin-bottom: 12px;}</style></head><body><div id="nav"><div class="nav-item"><div class="nav-info"><img src="https://www.educoder.net/attachments/download/198536" alt="cecorate" /><p class="nav-title">儿童装饰画</p><p>装饰</p></div></div><div class="nav-item"><div class="nav-info"><img src="https://www.educoder.net/attachments/download/198538" alt="cecorate" /><p class="nav-title">趣味素描</p><p>sketch</p></div></div><div class="nav-item"><div class="nav-info"><img src="https://www.educoder.net/attachments/download/198539" alt="cecorate" /><p class="nav-title">漫画阅读</p><p>comic</p></div></div><div class="nav-item"><div class="nav-info"><img src="https://www.educoder.net/attachments/download/198537" alt="cecorate" /><p class="nav-title">手工制作</p><p>manual</p></div></div></div></body></html>

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

第5关：完成一个版块

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

效果如下：

相关知识

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

外阴影

下面是基本的html结构：

<div class="shadow"></div>

效果如下：

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

该如何实现呢？

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

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

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

效果如下：

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

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

效果如下：

这里已经实现了。

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

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

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

多行省略

先讲单行省略。

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

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

效果如下：

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

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

效果如下：

如何实现多行出现省略号呢？这里以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;
}

效果如下：

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

display: -webkit-box; 将对象作为弹性伸缩盒子模型显示；
-webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式；
-webkit-line-clamp: 3; 限制在一个块元素显示的文本的行数。

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

设置圆角

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

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

基本结构如下：

<div class="radius">
全部资讯
</div>

效果如下：

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

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

效果如下：

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

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

编程要求

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

给.diary-item设置圆角为20px；
给.diary-item设置左边,右边,下边的外部阴影。水平阴影和垂直阴影的值为10px，模糊距离为20px，颜色为#ccc；
给.diary-describe设置自动隐藏文字；
给.diary-describe设置文字隐藏后添加省略号

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

效果如下：

<!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;/*设置左边,右边,下边的外部阴影,水平阴影和垂直阴影的值为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 --------*//*自动隐藏文字*/line-height: 24px;overflow: hidden;text-overflow:ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;/*文字隐藏后添加省略号*//*-------- 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&nbsp;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&nbsp;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&nbsp;06-15</p><p class="diary-describe">起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站</p></div></div></div></body></html>

第6关：清除浮动

任务描述

本关任务：清除浮动。

效果如下：

html网页综合项目实战相关推荐

html css网页布局实例简单,Div+CSS网页布局项目实战一（含设计图、HTML和CSS源文件）...
网页的基本结构新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: Div+CSS网页布局项目实战:页面布局与规划|www.125j ...
综合项目实战(电影购票系统)
目录一.阶段项目实战 1.电影购票系统简介.项目功能演示 2.日志框架搭建.系统角色分析 3.首页设计.登录.商家界面.用户界面实现 4.商家-详情页设计.影片上架.退出 5.商家-影片下架.影片修 ...
小滴课堂工业级paas云平台+springcloudAlibaba+JDK11综合项目实战
二当家小D 讲师: xdclass6 1024电商平台系统实战架构设计和实现需求分析第1集 1024电商平台业务背景介绍和简历项目编写建议简介:讲解电商营销中心的业务背景和简历项目编写建议大课业 ...
10-1-Spring Boot综合项目实战-准备工作
一.系统演示与概述 1.演示项目:简易的博客系统演示地址:http://32h5354h14.qicp.vip/ 2.系统功能介绍前端使用Spring Boot支持的模板引擎Thymeleaf+ ...
SSH综合项目实战（快递） -- day07 定区关联快递员、搭建前台、客户注册
一.定区关联快递员 1.显示快递员列表 (1).点击关联快递员按钮时的事件 (2).编写CourierAction中提供查询快递员列表方法 /*** 获取所有未删除的快递员信息*/@Action(va ...
jsp+ssm+mysql综合项目实战教程：开发通用进销存管理系统
课程简介这是一款由jsp+ssm+mysql实现的企业库存进销存管理系统项目,这个进销存系统功能比较简单,采用了ssm框架,功能结构非常简单明了,界面也比较清爽大气,非常适合学生和Java新手拿来学 ...
SSH综合项目实战（快递） -- day09 收派业务、客户在线下单
一.取派业务 1.创建取派业务模块,导入实体类 package com.itheima.bos.domain.take_delivery;import java.util.Date; import j ...
SSM综合项目实战（TTSC） -- day02 Dubbo注册中心,通用Mapper,分页插件
一.Dubbo的连接方式 1.连接方式介绍使用Dubbo进行远程调用实现服务交互,它支持多种协议,如Hessian.HTTP.RMI.Memcached.Redis等等.由于Dubbo将这些协议的实 ...
Servlet与表单、数据库综合项目实战【学生信息管理】
✅作者简介:热爱国学的Java后端开发者,修心和技术同步精进.
最新全套web前端开发VIP40g项目实战
课程目录: 1-2初级教程入门必备 - PS技法与切片技术 1-3初级教程入门必备 - JavaScript快速上手 2-1中级教程无上心法-CSS高级及兼容Hack技术 2-2中级教程前端利 ...

html网页综合项目实战

第1关：header——头部

第2关：用Swiper实现轮播图

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

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

第5关：完成一个版块

第6关：清除浮动

html网页综合项目实战相关推荐

最新文章

热门文章