MySQL学习笔记
文章目录
div设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术
</div>
<div id="div2">
<label>姓名：</label> <input type="text">
</div>
</body>
</html>
#div1{
background-color: yellow;
width: 150px;
height: 150px;
top:150px;
left:150px;
position: absolute;
overflow: hidden;
/*outline: none;*/
border-bottom: solid;
}
#div2{
top:150px;
left:350px;
position: absolute;
/*border-bottom: solid;*/
}
input{
border:none;
border-bottom: solid;
outline: none;
}
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术
</div>
<div id="div2">
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术
</div>
</body>
</html>
div{
width: 200px;
height: 200px;
overflow: hidden;
margin-left: 20px;
}
#div1{
background-color: yellow;
margin-top: 20px;
margin-bottom: 20px;
padding-right: 20px;
box-sizing: border-box;
}
#div2{
background-color: blue;
}
*{
/*margin:0px 0px 0px 0px;*/
/*margin:0px 0px;*/
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right:0px;
}
行级元素与块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- a标签是行级元素，div是块级元素 -->
<div><a href="">慕课网</a></div>
<a href="">www.imooc.com</a>
</body>
</html>
定位机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<label>慕课网</label>
<label>慕课网</label>
<label>慕课网</label>
</body>
</html>
浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">第一个</div>
<div id="div2">第二个</div>
<div id="div3">第三个</div>
</body>
</html>
div{
width: 200px;
height: 200px;
}
#div1{
background-color: yellow;
float: left;
}
#div2{
background-color: red;
width: 300px;
float: left;
}
#div3{
background-color: blue;
width: 400px;
float: left;
}
float包裹和崩溃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
#div1{
border: 1px solid black;
background-color: red;
}
#div2{
background-color: yellow;
height: 230px;
width: 450px;
float: left;
}
#div3{
background-color: blue;
height: 160px;
width: 500px;
float: left;
}
包裹特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
}
浮动的其他特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
<p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
</p>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
float: left;
}
p{
text-align: justify;
line-height: 30px;
line-height: 1e,;
background-color: #ffffff;
}
问题解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
<p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
</p>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
float: left;
}
p{
margin-top: -7px;
text-align: justify;
line-height: 30px;
background-color: #ffffff;
}
清除浮动1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>
#div1{
background-color: red;
}
#div2{
background-color: yellow;
float: left;
width: 200px;
height: 200px;
}
#div3{
background-color: blue;
float: left;
width: 220px;
height: 220px;
}
#div4{
background-color: black;
width: 240px;
height: 240px;
clear: both;
}
清除浮动2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="clearDiv"></div>
<div id="div4"></div>
</div>
</body>
</html>
#div1{
background-color: red;
}
#div2{
background-color: yellow;
float: left;
width: 200px;
height: 200px;
}
#div3{
background-color: blue;
float: left;
width: 220px;
height: 220px;
}
#div4{
background-color: black;
width: 240px;
height: 240px;
/*clear: both;*/
}
#clearDiv::after{
content: "";
visibility: hidden;
height: 0px;
display: block;
clear: both;
}
#clearDiv{
zoom:1;
}
练习1-div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
练习2-div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 400px;
height: 400px;
position: absolute;
overflow: scroll;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">
<img src="http://climg.mukewang.com/5cbd23450001d64d16000900.jpg">
</div>
</body>
</html>
练习3-盒子模型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>margin外边距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul{
list-style:none;width:300px;height:400px;
background-color:pink;
padding-top:40px;
}
li{
width:200px;height:50px;background-color:yellow;
/*样式补充*/
margin-top:40px;
margin-left:40px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
练习4-盒子模型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
width:800px;
height:400px;
background-color: skyblue;
padding-top: 100px;
box-sizing: border-box;
margin: 10px 10px 20px 10px;
}
.top{
width:400px;
height:200px;
background-color: yellow;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="content">
<div class="top"></div>
</div>
</body>
</html>
练习5-浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.div1{
width: 100px;
height: 100px;
background: red;
float:left;
}
.div2{
width: 300px;
height: 300px;
background: blue;
/*此处写代码*/
float:right;
}
.div3{
width: 100px;
height: 100px;
background: green;
float:inherit; /*该属性继承为使得DIV3继承父元素的浮动属性*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">
<div class="div3"></div>
</div>
</body>
</html>
练习6-浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
background-color:red;
width: 100%;
height: 300px;
}
#div2{
height: 200px;
width: 25%;
float: left;
background-color: yellow;
}
#div3{
height: 200px;
width: 25%;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
练习7-浮动
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
#div{
width:800px;
/*float:left;
border:1px;*/
}
.div1{
height:180px;
width:240px;
float:left;
border:1px solid black;
margin: 10px 10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div">
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术
</div>
<div id="div2">
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术
</div>
</body>
</html>
div{
width: 200px;
height: 200px;
overflow: hidden;
margin-left: 20px;
}
#div1{
background-color: yellow;
margin-top: 20px;
margin-bottom: 20px;
padding-right: 20px;
box-sizing: border-box;
}
#div2{
background-color: blue;
}
*{
/*margin:0px 0px 0px 0px;*/
/*margin:0px 0px;*/
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right:0px;
}
行级元素与块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- a标签是行级元素，div是块级元素 -->
<div><a href="">慕课网</a></div>
<a href="">www.imooc.com</a>
</body>
</html>
定位机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<label>慕课网</label>
<label>慕课网</label>
<label>慕课网</label>
</body>
</html>
浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">第一个</div>
<div id="div2">第二个</div>
<div id="div3">第三个</div>
</body>
</html>
div{
width: 200px;
height: 200px;
}
#div1{
background-color: yellow;
float: left;
}
#div2{
background-color: red;
width: 300px;
float: left;
}
#div3{
background-color: blue;
width: 400px;
float: left;
}
float包裹和崩溃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
#div1{
border: 1px solid black;
background-color: red;
}
#div2{
background-color: yellow;
height: 230px;
width: 450px;
float: left;
}
#div3{
background-color: blue;
height: 160px;
width: 500px;
float: left;
}
包裹特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
}
浮动的其他特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
<p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
</p>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
float: left;
}
p{
text-align: justify;
line-height: 30px;
line-height: 1e,;
background-color: #ffffff;
}
问题解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
<p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
</p>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
float: left;
}
p{
margin-top: -7px;
text-align: justify;
line-height: 30px;
background-color: #ffffff;
}
清除浮动1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>
#div1{
background-color: red;
}
#div2{
background-color: yellow;
float: left;
width: 200px;
height: 200px;
}
#div3{
background-color: blue;
float: left;
width: 220px;
height: 220px;
}
#div4{
background-color: black;
width: 240px;
height: 240px;
clear: both;
}
清除浮动2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="clearDiv"></div>
<div id="div4"></div>
</div>
</body>
</html>
#div1{
background-color: red;
}
#div2{
background-color: yellow;
float: left;
width: 200px;
height: 200px;
}
#div3{
background-color: blue;
float: left;
width: 220px;
height: 220px;
}
#div4{
background-color: black;
width: 240px;
height: 240px;
/*clear: both;*/
}
#clearDiv::after{
content: "";
visibility: hidden;
height: 0px;
display: block;
clear: both;
}
#clearDiv{
zoom:1;
}
练习1-div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
练习2-div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 400px;
height: 400px;
position: absolute;
overflow: scroll;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">
<img src="http://climg.mukewang.com/5cbd23450001d64d16000900.jpg">
</div>
</body>
</html>
练习3-盒子模型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>margin外边距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul{
list-style:none;width:300px;height:400px;
background-color:pink;
padding-top:40px;
}
li{
width:200px;height:50px;background-color:yellow;
/*样式补充*/
margin-top:40px;
margin-left:40px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
练习4-盒子模型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
width:800px;
height:400px;
background-color: skyblue;
padding-top: 100px;
box-sizing: border-box;
margin: 10px 10px 20px 10px;
}
.top{
width:400px;
height:200px;
background-color: yellow;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="content">
<div class="top"></div>
</div>
</body>
</html>
练习5-浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.div1{
width: 100px;
height: 100px;
background: red;
float:left;
}
.div2{
width: 300px;
height: 300px;
background: blue;
/*此处写代码*/
float:right;
}
.div3{
width: 100px;
height: 100px;
background: green;
float:inherit; /*该属性继承为使得DIV3继承父元素的浮动属性*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">
<div class="div3"></div>
</div>
</body>
</html>
练习6-浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
background-color:red;
width: 100%;
height: 300px;
}
#div2{
height: 200px;
width: 25%;
float: left;
background-color: yellow;
}
#div3{
height: 200px;
width: 25%;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
练习7-浮动
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
#div{
width:800px;
/*float:left;
border:1px;*/
}
.div1{
height:180px;
width:240px;
float:left;
border:1px solid black;
margin: 10px 10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div">
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<label>慕课网</label>
<label>慕课网</label>
<label>慕课网</label>
</body>
</html>
浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">第一个</div>
<div id="div2">第二个</div>
<div id="div3">第三个</div>
</body>
</html>
div{
width: 200px;
height: 200px;
}
#div1{
background-color: yellow;
float: left;
}
#div2{
background-color: red;
width: 300px;
float: left;
}
#div3{
background-color: blue;
width: 400px;
float: left;
}
float包裹和崩溃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
#div1{
border: 1px solid black;
background-color: red;
}
#div2{
background-color: yellow;
height: 230px;
width: 450px;
float: left;
}
#div3{
background-color: blue;
height: 160px;
width: 500px;
float: left;
}
包裹特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
}
浮动的其他特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
<p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
</p>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
float: left;
}
p{
text-align: justify;
line-height: 30px;
line-height: 1e,;
background-color: #ffffff;
}
问题解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
<p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
</p>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
float: left;
}
p{
margin-top: -7px;
text-align: justify;
line-height: 30px;
background-color: #ffffff;
}
清除浮动1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>
#div1{
background-color: red;
}
#div2{
background-color: yellow;
float: left;
width: 200px;
height: 200px;
}
#div3{
background-color: blue;
float: left;
width: 220px;
height: 220px;
}
#div4{
background-color: black;
width: 240px;
height: 240px;
clear: both;
}
清除浮动2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="clearDiv"></div>
<div id="div4"></div>
</div>
</body>
</html>
#div1{
background-color: red;
}
#div2{
background-color: yellow;
float: left;
width: 200px;
height: 200px;
}
#div3{
background-color: blue;
float: left;
width: 220px;
height: 220px;
}
#div4{
background-color: black;
width: 240px;
height: 240px;
/*clear: both;*/
}
#clearDiv::after{
content: "";
visibility: hidden;
height: 0px;
display: block;
clear: both;
}
#clearDiv{
zoom:1;
}
练习1-div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
练习2-div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 400px;
height: 400px;
position: absolute;
overflow: scroll;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">
<img src="http://climg.mukewang.com/5cbd23450001d64d16000900.jpg">
</div>
</body>
</html>
练习3-盒子模型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>margin外边距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul{
list-style:none;width:300px;height:400px;
background-color:pink;
padding-top:40px;
}
li{
width:200px;height:50px;background-color:yellow;
/*样式补充*/
margin-top:40px;
margin-left:40px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
练习4-盒子模型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
width:800px;
height:400px;
background-color: skyblue;
padding-top: 100px;
box-sizing: border-box;
margin: 10px 10px 20px 10px;
}
.top{
width:400px;
height:200px;
background-color: yellow;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="content">
<div class="top"></div>
</div>
</body>
</html>
练习5-浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.div1{
width: 100px;
height: 100px;
background: red;
float:left;
}
.div2{
width: 300px;
height: 300px;
background: blue;
/*此处写代码*/
float:right;
}
.div3{
width: 100px;
height: 100px;
background: green;
float:inherit; /*该属性继承为使得DIV3继承父元素的浮动属性*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">
<div class="div3"></div>
</div>
</body>
</html>
练习6-浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
background-color:red;
width: 100%;
height: 300px;
}
#div2{
height: 200px;
width: 25%;
float: left;
background-color: yellow;
}
#div3{
height: 200px;
width: 25%;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
练习7-浮动
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
#div{
width:800px;
/*float:left;
border:1px;*/
}
.div1{
height:180px;
width:240px;
float:left;
border:1px solid black;
margin: 10px 10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div">
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
#div1{
border: 1px solid black;
background-color: red;
}
#div2{
background-color: yellow;
height: 230px;
width: 450px;
float: left;
}
#div3{
background-color: blue;
height: 160px;
width: 500px;
float: left;
}
包裹特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
}
浮动的其他特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
<p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
</p>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
float: left;
}
p{
text-align: justify;
line-height: 30px;
line-height: 1e,;
background-color: #ffffff;
}
问题解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
<p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
</p>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
float: left;
}
p{
margin-top: -7px;
text-align: justify;
line-height: 30px;
background-color: #ffffff;
}
清除浮动1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>
#div1{
background-color: red;
}
#div2{
background-color: yellow;
float: left;
width: 200px;
height: 200px;
}
#div3{
background-color: blue;
float: left;
width: 220px;
height: 220px;
}
#div4{
background-color: black;
width: 240px;
height: 240px;
clear: both;
}
清除浮动2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="clearDiv"></div>
<div id="div4"></div>
</div>
</body>
</html>
#div1{
background-color: red;
}
#div2{
background-color: yellow;
float: left;
width: 200px;
height: 200px;
}
#div3{
background-color: blue;
float: left;
width: 220px;
height: 220px;
}
#div4{
background-color: black;
width: 240px;
height: 240px;
/*clear: both;*/
}
#clearDiv::after{
content: "";
visibility: hidden;
height: 0px;
display: block;
clear: both;
}
#clearDiv{
zoom:1;
}
练习1-div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
练习2-div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 400px;
height: 400px;
position: absolute;
overflow: scroll;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">
<img src="http://climg.mukewang.com/5cbd23450001d64d16000900.jpg">
</div>
</body>
</html>
练习3-盒子模型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>margin外边距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul{
list-style:none;width:300px;height:400px;
background-color:pink;
padding-top:40px;
}
li{
width:200px;height:50px;background-color:yellow;
/*样式补充*/
margin-top:40px;
margin-left:40px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
练习4-盒子模型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
width:800px;
height:400px;
background-color: skyblue;
padding-top: 100px;
box-sizing: border-box;
margin: 10px 10px 20px 10px;
}
.top{
width:400px;
height:200px;
background-color: yellow;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="content">
<div class="top"></div>
</div>
</body>
</html>
练习5-浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.div1{
width: 100px;
height: 100px;
background: red;
float:left;
}
.div2{
width: 300px;
height: 300px;
background: blue;
/*此处写代码*/
float:right;
}
.div3{
width: 100px;
height: 100px;
background: green;
float:inherit; /*该属性继承为使得DIV3继承父元素的浮动属性*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">
<div class="div3"></div>
</div>
</body>
</html>
练习6-浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
background-color:red;
width: 100%;
height: 300px;
}
#div2{
height: 200px;
width: 25%;
float: left;
background-color: yellow;
}
#div3{
height: 200px;
width: 25%;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
练习7-浮动
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
#div{
width:800px;
/*float:left;
border:1px;*/
}
.div1{
height:180px;
width:240px;
float:left;
border:1px solid black;
margin: 10px 10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div">
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
<p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
</p>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
float: left;
}
p{
text-align: justify;
line-height: 30px;
line-height: 1e,;
background-color: #ffffff;
}
问题解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
<p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
</p>
</div>
</body>
</html>
#div1{
background-color: #ffffff;
float:left;
}
img{
vertical-align: bottom;
float: left;
}
p{
margin-top: -7px;
text-align: justify;
line-height: 30px;
background-color: #ffffff;
}
清除浮动1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>
#div1{
background-color: red;
}
#div2{
background-color: yellow;
float: left;
width: 200px;
height: 200px;
}
#div3{
background-color: blue;
float: left;
width: 220px;
height: 220px;
}
#div4{
background-color: black;
width: 240px;
height: 240px;
clear: both;
}
清除浮动2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="clearDiv"></div>
<div id="div4"></div>
</div>
</body>
</html>
#div1{
background-color: red;
}
#div2{
background-color: yellow;
float: left;
width: 200px;
height: 200px;
}
#div3{
background-color: blue;
float: left;
width: 220px;
height: 220px;
}
#div4{
background-color: black;
width: 240px;
height: 240px;
/*clear: both;*/
}
#clearDiv::after{
content: "";
visibility: hidden;
height: 0px;
display: block;
clear: both;
}
#clearDiv{
zoom:1;
}
练习1-div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
练习2-div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 400px;
height: 400px;
position: absolute;
overflow: scroll;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">
<img src="http://climg.mukewang.com/5cbd23450001d64d16000900.jpg">
</div>
</body>
</html>
练习3-盒子模型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>margin外边距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul{
list-style:none;width:300px;height:400px;
background-color:pink;
padding-top:40px;
}
li{
width:200px;height:50px;background-color:yellow;
/*样式补充*/
margin-top:40px;
margin-left:40px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
练习4-盒子模型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
width:800px;
height:400px;
background-color: skyblue;
padding-top: 100px;
box-sizing: border-box;
margin: 10px 10px 20px 10px;
}
.top{
width:400px;
height:200px;
background-color: yellow;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="content">
<div class="top"></div>
</div>
</body>
</html>
练习5-浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.div1{
width: 100px;
height: 100px;
background: red;
float:left;
}
.div2{
width: 300px;
height: 300px;
background: blue;
/*此处写代码*/
float:right;
}
.div3{
width: 100px;
height: 100px;
background: green;
float:inherit; /*该属性继承为使得DIV3继承父元素的浮动属性*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">
<div class="div3"></div>
</div>
</body>
</html>
练习6-浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
background-color:red;
width: 100%;
height: 300px;
}
#div2{
height: 200px;
width: 25%;
float: left;
background-color: yellow;
}
#div3{
height: 200px;
width: 25%;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
练习7-浮动
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
#div{
width:800px;
/*float:left;
border:1px;*/
}
.div1{
height:180px;
width:240px;
float:left;
border:1px solid black;
margin: 10px 10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div">
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>
#div1{
background-color: red;
}
#div2{
background-color: yellow;
float: left;
width: 200px;
height: 200px;
}
#div3{
background-color: blue;
float: left;
width: 220px;
height: 220px;
}
#div4{
background-color: black;
width: 240px;
height: 240px;
clear: both;
}
清除浮动2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="clearDiv"></div>
<div id="div4"></div>
</div>
</body>
</html>
#div1{
background-color: red;
}
#div2{
background-color: yellow;
float: left;
width: 200px;
height: 200px;
}
#div3{
background-color: blue;
float: left;
width: 220px;
height: 220px;
}
#div4{
background-color: black;
width: 240px;
height: 240px;
/*clear: both;*/
}
#clearDiv::after{
content: "";
visibility: hidden;
height: 0px;
display: block;
clear: both;
}
#clearDiv{
zoom:1;
}
练习1-div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
练习2-div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 400px;
height: 400px;
position: absolute;
overflow: scroll;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">
<img src="http://climg.mukewang.com/5cbd23450001d64d16000900.jpg">
</div>
</body>
</html>
练习3-盒子模型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>margin外边距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul{
list-style:none;width:300px;height:400px;
background-color:pink;
padding-top:40px;
}
li{
width:200px;height:50px;background-color:yellow;
/*样式补充*/
margin-top:40px;
margin-left:40px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
练习4-盒子模型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
width:800px;
height:400px;
background-color: skyblue;
padding-top: 100px;
box-sizing: border-box;
margin: 10px 10px 20px 10px;
}
.top{
width:400px;
height:200px;
background-color: yellow;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="content">
<div class="top"></div>
</div>
</body>
</html>
练习5-浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.div1{
width: 100px;
height: 100px;
background: red;
float:left;
}
.div2{
width: 300px;
height: 300px;
background: blue;
/*此处写代码*/
float:right;
}
.div3{
width: 100px;
height: 100px;
background: green;
float:inherit; /*该属性继承为使得DIV3继承父元素的浮动属性*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">
<div class="div3"></div>
</div>
</body>
</html>
练习6-浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
background-color:red;
width: 100%;
height: 300px;
}
#div2{
height: 200px;
width: 25%;
float: left;
background-color: yellow;
}
#div3{
height: 200px;
width: 25%;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
练习7-浮动
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
#div{
width:800px;
/*float:left;
border:1px;*/
}
.div1{
height:180px;
width:240px;
float:left;
border:1px solid black;
margin: 10px 10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div">
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
练习2-div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
width: 400px;
height: 400px;
position: absolute;
overflow: scroll;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">
<img src="http://climg.mukewang.com/5cbd23450001d64d16000900.jpg">
</div>
</body>
</html>
练习3-盒子模型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>margin外边距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul{
list-style:none;width:300px;height:400px;
background-color:pink;
padding-top:40px;
}
li{
width:200px;height:50px;background-color:yellow;
/*样式补充*/
margin-top:40px;
margin-left:40px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
练习4-盒子模型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
width:800px;
height:400px;
background-color: skyblue;
padding-top: 100px;
box-sizing: border-box;
margin: 10px 10px 20px 10px;
}
.top{
width:400px;
height:200px;
background-color: yellow;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="content">
<div class="top"></div>
</div>
</body>
</html>
练习5-浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.div1{
width: 100px;
height: 100px;
background: red;
float:left;
}
.div2{
width: 300px;
height: 300px;
background: blue;
/*此处写代码*/
float:right;
}
.div3{
width: 100px;
height: 100px;
background: green;
float:inherit; /*该属性继承为使得DIV3继承父元素的浮动属性*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">
<div class="div3"></div>
</div>
</body>
</html>
练习6-浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
background-color:red;
width: 100%;
height: 300px;
}
#div2{
height: 200px;
width: 25%;
float: left;
background-color: yellow;
}
#div3{
height: 200px;
width: 25%;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
练习7-浮动
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
#div{
width:800px;
/*float:left;
border:1px;*/
}
.div1{
height:180px;
width:240px;
float:left;
border:1px solid black;
margin: 10px 10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div">
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>margin外边距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul{
list-style:none;width:300px;height:400px;
background-color:pink;
padding-top:40px;
}
li{
width:200px;height:50px;background-color:yellow;
/*样式补充*/
margin-top:40px;
margin-left:40px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
练习4-盒子模型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
width:800px;
height:400px;
background-color: skyblue;
padding-top: 100px;
box-sizing: border-box;
margin: 10px 10px 20px 10px;
}
.top{
width:400px;
height:200px;
background-color: yellow;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="content">
<div class="top"></div>
</div>
</body>
</html>
练习5-浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.div1{
width: 100px;
height: 100px;
background: red;
float:left;
}
.div2{
width: 300px;
height: 300px;
background: blue;
/*此处写代码*/
float:right;
}
.div3{
width: 100px;
height: 100px;
background: green;
float:inherit; /*该属性继承为使得DIV3继承父元素的浮动属性*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">
<div class="div3"></div>
</div>
</body>
</html>
练习6-浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
background-color:red;
width: 100%;
height: 300px;
}
#div2{
height: 200px;
width: 25%;
float: left;
background-color: yellow;
}
#div3{
height: 200px;
width: 25%;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
练习7-浮动
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
#div{
width:800px;
/*float:left;
border:1px;*/
}
.div1{
height:180px;
width:240px;
float:left;
border:1px solid black;
margin: 10px 10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div">
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.div1{
width: 100px;
height: 100px;
background: red;
float:left;
}
.div2{
width: 300px;
height: 300px;
background: blue;
/*此处写代码*/
float:right;
}
.div3{
width: 100px;
height: 100px;
background: green;
float:inherit; /*该属性继承为使得DIV3继承父元素的浮动属性*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">
<div class="div3"></div>
</div>
</body>
</html>
练习6-浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
background-color:red;
width: 100%;
height: 300px;
}
#div2{
height: 200px;
width: 25%;
float: left;
background-color: yellow;
}
#div3{
height: 200px;
width: 25%;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
练习7-浮动
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
#div{
width:800px;
/*float:left;
border:1px;*/
}
.div1{
height:180px;
width:240px;
float:left;
border:1px solid black;
margin: 10px 10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div">
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
#div{
width:800px;
/*float:left;
border:1px;*/
}
.div1{
height:180px;
width:240px;
float:left;
border:1px solid black;
margin: 10px 10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div">
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>