AI 助理
备案控制台
开发者社区 云计算 文章 正文

07.浮动（下）

2023-05-16 74
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 07.浮动

制作有路网搜索栏


image.png


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .search-bar{
            width: 1200px;
            margin: 40px auto 0;
            overflow: hidden;
            /*border: 3px solid black;*/
        }
        .search-bar .logo{
            float: left;
            margin-right: 64px;
            /*border: 1px solid blue;*/
        }
        .search-bar .search-block{
            /*border: 1px solid blue;*/
            float: left;
        }
        .search-bar .cart{
            float: right;
            /*border: 1px solid blue;*/
        }
        .search-bar .hot-search li{
            display: inline-block;
            font-size: 16px;
            line-height: 32px;
            font-weight: bold;
            padding: 0px 2px;
        }
        .search-bar .hot-search li a{
            color: gray;
        }
        .search-bar .hot-search li a:hover
        {
            text-decoration: underline;
            color: orange;
        }
        .search-bar .cart
        {
            background-image: url("cart.jpg");
            background-repeat: no-repeat;
            /*border: 1px solid blue;*/
            padding-left: 44px;
            line-height: 20px;
        }
        .search-bar .cart a{
            color: black;
        }
        .search-bar .cart a:hover {
            text-decoration: underline;
        }
        .search-bar .cart span{
            color: red;
            font-weight: bold;
        }
        .search{
            width: 509px;
            margin: 0 auto;
            /*margin-top: 60px;*/
            height: 40px;
        }
        .search .input{
            width: 400px;
            height: 36px;
            border: 3px solid red;
            font-size: 20px;
        }
        .search .btn{
            vertical-align: top;
            height: 42px;
            width: 100px;
            margin-left: -3px;
            border: 0px solid black;
            background-color: red;
            color: white;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 6px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="search-bar">
    <div class="logo">
        <img src="logo.jpg">
    </div>
    <div class="search-block">
        <div class="search">
            <form action="#">
                <input type="text" class="input" placeholder="书名"><input type="submit" value="搜索" class="btn">
            </form>
        </div>
        <div class="hot-search">
            <ul>
                <li>热门搜索：</li>
                <li><a href="#">高等数学</a></li>
                <li><a href="#">高等数学</a></li>
                <li><a href="#">高等数学</a></li>
                <li><a href="#">高等数学</a></li>
            </ul>
        </div>
    </div>
    <div class="cart">
            <div><a href="#">网站购物车<span>3</span>本</a></div>
            <div><a href="#">网站购物车<span>0</span>本</a></div>
    </div>
</div>
</body>
</html>

Flexbox版


.search-bar{
            width: 1200px;
            margin: 40px auto 0;
            /* overflow: hidden; */
            display: flex;
            /*border: 3px solid black;*/
        }
        .search-bar .logo{
            /* float: left; */
            margin-right: 64px;
            /*border: 1px solid blue;*/
        }
        .search-bar .cart{
            margin-left: auto;
            /* float: right; */
            /* border: 1px solid blue; */
        }

制作有路网推荐图书页面


image.png



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="reset.css" rel="stylesheet">
    <style>
        .book-recommend{
            width: 750px;
            margin: 100px auto 0px;
        }
        .book-recommend .header
        {
            border-bottom: 1px solid gray;
            background-image: url("img/laba.jpg");
            background-repeat: no-repeat;
            background-position: 0px 8px;
            /*border: 1px solid red;*/
        }
        .book-recommend .header div{
            float: right;
            padding-top: 6px;
            padding-right: 6px;
            font-size: 16px;
        }
        .book-recommend .header div span{
            color: red;
        }
        .book-recommend .header h2
        {
            font-size: 22px;
            font-weight: bold;
            padding-left: 20px;
            padding-bottom: 8px;
        }
        .content
        {
            padding-top: 10px;
        }
        .content div{
            text-align: left;
            padding-left: 30px;
            line-height: 32px;
        }
        .content li
        {
            width: 187px;
            float: left;
            text-align: center;
        }
        .content .price{
            margin-top: -10px;
            margin-bottom: 20px;
            font-size: 14px;
        }
        .content .price .discount{
            color: red;
            font-weight: bold;
            margin-right: 6px;
        }
        .content .price .origin-price{
            color: gray;
            text-decoration: line-through;
        }
        .content .author{
            color:gray;
        }
        .content li a{
            color: black;
        }
        .content li a:hover{
            color: orange;
            text-decoration: underline;
        }
        .content li img
        {
            max-width: 160px;
            height: 160px;
        }
    </style>
</head>
<body>
<div class="book-recommend">
    <div class="header">
        <div><span>1</span>/4</div>
        <h2>推荐图书</h2>
    </div>
    <div class="content">
        <ul>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/文化苦旅.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/平凡的世界.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/偷影子的人.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）5</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）6</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/蔡永康.jpg">
                <div><a href="#">狼图腾（修订版）7</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>


项目实战

制作有路网近期热销榜

image.png


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .hot{
            width: 220px;
            /*border: 1px solid red;*/
            float: right;
        }
        .hot h2{
            font-size: 16px;
            line-height: 40px;
            padding-left: 34px;
        }
        .hot ul{
            border: 1px solid gray;
            font-size: 14px;
        }
        .hot li .book1{
            line-height: 44px;
            border-bottom: 1px dashed gray;
            padding-left: 14px;
        }
        .hot li span
        {
            margin-right: 6px;
            font-weight: bold;
        }
        .hot .red{
            color: red;
        }
        .hot .book2
        {
            display: none;
        }
        .hot .book2{
            height: 102px;
            border-bottom: 1px dashed gray;
        }
        .hot .book2 div{
            margin-top: 6px;
            float: left;
        }
        .hot .book2 img
        {
            width: 76px;
        }
        .hot .book2 .nored{
            margin-left: 10px;
            display: inline-block;
            margin-top: 6px;
        }
        .hot .book2 .red
        {
            margin-left: 10px;
            display: inline-block;
            margin-top: 6px;
        }
        .hot .book2 .title{
            font-size: 14px;
            margin-bottom: 22px;
        }
        .hot .book2 .discount-price{
            font-size: 16px;
            font-weight: bold;
            color: red;
        }
        .hot .book2 .old-price{
            font-size: 14px;
            color: gray;
            text-decoration: line-through;
        }
        .hot li:hover .book1{
            display: none;
        }
        .hot li:hover .book2{
            display: block;
        }
    </style>
</head>
<body>
<div class="hot">
    <h2>近期热销榜</h2>
    <ul>
        <li>
            <div class="book1"><span class="red">1</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="red">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span class="red">1</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="red">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span class="red">1</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="red">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">4</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

Flexbox版


.hot .book2 div{
            margin-top: 6px;
            /* float: left; */
        }
        .hot li:hover .book2{
            display: flex;
        }


课后作业


必做任务

1.制作带按钮的轮播图（浮动，定位）

2.制作网站导航（ 列表的浮动）

3.制作谁偷了我的能量（列表的浮动，定位）

扩展任务

1.制作网页布局（浮动）

2.制作商品列表（浮动，div）


补充说明：

弹性盒模型教程


image.png


浮动已经过时，最新使用FlexBox

同一份html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="reset.css" rel="stylesheet">
    <link href="float.css" rel="stylesheet">
</head>
<body>
<div class="book-recommend">
    <div class="header">
        <h2>推荐图书</h2>
        <div><span>1</span>/4</div>
    </div>
    <div class="content">
        <ul>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/文化苦旅.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/平凡的世界.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/偷影子的人.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）5</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）6</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/蔡永康.jpg">
                <div><a href="#">狼图腾（修订版）7</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

浮动版float.css


.book-recommend{
  width: 750px;
  margin: 100px auto 0px;
}
.book-recommend .header
{
  border-bottom: 1px solid gray;
  background-image: url("img/laba.jpg");
  background-repeat: no-repeat;
  background-position: 0px 8px;
}
.book-recommend .header div{
  float: right;
  padding-top: 6px;
  padding-right: 6px;
  font-size: 16px;
}
.book-recommend .header div span{
  color: red;
}
.book-recommend .header h2
{
  font-size: 22px;
  font-weight: bold;
  padding-left: 20px;
  padding-bottom: 8px;
}
.content
{
  padding-top: 10px;
}
.content div{
  text-align: left;
  padding-left: 30px;
  line-height: 32px;
}
.content li
{
  width: 187px;
  float: left;
  text-align: center;
}
.content .price{
  margin-top: -10px;
  margin-bottom: 20px;
  font-size: 14px;
}
.content .price .discount{
  color: red;
  font-weight: bold;
  margin-right: 6px;
}
.content .price .origin-price{
  color: gray;
  text-decoration: line-through;
}
.content .author{
  color:gray;
}
.content li a{
  color: black;
}
.content li a:hover{
  color: orange;
  text-decoration: underline;
}
.content li img
{
  max-width: 160px;
  height: 160px;
}

Flexbox版float.css


.book-recommend{
  width: 750px;
  margin: 100px auto 0px;
}
.book-recommend .header
{
  border-bottom: 1px solid gray;
  background-image: url("img/laba.jpg");
  background-repeat: no-repeat;
  background-position: 0px 8px;
  display: flex;
}
.book-recommend .header div{
  /* float: right; */
  padding-top: 6px;
  padding-right: 6px;
  font-size: 16px;
}
.book-recommend .header div span{
  color: red;
}
.book-recommend .header h2
{
  margin-right: auto;
  font-size: 22px;
  font-weight: bold;
  padding-left: 20px;
  padding-bottom: 8px;
}
.content
{
  padding-top: 10px;
}
.content div{
  text-align: left;
  padding-left: 30px;
  line-height: 32px;
}
.content ul{
  display: flex;
  flex-wrap: wrap;
}
.content li
{
  width: 187px;
  /* float: left; */
  text-align: center;
}
.content .price{
  margin-top: -10px;
  margin-bottom: 20px;
  font-size: 14px;
}
.content .price .discount{
  color: red;
  font-weight: bold;
  margin-right: 6px;
}
.content .price .origin-price{
  color: gray;
  text-decoration: line-through;
}
.content .author{
  color:gray;
}
.content li a{
  color: black;
}
.content li a:hover{
  color: orange;
  text-decoration: underline;
}
.content li img
{
  max-width: 160px;
  height: 160px;
}


豆约翰
目录
相关文章
CaptainDrake
|
前端开发
CSS布局：浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
CSS布局：浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
CaptainDrake
112 0
大树营养快线
|
3月前
|
编解码 前端开发
浮动布局
【10月更文挑战第27天】浮动布局在实现多列布局和图文混排等方面具有一定的优势，但也存在高度塌陷和定位控制等缺点。通过合理地选择清除浮动的方式，可以有效地解决浮动布局带来的问题，确保页面布局的稳定和正确显示。
大树营养快线
50 2
大树营养快线
|
3月前
|
前端开发
除了伪元素清除法，还有哪些方法可以解决浮动布局的高度塌陷问题
【10月更文挑战第27天】不同的方法适用于不同的场景和布局需求，在实际开发中，需要根据具体情况选择最合适的方法来解决浮动布局的高度塌陷问题。
大树营养快线
75 2
大树营养快线
|
3月前
|
前端开发
哪些方法可以解决浮动布局的高度塌陷问题？
【10月更文挑战第27天】
大树营养快线
78 1
lvbb66
|
6月前
|
前端开发 容器
cssfloat浮动
cssfloat浮动
lvbb66
58 1
m0_黎明
|
9月前
|
容器
浮动出现双边距的问题，如何解决？
浮动出现双边距的问题，如何解决？
m0_黎明
49 2
find_starshine
|
9月前
浮动和定位
浮动和定位
find_starshine
53 0
a15034260562-24955
|
9月前
浮动
浮动
a15034260562-24955
41 0
吃豆子的恐龙
盒子模型、浮动、定位
盒子模型、浮动、定位
吃豆子的恐龙
87 0
豆约翰
|
前端开发
07.浮动（上）
07.浮动
豆约翰
129 0

热门文章

最新文章

  • 1
    解决kafka集群由于默认的__consumer_offsets这个topic的默认的副本数为1而存在的单点故障问题
  • 2
    oracle 11g 11204补丁信息
  • 3
    Python 命令行之旅：初探 docopt
  • 4
    时间之箭源于量子纠缠？
  • 5
    输入输出流体系图
  • 6
    Windows Server 2008 R2下部署OCS 2007 R2 边缘服务器
  • 7
    从码农到设计者，从单例模式入手设计代码
  • 8
    瑞典力推储能助太阳能发电计划落实
  • 9
    十张图告诉你互联网发展的八大趋势
  • 10
    第7周-任务3-复数模板类
  • 1
    DeepSeek——DeepSeek模型部署实战
    126
  • 2
    基于FPGA的图像双线性插值算法verilog实现,包括tb测试文件和MATLAB辅助验证
    105
  • 3
    基于电导增量MPPT控制算法的光伏发电系统simulink建模与仿真
    29
  • 4
    基于排队理论的客户结账等待时间MATLAB模拟仿真
    44
  • 5
    3天功能开发→3小时：通义灵码2.0+DEEPSEEK实测报告，单元测试生成准确率92%的秘密
    61
  • 6
    Sentinel监测到了服务，但是实时监控不显示曲线图，应该怎么解决这个问题？
    47
  • 7
    通义灵码 2.0 体验报告：AI 赋能智能研发的新范式
    60
  • 8
    通义灵码 2.0 体验报告：AI 赋能智能研发的新范式
    80
  • 9
    类和对象的简述（c++篇）
    48
  • 10
    模拟实现c++中的vector模版
    38

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型