Obviously, it is not the effect we want. If we want to line them up, we need to use floatattributes here. floatThe attribute defines in which direction the element floats. We use the left side here. Add the code as follows:

.head li{

float: left;

}

The effect is as follows:

Now it is not far from success. What is not realized is the vertical centering up and down and the lileft and right spacing between each label. Add the code as follows:

.head li{

float: left;

padding: 0 20px; /*左右间距*/

line-height:70px; /*上下垂直居中，70px是父元素的高度*/

Then the above effect can be achieved.

mouseover effect

Based on the above effects, the effects that need to be achieved here are as follows:

It is the effect when the mouse is over. The selector cssused here is a special style that the selector adds when the mouse hovers over the element. The added code is as follows:hoverhover

.head li:hover{

color: orange;

text-decoration: underline;

}

programming requirements

In the editor on the right, complete Beginto Endthe middle part, follow the prompts to complete the code, and set its CSSstyle as:

.logofloat left;
.head-listfloat right;
.head-liThe element below liis centered vertically and floated to the left.

Note: The platform has HTML and CSS syntax detection, so we must pay attention to the standard writing of the code.

For example: <div></div>must be closed, width: 200px;must have a semicolon, a colon;

<!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*/
                
                padding: 0 20px;    /*左右间距*/
                line-height:74px;   /*上下垂直居中，70px是父元素的高度*/
				
                /*向左浮动*/
                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>

Level 2: Using Swiper to realize carousel

mission details

The task of this level: use Swiperto realize a carousel map.

The effect is as follows:

related information

In order to complete the task of this level, you need to master: 1. SwiperBasic HTMLstructure, 2. Realization of basic functions.

Build the Swiper environment

1. Download the plugin

Enter Swiperthe official website to download Swiper - Swiper Chinese website , just download swiper-4.2.2.min.jsand swiper-4.2.2.min.cssgo.

2. Introduce plug-ins

<!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. HTMLStructure

<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>

Note:

The HTML structure here is fixed and cannot be changed casually;
The class here is fixed, the largest container class outside is swiper-container, the container class for placing pictures is swiper-wrapper, and the class for placing pictures is swiper-slide.

4. You may want to Swiperdefine a size, but of course you don't.

.swiper-container {

width: 600px;

height: 300px;

}

5. Initialization Swiper: preferably next to </body>the label

<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>

Here is a brief introduction to the basic parameters:

direction: 'horizontal', which means horizontal sliding, and vertical sliding is direction: vertical. The default is to slide horizontally;
loop: true, indicating that the last picture will be played in conjunction with the first picture, just like a loop; loop: false, indicating that the last picture is the end point;
autoplay: 3000, indicates the time interval of automatic switching, 3000in 3seconds;
speed: 1000, represents the time from the start to the end of the slide, 1000in 1seconds.

programming requirements

In the editor on the right, complete Beginto Endthe middle part, and follow the prompts to complete the code:

Complete the largest container class of swiper;
Complete the container class of the swiper image;
Turn on loopthe mode and set the picture to play in a loop;
Set the automatic switching time to 1.5seconds.

The effect is as follows:

<!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>

Level 3: Moving with CSS3

mission details

The task of this level: use CSS3to achieve the effect of object movement.

The effect is as follows:

related information

In order to complete the task of this level, you need to master: 1. transformAttributes, 2. transitionAttributes.

transform property

The basic htmlstructure is as follows:

<div class="move">

<p>向上移动</p>

</div>

The effect is as follows:

Now a smooth upward movement is required 200px. The effect is as follows:

How to achieve it? Let's move up first 200px, using transformthe attribute .

As mentioned above, add the following code:

.move:hover{

border: 2px solid #000;

}

.move:hover p{ /*注意是给 p 添加的*/

transform : translate(0, -200px);

}

The effect is as follows:

Basic usage:

transform: translate(x,y);

Detailed parameter explanation:

xIndicates left and right movement, a positive number indicates a right movement, and a negative number indicates a left movement;
yIndicates moving up and down, a positive number means moving down, and a negative number means moving up.

transition property

The basic effect has been achieved, but it is a bit abrupt, how to make a smooth transition? Attributes are used here transition.

Add the following code:

.move p{

transition: all 1s linear;

}

The effect is as follows:

This has been achieved. Here is an explanation of the above parameters:

allrefers to all attributes, including width, height;
1sRefers to the time spent by the transition effect;
linearRefers to the time curve of the transition effect, here is a smooth transition. The default is "ease"first slow, then fast and finally slow.

programming requirements

In the editor on the right, complete Beginto Endthe middle part, and follow the prompts to complete the code:

.nav-infomove up10px ;
A smooth transition effect added to .nav-infoall properties , regardless of compatibility 0.3s.(linear)

Notice:

There 0pxis no need to add px, 0just write directly;
Use it here 0.3s, don't use it .3s;
These are just specifications for the convenience of evaluation.

The effect is as follows:

<!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>

Level 4: Zoom in with CSS3

related information

In order to complete the task of this level, you need to master: 1. transformAttributes, 2. transitionAttributes.

transform property

The basic htmlstructure is as follows:

<div class="scale">

<img src="img/diary1.jpg" alt="diary1"/>

</div>

The effect is as follows:

Center-based magnification is now required 1.2.

The effect is as follows:

How to achieve it? Let's realize the magnification first 1.2, using transformthe attribute .

As mentioned above, add the following code:

.scale:hover img{ /*注意给 img 添加属性*/

transform: scale(1.2,1.2);

transform-origin: center center;

}

The effect is as follows:

It can be seen that the above picture is beyond the border, and the zoom is a bit abrupt. To solve the problem of exceeding the border first, add the following code:

.scale{

overflow: hidden; /*内容溢出时隐藏*/

}

Explain the parameters here:

scaleIndicates zoom in or zoom out;
()If it is greater than 1, it means zooming in, and if it is less than 1, it means zooming out;
The first number indicates xthe scaling of the axis, and the second number indicates ythe scaling of the axis. If the two numbers are the same, one number can be used instead.

transition property

The basic effect has been achieved, but it is a bit abrupt, how to make a smooth transition? Attributes are used here transition.

Add the following code:

.scale img{

transition: all 0.3s linear;

}

The effect is as follows:

This has been achieved, and the parameters are the same as the previous level.

Here is another introduction to the properties that can change the position of the element:

transform-origin: center center;

Here it means zooming or moving based on the center.

Detailed parameter explanation:

The first parameter can be: left, center, right, which defines where the view is placed on X the axis ;
The second parameter can be: top, center, bottom, which defines where the view is placed on Ythe axis .

It is center based by default. It is shown as follows with a graph:

programming requirements

In the editor on the right, complete Beginto Endthe middle part, and follow the prompts to complete the code:

Smooth transition effect added to imgall attributes , regardless of compatibility;0.3s(linear)
set imgzoom center to center;
Set imgthe magnification to 1.1times.

Notice:

Use it here 0.3s, don't use it .3s;
for scaling center center center;
The magnification is 1.1, 1.1;
These are just specifications for the convenience of evaluation.

<!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: 360px;
				margin:40px auto;
                padding: 0px 40px;
			}
			
            .diary-item {
				width: 26%;
				float: left;
				border: 1px solid #ccc;
       			}			
			.diary-item:not(:last-child) {
				margin-right: 7%;
			}			
			.diary-item .diary-img {
				overflow: hidden;
			}			
			/*----------- Begin ---------*/
			.diary-item .diary-img img {
				width: 100%;
				height: 200px;				
				/*给img所有属性添加0.3s的平滑过渡效果(linear)*/				
				transition:all 0.3s linear;				
			}
			
			.diary-item .diary-img img:hover {
				
				/*缩放中心为center*/
				
								  
  transform-origin: center center;
				/*放大倍数为1.1倍;*/
				transform: scale(1.1,1.1);
				
			}
			/*--------- End ----------*/
			.diary-item .diary-details {
				height: 150px;
				padding: 10px 30px;
				color: #888;
			}
			
			.diary-item .diary-details p {
				line-height: 26px;
			}
			
			.diary-item .diary-details .diary-describe {
				height: 72px;
				overflow: hidden;
			}
		</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>

