实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位制作QQ</title>
<style>
.box1 {
position: fixed;
bottom: 0; /*底部*/
right: 0; /*右边*/
}
</style>
</head>
<body>
<div class="box1">
<a href="http://wpa.qq.com/msgrd?v=3&uin=1842596592&site=qq&menu=yes">
<img src="http://wpa.qq.com/pa?p=2:1842596592:53" alt="售前"></a>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
图文混排实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动实现图文混排</title>
<style>
h2,p{
margin: 0;
}
.box{
padding: 0px;
width: 700px;
background-color: aqua;
font-size: 16px;
color: cadetblue;
border-radius: 16px;
padding: 20px;
}
.box h2{
text-align: center;
margin-bottom: 20px;
}
.box img{
width: 200px;
float: left;
margin-right: 200px;
margin-bottom: 20px;
}
.box p{
text-indent: 10px;
line-height: 1.5rem;
}
</style>
</head>
<body>
<div class="box">
<h2>路由器</h2>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534572401862&di=87358397d153605493435307539c97b0&imgtype=0&src=http%3A%2F%2Foss.gkstk.com%2Fimages%2F2017%2F4%2F17094011875.png" alt="">
<p>路由器（Router），是连接因特网中各局域网、广域网的设备
，它会根据信道的情况自动选择和设定路由，以最佳路径，
按前后顺序发送信号。 路由器是互联网络的枢纽，"交通警察"。
目前路由器已经广泛应用于各行各业，各种不同档
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
双飞冀实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞冀三列布局</title>
<style type="text/css">
/*<!--先给最简单的头部和底部设置基本的样式-->*/
.header,.footer{
/*宽度为窗口的宽度，自适应变化*/
width: 100%;
/*为了简化，头部与尾部高度统一为60px*/
height: 60px;
background-color: darkgray;
}
.footer {
clear: both;
}
.content{
width: 1000px;
min-height: 100%;
background-color: green;
margin: auto;
text-align: center;
line-height: 60px;
}
.container{
width: 1000px;
margin: auto;
overflow: hidden;
background-color: aqua;
}
/*设置主体区域中间区块的基本样式*/
.wrap{
width: 100%;
background-color: cyan;
float: left;
}
/*设置中间区块样式*/
.main{
min-height: 600px;
margin: 0 200px;
background-color: whitesmoke;
}
.left{
width: 200px;
min-height: 600px;
float: left;
margin-left: -75%;
background-color: red;
}
.right{
width: 200px;
min-height: 600px;
float: left;
margin-left: -200px;
background-color:rosybrown;
}
</style>
</head>
<body>
<!--DOM结构-->
<!--头部-->
<div class="header">
<div class="content">网站头部</div>
</div>
<!--主体-->
<div class="content">
<div class="wrap">主体</div>
</div>
<div class="left"> 左侧</div>
<div class="right"> 右侧</div>
<!--底部-->
<div class="footer">
<div class="content"> 网页底部</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
.header, .footer {
width: 100%;
height: 60px;
background-color: #aaa;
}
.content {
width: 1000px;
min-height: 100%;
margin: auto;
text-align: center;
line-height: 60px;
background-color: #eee;
}
.container {
width: 600px;
margin: auto;
overflow: hidden;
padding: 0 200px;
background-color: yellow;
}
.main {
width: 100%;
min-height: 650px;
background-color: #66CCFF;
float:left;
}
.left {
width: 200px;
min-height: 650px;
background-color: #FD6FCF;
float:left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
min-height: 650px;
background-color: #FC0107;
float:left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">header</div>
</div>
<div class="container">
<div class="main">主要内容区</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">
<div class="content">footer</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
![W)EH8P{EZ4(30NPF]`JE2OU.png](https://img.php.cn//upload/image/866/252/542/1534730925177995.png "1534730925177995.png")
