|
|
@@ -0,0 +1,135 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* css reset */
|
|
|
+ body{
|
|
|
+ margin: 0;
|
|
|
+ background-color: #aaa;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 工具类 */
|
|
|
+ .clearfix::after{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ clear: both; /* 清除浮动 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .header{
|
|
|
+ background-color: #5098d6;
|
|
|
+ overflow: hidden; /* 生成BFC区域 */
|
|
|
+ text-align: center;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ width: 1150px;
|
|
|
+ margin: 0 auto;
|
|
|
+ /* background-color: rebeccapurple; */
|
|
|
+ }
|
|
|
+ .content .left{
|
|
|
+ width: 300px;
|
|
|
+ height: 600px;
|
|
|
+ /* background-color: red; */
|
|
|
+ float: left;
|
|
|
+ margin-right: 50px;
|
|
|
+ }
|
|
|
+ .content .right{
|
|
|
+ width: 800px;
|
|
|
+ height: 600px;
|
|
|
+ /* background-color: blue; */
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .content .left-top,.content .left-bottom{
|
|
|
+ width: 300px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 0 10px rgba(0,0,0,0.5);
|
|
|
+ height: 300px;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content .right-top,.content .right-bottom{
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 0 10px rgba(0,0,0,0.5);
|
|
|
+ padding: 20px;
|
|
|
+ height: 300px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .content .right-top img{
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .content .right-bottom img{
|
|
|
+ width: 200px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+ .content .right-bottom .img-item{
|
|
|
+ float: left;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <div class="header">
|
|
|
+ <h1>浮动布局练习</h1>
|
|
|
+ <p>学习和掌握CSS浮动（float）属性</p>
|
|
|
+ </div>
|
|
|
+ <div class="content clearfix">
|
|
|
+ <div class="left">
|
|
|
+ <div class="left-top">
|
|
|
+ <h2>关于浮动</h2>
|
|
|
+ <span>浮动是CSS中一种定位元素的方法，允许元素脱离正常文档
|
|
|
+流，向左或向右移动，直到碰到容器边缘或另一个浮动元素</span>
|
|
|
+ </div>
|
|
|
+ <div class="left-bottom">
|
|
|
+ <h2>浮动的用</h2>
|
|
|
+ <ul>
|
|
|
+ <li>创建多列布局</li>
|
|
|
+ <li>实现图片环绕文本</li>
|
|
|
+ <li>制作导航菜单</li>
|
|
|
+ <li>实现响应式设计</li>
|
|
|
+ <li>清除浮动影响</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="right-top clearfix">
|
|
|
+ <h2>文字环绕图片</h2>
|
|
|
+ <img src="./image/img1.jpg" alt="">
|
|
|
+ <span> 这是一个使用浮动实现文字环绕图片的示例。通过将图片向左浮动，文本会自然地环绕在图片的右侧。浮动元素会脱离正常文档流，但文本内容会感知到浮动元素的存在并进行环绕。
|
|
|
+浮动元素会尽可能地向左或向右移动，直到碰到容器边缘或另一个浮动元素。在这个例子中，图片被设置为向左浮动，所以文本会出现在图片的右侧。</span>
|
|
|
+ </div>
|
|
|
+ <div class="right-bottom">
|
|
|
+ <h2>多列布局</h2>
|
|
|
+ <p>使用浮动可以创建多列布局。下面是一个简单的三列布局示例：</p>
|
|
|
+ <div class="img-list clearfix">
|
|
|
+ <div class="img-item">
|
|
|
+ <img src="./image/img3.png" alt="">
|
|
|
+ <p>图片1描述</p>
|
|
|
+ </div>
|
|
|
+ <div class="img-item">
|
|
|
+ <img src="./image/img3.png" alt="">
|
|
|
+ <p>图片1描述</p>
|
|
|
+ </div>
|
|
|
+ <div class="img-item">
|
|
|
+ <img src="./image/img3.png" alt="">
|
|
|
+ <p>图片1描述</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <span>hello world</span> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="clear: both;"></div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
