实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>在线</title>
</head>
<body>
<style type="text/css" media="screen">
.box4{
position:fixed;
right: 20px;
bottom:20px;
}
.box4 span{
position:absolute;
top:5px;
color:#fff;
right:5px;
font-size:30px;
}
</style>
<div class="box4">
<img src="ads.jpg" style="width:300px;height: 200px;background: #f30;">
<span> ×</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>实战图文混排</title>
</head>
<body>
<style type="text/css" media="screen">
.box{
width: 600px;
background:#eee;
margin:0 auto;
padding:20px;
}
.box h1{
text-align:center;
}
.box img{
float:left;
margin-right:10px;
width:310px;
height:200px;
background:#f30;
}
.box p{
font-size:16px;
color:#666;
line-height:30px;
text-indent:2rem;
</style>
<div class="box">
<h1>PHP中文网三期</h1>
<img src="ads.jpg" alt="">
<p>为了第三期的培，我们18位老师和同事历经3月精心准备。每一个PPT，每一行代码，
每一个实战案例都是经过 我们老师和同事们反复讨论，反复打磨敲定！
我们追求完美，力求每一节课程都是精品！ 为了这次课程，我们的培训老师也是在一起相互试听，
不断改进教学风格，坚持幽默，深入浅出， 力求每一个学员都能听得懂，
学得会！我们的辅导老师也是早早准备好！跟进监督每位学员的作业 （避免光学不练空架子），
及时解答学员的问题，更有回答某些学员的生活上的私人问题~~默默的奉献！
PHP中文网第三期线上基础学习内容: HTML5,CSS3,JavaScript,jQuery,Vue.js入门,
Bootstrap,页面布局实战 《网站管理后台》的模板开发(综合应用以上所学知识)</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>浮动的原理与清除浮动</title>
</head>
<body style="border: 1px dashed #f30">
<style type="text/css" media="screen">
.box1{
width:300px;
height:200px;
background:#f30;
float: left;
}
.box2{
width:300px;
height:200px;
background:blue;
float: right;
}
.box3{
width:900px;
height:200px;
background:#666;
clear:both
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span style="width:100px;height:200px;background:#f30;float:left"> php中文网 </span>
<!-- 行内元素添加浮动支持宽高 -->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>子元素浮动引起的父级区块高度塌陷的解决方案</title>
</head>
<body>
<style type="text/css" media="screen">
.main{
width:200px;
height:200px;
background:#f30;
float:left;
}
.box{
border:1px solid #f30;
/* overflow:hidden; */
}
/* .box:after{
content: "";
display:block;
clear:both;
} */
/* 方案1 */
/* 添加box宽度 */
/* 方案2 */
/* 给box添加overflow：hidden */
/* 方案3 */
/* 添加伪类 */
/* 方案4 */
/* 重新定义一个div设置清除他的浮动 */
</style>
<div class="box">
<div class="main"></div>
<div style="clear:both"> </div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>定位布局</title>
</head>
<style type="text/css" media="screen">
.center{
width:1000px;
margin:0 auto;
background:#999;
height:100px;
text-align:center;
line-height:100px;
}
.main{
width:1000px;
height:500px;
margin:0 auto;
background:blue;
position:relative;
}
.main .left{
width:200px;
min-height:100%;
background:#f30;
position:absolute;
left:0;
}
.main .right{
width:200px;
min-height:100%;
background:#f30;
position:absolute;
right:0;
top:0;
}
.content{
margin:0 210px;
background:#eee;
min-height:100%;
}
</style>
<body>
<!-- 头部 -->
<div class="head center">头部</div>
<div class="main">
<div class="left">左边</div>
<div class="content">主体</div>
<div class="right">右边</div>
</div>
<!-- 底部 -->
<div class="footer center">底部</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>经典的三列双飞翼布局</title>
</head>
<body>
<style type="text/css" media="screen">
.center{
width:1000px;
margin:0 auto;
background:#999;
height:100px;
text-align:center;
line-height:100px;
}
.container{
width:1000px;
height:600px;
background:#f30;
margin:0 auto;
}
.left{
width:200px;
min-height:100%;
float:left;
background:blue;
margin-left:-1000px;
}
.right{
width:200px;
min-height:100%;
float:left;
background:blue;
margin-left:-200px;
}
.wrap{
width:100%;
min-height:100%;
float:left;
background:#666;
}
.main{
min-height:600px;
margin:0 210px;
background-color: wheat;
}
</style>
<!-- 头部 -->
<div class="head center">头部</div>
<div class="container">
<div class="wrap">
<div class="main">主体</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<!-- 底部 -->
<div class="footer center">底部</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>圣杯布局</title>
</head>
<body>
<style type="text/css" media="screen">
.center{
width:1000px;
margin:0 auto;
background:#999;
height:100px;
text-align:center;
line-height:100px;
}
.container{
width:600px;
background:#f30;
margin:auto;
padding:0 200px;
overflow:hidden;
}
.left{
width:200px;
min-height:600px;
float:left;
background:blue;
margin-left: -100%;
position:relative;
left:-200px;
}
.right{
width:200px;
min-height:600px;
float:left;
background:blue;
position:relative;
margin-left:-200px;
left:200px;
}
.wrap{
width:100%;
min-height:600px;
background:#666;
float:left;
}
</style>
<!-- 头部 -->
<div class="head center">头部</div>
<div class="container">
<div class="wrap">
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<!-- 底部 -->
<div class="footer center">底部</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
