浮动
程序员文章站
2022-06-23 22:22:43
...
一、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>file</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body >
<div id="div1">
</div>
<div id="div2">
<div id="div3">
</div>
</div>
</body>
</html>
#div1{
background-color: red;
width: 20px;
height: 100px;
float: left;
}
#div2{
background-color: blue;
float:right;
width: 100px;
height: 500px
}
#div3{
background-color: green;
float: right;
width: 30px;
height: 100px
}二、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>file</title>
<link rel="stylesheet" type="text/css" href="index.css">
<style type="text/css">
tr,td{
border: 10px solid white;
}
</style>
</head>
<body >
<center>
<table width="500" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<br>
欢迎来到慕课网学习新知识
</td>
<td>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<br>
欢迎来到慕课网学习新知识
</td>
<td>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<br>
欢迎来到慕课网学习新知识
</td>
</tr>
<tr>
<td>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<br>
欢迎来到慕课网学习新知识
</td>
<td>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<br>
欢迎来到慕课网学习新知识
</td>
<td>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<br>
欢迎来到慕课网学习新知识
</td>
</tr>
</table>
</center>
</body>
</html>三、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>file</title>
<link rel="stylesheet" type="text/css" href="index.css">
<style type="text/css">
.content{
width: 810px;
height: auto;
text-align: left;
font-family: 微软雅黑;
line-height: 24px;
margin-top: 1px;
padding: 5px;
margin: 0px auto;
letter-spacing: 2px;
border: 1px solid black;
}
.img01{
float: left;
margin-right: 5px;
}
.img02{
float: right;
margin-right: 5px;
}
</style>
</head>
<body >
<div class="content">
<img src="http://climg.mukewang.com/59c8742e0001bc9607120172.jpg" alt="" class="img01">
慕课网是垂直的互联网IT技能免费学习网站。以独家****、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。 <br/><br/>
慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。<br/><br/>
4月2日，国内首个IT技能学习类应用——慕课网3.1.0版本在应用宝首发。据了解，在此次上线的版本中，慕课网新增了课程历史记录、相关课程推荐等四大功能，为用户营造更加丰富的移动端IT学习体验。<br/><br/>
<img src="http://climg.mukewang.com/59c874560001779307120172.jpg" alt="" class="img02">
老师来自于各大IT公司重要技术岗位，拥有丰富的实战经验。语言平实、通俗易懂，更接地气，传授最有价值的经验之谈。课程内容注重实用性，不仅让学员通过学习能够做出产品，而且学习过程中掌握的方法技巧在实际工作中用得上，能够切实帮助学员提升工作技能。<br/><br/>
慕课网的绝大多数课程都经过了专业的后期制作，为课程内容匹配了个性化的视觉效果，帮助学员更好地理解课程内容，增加学习的乐趣。
</div>
</body>
</html>四、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.per{
width: 300px;
height: auto;
border:2px solid #aaa;
}
.li{
width: 100px;
height: 100px;
background: red;
margin: 5px;
float: left;
}
/*此处写代码*/
.cleardiv{
clear: both;
}
</style>
</head>
<body>
<div class="per">
<div class="li"></div>
<div class="li"></div>
<!-- 此处写代码 -->
<div class="cleardiv"></div>
</div>
</body>
</html>
上一篇： 利用python实现在微信群刷屏的方法
下一篇： 众筹背后，B站会员购的另一种可能