Level 5: Complete a section

mission details

The task of this level: realize the following effects, including outer shadow, multi-line omission, and rounded corner settings.

The effect is as follows:

related information

In order to complete the task of this level, you need to master: 1. Outer shadow, 2. Multi-line omission, 3. Set rounded corners.

outer shadow

Here is the basic htmlstructure:

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

The effect is as follows:

Now add shadows to the left, right, and bottom. The effect is as follows:

How to achieve it?

Let's implement the shadows on the right and bottom first. As mentioned above, add the following code:

.shadow{

box-shadow: 10px 10px 10px #000;

}

The effect is as follows:

It can be seen that the two sides have been added, and the left side is still missing. Modify the above code:

.shadow{

box-shadow: 10px 10px 10px #000, -10px 10px 10px #000;

}

The effect is as follows:

It has been implemented here.

Let me box-shadow: 10px 10px 10px #000;introduce box-shadowthe attribute values:

The first parameter indicates the position of the horizontal shadow, a positive number indicates the right side, and a negative number indicates the left side;
The second parameter indicates the position of the vertical shadow, a positive number indicates the lower side, and a negative number indicates the upper side;
The third parameter indicates the fuzzy distance, which is the degree of fuzziness;
The fourth parameter represents the color of the shadow.

The idea of realizing the three-sided shadow: The right and bottom shadows are easy to achieve, but how to achieve the left shadow? Add another set of shadows for the left and bottom sides.

