慕课网 前端就业班 float浮动 编程练习 3-4

3-4 编程练习

我们学习了浮动的属性,那么我们就可以实现块元素在同一行现实的功能,那么我们就来实现一个两行三列的效果吧,如下图所示:
慕课网 前端就业班 float浮动 编程练习 3-4_第1张图片
图片地址如下:
图1
图2
图3

任务

先写出html结构:
1、首先需要一个大的容器来容纳这六个小的模块。
2、写出这六个小模块;
3、每个小模块包含了两部分,上面的图片和下面的文字。

再定义css样式:
1、先给每个小模块样式进行一下设置,包括边框和内外边距。
2、给每个小模块设置浮动,实现2行3列的排布。
tips:注意大容器宽度的设置
3、如果父元素是塌陷的,还需要解决一下父元素塌陷的问题。

参考代码


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.big{
				display: inline-block;
				border: 1px #ccc dashed;
				overflow: hidden;
				zoom: 1;
				padding: 10px;
			}
			.small{
				float: left;
				border: 1px #ccc solid;
				margin: 10px;
			}
			.four{
				clear: left;
			}
			p{
				margin: 3px;
			}
		style>
	head>
	<body>
		<div class="big">
			<div class="one small">
				<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" >
				<p>欢迎来到慕课网学习新知识!p>
			div>
			<div class="two small">
				<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" >
				<p>欢迎来到慕课网学习新知识!p>
			div>
			<div class="three small">
				<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" >
				<p>欢迎来到慕课网学习新知识!p>
			div>
			<div class="four small">
				<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" >
				<p>欢迎来到慕课网学习新知识!p>
			div>
			<div class="five small">
				<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" >
				<p>欢迎来到慕课网学习新知识!p>
			div>
			<div class="six small">
				<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" >
				<p>欢迎来到慕课网学习新知识!p>
			div>
		div>
	body>
html>

你可能感兴趣的:(其他)