QQkefu固定定位实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ固定定位</title>
<style>
.box{
position: fixed;
/*bottom: 0; !*底部*!*/
/*right: 100px; !*右边*!*/
top:45%; /*左边*/
left:45%; /*上部*/
}
.box1{
position: fixed;
bottom:0; /*底部*/
/*right: 100px; !*右边*!*/
/*top:0; !*左边*!*/
left:0px; /*上部*/
}
.div1{
position: fixed;
bottom: 0; /*底部*/
right: 100px; /*右边*/
/*top:45%; !*左边*!*/
/*left:10%; !*上部*!*/
}
.div2{
position: fixed;
/*bottom: 0; !*底部*!*/
right: 100px; /*右边*/
/*top:45%; !*左边*!*/
left:1100px; /*上部*/
}
</style>
</head>
<body>
<div class="box">
<img src="timg-2.jpg" alt="qq6">
</div>
<div class="box1">
<img src="174818554.jpg" alt="qq4">
</div>
<div class="div1">
<img src="200&gp=0.jpg" alt="q1">
</div>
<div class="div2"><img src="44573aebc26768a.jpg" alt="qq">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行图
实例:图文混排
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的图文混排</title>
<style>
.box{
width: 500px;
border-radius: 1rem;
padding: 20px;
background-color: #cccccc;
}
.box h1{
text-align:center;
color: #FC0107;
margin: 0 0 10px;
}
.box img{
width: 200px;
float: left;
margin-right: 10px;
border-radius: 20px;
}
p{
margin: 0;
}
</style>
</head>
<body>
<div class="box">
<h1>《php中文网学生》</h1>
<img src="200&gp=0.jpg" alt="美女">
<p>经过两年的用心经营，录制了数十部视频教程，总章节数超过了一千节。
网站注册会员10万+（近半年，早期可不用注册也可以观看 视频），
帮助了数十万名PHP兴趣爱好者，网站每天有几万人在线学习，
视频每天播放宽带近一个TB的流量。很多同学经常会在群里问为什么不能离线
下载观看 ，在这里也跟大家解释下，每天近1TB（1000MB）的播放量，PHP中
文网要支付服务器带宽费用800多每天，如果提供下载宽带可能会增加三至五倍，
所以只能放弃，离线视频的下载。经过两年的用心经营，录制了数十部视频教程，总章节数超过了一千节。
网站注册会员10万+（近半年，早期可不用注册也可以观看 视频），
帮助了数十万名PHP兴趣爱好者，网站每天有几万人在线学习，
视频每天播放宽带近一个TB的流量。很多同学经常会在群里问为什么不能离线
下载观看 ，在这里也跟大家解释下，每天近1TB（1000MB）的播放量，PHP中
文网要支付服务器带宽费用800多每天，如果提供下载宽带可能会增加三至五倍，
所以只能放弃，离线视频的下载。
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行图
