实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作QQ在线联系</title>
</head>
<style>
body{
height: 2000px;
}
.box1 {
width: 100px;
height: 100px;
position:fixed;
bottom:10px;
right: 20px;
background-color: lightsteelblue;
}
.box2{
list-style: none;
line-height: 100px;
text-align: center;
}
</style>
<body>
<div class="box1">
<div class="box2">
<a href="http://b.qq.com/webc.htm?new=0&sid=2040051&o=wwww11&q=7" title="点击联系我">
<img src="http://wpa.qq.com/pa?p=1:2040051:1">
</a>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动实现图文混排</title>
</head>
<style>
p, h2{
margin: 0;
}
.box{
width: 800px;
background-color: lightsteelblue;
font-size: 1.2rem;
color: #555;
border-radius: 1rem;
padding: 1rem;
}
.box img{
width: 300px;
float: right;
margin-left: 20px;
margin-bottom: 10px;
}
.box p{
text-indent: 2.5rem;
line-height: 1.8rem;
}
</style>
<body>
<div class="box">
<h2>《马云最新演讲：马云是马云，我是我》</h2>
<img src="https://inews.gtimg.com/newsapp_bt/0/5166166403/1000" title="马云">
<p>巴菲特和比尔·盖茨2010年来中国时，请了很多企业家参加晚宴，希望大家能裸捐。
吃饭前马云和巴菲特在一个小房间进行探讨，马云直接表明他是反对裸捐的：“您今年80多岁了，40岁的时候您为什么没有裸捐？如果我现在80岁，我也都捐了，一分钱不剩。”
八年过去，在2018 XIN公益大会上，马云依然觉得慈善是偏向于有钱人的权利，而他想做的是公益，除了金钱，还得投入时间、行动。
因此，根据捐款数排名的公益排行榜在马云眼里本身就不是那么公益，同样，马云也不喜欢“社会责任”这个词，他觉得公司里不应该有“社会责任部”：“企业不能一方面对社会制造有污染、有毒的产品，到了年底就捐点钱做慈善。公益不应成为外在的负担，而应该注入商业基因。”
在上午的会场讲了一系列排比句后，下午再做演讲的马云松弛了不少，“我进入商界完全是误打误撞，本来就想玩两年，没想到一搞搞了20年。”</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞冀三列布局</title>
</head>
<style>
/*头部和底部设置基本样式*/
.header,.footer{
width: 100%;
height: 60px;
background-color: darkgray;
}
.footer{
/*设置两边不能有浮动元素*/
clear: both;
}
.content{
/*设置总的宽度*/
width: 1000px;
/*高度引用父区块级*/
min-height: 100%;
/*设置参考颜色*/
background-color: cadetblue;
/*使自己水平居中*/
margin: auto;
/*内部的文本水平垂直居中*/
text-align: center;
line-height:60px;
}
.container{
/*设置主体总宽度*/
width: 1000px;
/*设置主体内部所有区块水平居中*/
margin: auto;
/*当前区块能够包住内部的浮动区块*/
overflow: hidden;
/*参考背色*/
background-color: lightsteelblue;
}
.wrap{
width: 100%;
/*参考背景色*/
background-color: darkcyan;
/*左浮动,脱离文档流*/
float: left;
}
.main{
min-height: 600px;
/*设置左右外边距为left和right的宽度,使他们显示正确的位置;*/
margin: 0 200px;
/*参考背景色*/
background-color: cornsilk;
}
pre{
margin: 0;
}
.left{
width: 200px;
min-height:600px;
float:left;
margin-left:-100%;
background-color: darksalmon;
}
.right{
width: 200px;
min-height: 600px;
float: left;
margin-left: -200px;
background-color: darksalmon;
}
</style>
<body>
<!--头部-->
<div class="header">
<div class="content">网站头部</div>
</div>
<!--主体-->
<div class="container">
<div class="wrap">
<div class="main"><pre> 三列经典的双飞翼布局的创建步骤与原理分析:
第1步: 创建一个大容器container,设置页面总宽度并左右居中
.container {
min-width: 1000px;
margin: auto;
background-color: yellow;
}
第2步:创建三列DOM结构,顺序非常重要,
2.1主体content在前,其次是left和right
2.2主体content必须套一个父级块main,将样式加给它才可以
2.3其中main宽度100%,left,right宽度固定
2.4main,left,right的高度暂时先设置为固定值,有了内容填充时再设置为100%,随内容自适应变化
第3步:main,left,right全部左浮动,因为前面的wrap块宽度为100%,必须导致left,right全部被挤到了下面
第4步: left设置,margin:-1000px;或者 margin-left:-100%;
(100%就是父级块的宽度1000px,负数表示方向相反,即向左缩进,最终到达父块起始点:0,0)
第5步: right设置,参考left,只需要margin-left: -200px;
(注意,只要移动一个绝对值,把自己移上去到最后就可以了)
第6步: content内容块,添加左右外边距,将内容区挤压出来: margin: 0 200px;
并给一个宽度100%,直接引用父级块宽度</pre></div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!--底部-->
<div class="footer">
<div class="content">网站底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例演示圣杯三列布局</title>
</head>
<style>
/*.header,.footer{*/
/*width: 100%;*/
/*height: 60px;*/
/*background-color: #888888;*/
/*}*/
.footer{
clear:both;
}
.content{
width: 1000px;
height: 100%;
background-color: lightsteelblue;
margin: auto;
text-align: center;
line-height: 60px;
}
.container{
width: 600px;
background-color: darksalmon;
margin: auto;
overflow: hidden;
padding: 0 200px;
}
.container .main{
min-height: 650px;
width: 100%;
float:left;
background-color: skyblue;
}
.container .left{
width: 200px;
min-height: 650px;
float:left;
margin-left: -100%;
position: relative;
left:-200px;
background-color: darkorange;
}
.container .right{
width: 200px;
min-height: 650px;
float:left;
margin-left: -200px;
position: relative;
right: -200px;
background-color: aquamarine;
}
pre{
margin-top: 50px;
}
</style>
<body>
<!--头部-->
<div class="header">
<div class="content">网站头部</div>
</div>
<!--内容区-->
<div class="container">
<div class="main">
<pre>
双飞冀与圣杯布局的最大区别在哪里？
”双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了“
</pre>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!--底部-->
<div class="footer">
<div class="content">网站底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例