multiline omission

Let’s talk about single-line ellipsis first.

Add a line of text to the above structure, the structure is as follows:

<div class="shadow">

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

</div>

The effect is as follows:

How to make it single-line omitted? Add the following code:

.shadow p{

overflow: hidden; // 自动隐藏文字

text-overflow:ellipsis; //文字隐藏后添加省略号

white-space: nowrap; //强制不换行

}

The effect is as follows:

How to achieve multi-line ellipsis? Here we take 3the row as an example. The idea is to set 3the height of the row, and the height of each row will be known, and the ellipsis will be hidden and displayed within the height range. Add the following code:

.shadow p{

height: 72px;

line-height: 24px;

overflow: hidden;

text-overflow:ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

}

The effect is as follows:

What is more difficult to understand is the following 3attribute:

display: -webkit-box; Display the object as a flex box model;
-webkit-box-orient: vertical; Set or retrieve the arrangement of the child elements of the flex box object;
-webkit-line-clamp: 3; Limits the number of lines of text displayed in a block element.

These three properties are used in combination.

set rounded corners

For the following effects, only the rounded corners are realized. hoverI believe everyone can make the effect.

border-radiusThis attribute is used here .

The basic structure is as follows:

<div class="radius">

全部资讯

</div>

The effect is as follows:

To achieve the rounded corner effect, add the following code:

.radius{

border-radius: 20px 20px 20px 20px;

}

The effect is as follows:

Here are the attribute values border-radiusfor :

The four values represent four rounded corners, the order is clockwise, the first is the upper left corner, followed by the upper right corner, the lower right corner, and the lower left corner;
If the four corners are the same, it can be represented by one corner, so the above can be abbreviated as: border-radius: 20px;.

programming requirements

In the editor on the right, complete Beginto Endthe middle part, and follow the prompts to complete the code:

Set .diary-itemrounded corners to 20px;
Give .diary-itemthe outer shadow to set left, right, and bottom. The value of horizontal shadow and vertical shadow 10pxis, blur distance is 20px, color is #ccc;
Set .diary-describeauto-hide text;
.diary-describeAdd an ellipsis after setting the text to hide

Note : Here, the rounded corners are in ellipsis mode, which can be represented by a number.

<!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>

Level 6: Clear Float

mission details

The task of this level: clear the floating.

The effect is as follows:

related information

In order to complete the task of this level, you need to master: 1. Problems with floating, 2. The method of clearing floating.

The problem with floating

The basic htmlstructure is as follows:

<div class="container">
    <div class="box1">
        <p>我是box1不浮动的内容 </p>
        <div class="left">
            左浮动
        </div>
        <div class="right">
            右浮动
        </div>
    </div>
    <div class="box2">
        <p>我是box2的内容 </p>
    </div>
</div>

The corresponding ones cssare as follows:

.container {
    width: 400px;
    margin: 60px auto;
    background: #ccc;
}
.box1 {
    border: 2px solid #000;
}
.left {
    width: 50%;
    line-height: 50px;
    float: left;
}
.right {
    width: 50%;
    line-height: 50px;
    float: right;
}

The effect is as follows:

From htmlthe comparison between the structure and the effect diagram, it is found that there is a mismatch, and the div with the same class leftis rightnot in it. Why is this? is the height collapse of the parent element due to the float .

Solution

How to solve it? Here is a more commonly used method, which is no problem in complex structures. Other methods of clearing floats have certain limitations, so I won’t introduce them here.

Add the code as follows:

.clearfix:after{
  content: "";
  height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}
.clearfix{
  zoom: 1;
}

Adding this class to the parent element does the trick. Here to add the class for box1, divthe effect is as follows:

Detailed parameter explanation:

content: ""; height: 0;It is to set the content of the pseudo class to be empty and the height to be 0;
display: block; visibility: hidden;Set it to an invisible block-level element;
clear: both; The value of this attribute points out the side that does not allow floating objects, bothwhich refers to the left and right sides;
zoom： 1；This is to solve compatibility issues, compatible IE6.

If this feels difficult to understand, you can write it down first and understand it slowly.

programming requirements

In the editor on the right, complete Beginto Endthe middle part, and follow the prompts to complete the code:

Set pseudo-class content to empty; height to 0;
Set it to an invisible block-level element;
Clear floats on both sides.

Notice:

There 0pxis no need to add px, 0just write directly;
These are just specifications for the convenience of evaluation.

<!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;
			}
            /*------------ Begin ------------*/
			.clearfix:after {
				/*设置伪类内容为空；高度为0 */
                content: ""; height: 0;				
				/*设置它为一个不可见的块级元素；*/				
				display: block; visibility: hidden;
				/*清除两边的浮动*/
				clear: both; 	
			}
            .clearfix{
                zoom: 1;
            }
			/*-------------  End  -------------*/
			#nav {
				width: 100%;
				margin: 0 auto;
				padding: 40px 0;
                background: #333;
			}
			
			#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 img {
				width: 64px;
				height: 64px;
				margin: 20px auto;
			}
			
			#nav .nav-item .nav-title {
				font-size: 22px;
				margin-bottom: 12px;
			}
		</style>
	</head>
 
	<body>
		    <!-------------- Begin -------------->
            <!--添加清除浮动的类-->
			<div id="nav" class="clearfix">                
            <!-------------- End -------------->
 
				<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>

Educoder/Touge JAVA——HTML web comprehensive project practice

Level 1: header - the head

mission details

related information

float property

mouseover effect

programming requirements

Level 2: Using Swiper to realize carousel

mission details

related information

Build the Swiper environment

programming requirements

Level 3: Moving with CSS3

mission details

related information

transform property

transition property

programming requirements

Level 4: Zoom in with CSS3

related information

transform property

transition property

programming requirements

Level 5: Complete a section

mission details

related information

outer shadow

multiline omission

set rounded corners

programming requirements

Level 6: Clear Float

mission details

related information

The problem with floating

Solution

programming requirements

Guess you like