网页热卖商品模块（栅格系统）

最新推荐文章于 2021-12-21 22:03:04 发布

洋毛

最新推荐文章于 2021-12-21 22:03:04 发布

阅读量673

点赞数

分类专栏： html 文章标签： css3 html5 bootstrap css

本文链接：https://blog.csdn.net/weixin_45968014/article/details/106177962

版权

html 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

技术要点：Bootstrap栅格系统
页面结构：
在这里插入图片描述
实现步骤：

实现代码展示：

<!DOCTYPE html>
<html>
<head>
<title>网页热卖商品模块</title>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
<style>
    body,h3,h6{
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }
@media screen and (min-width:992px) {
    img{
    width: 200px;
    height: 200px;
}
.glyphicon{
    color:green;
    margin: 10px;
    display: block;
}
.btn{
    width: 200px;
    height: 30px;
    font-size: 15px;
    margin: 0px;
    background-color: red;
    color: white;
    display: block;
}
h6{
    color: red;
}
}
@media screen and (max-width:992px){
img{
    width: 300px;
    height: 300px;
}
.glyphicon{
    color:green;
    margin: 10px;
    display: block;
    font-size: 15px;
}
.btn{
    width: 300px;
    background-color: red;
}
.col-sm-4{
    width: 500px;
}
h6{
    color: red;
}
}
@media screen and (max-width:768px){
    img{
    width: 200px;
    height: 200px;
}
.glyphicon{
    color:green;
    margin: 10px;
    display: block;
}
.btn{
    width: 200px;
    height: 30px;
    font-size: 15px;
    background-color: red;
    color: white;
    display: block;
}
h6{
    color: red;
}
}
</style>
</head>
<body>
    <div class="hot">
        <div class="container">
            <div class="container">
                <div class="row">
                  <div class="col-sm-4">
                    <h3>米西奈斯煎饼</h3>
                    <img src="image/煎饼.jpg" alt="">
                    <div class="glyphicon glyphicon-thumbs-up">两种口味可供选择</div>
                    <button type="button" class="btn btn-secondary btn-lg btn-block">添加到购物车</button>
                    <h6>一口价：￥45.00</h6>
                  </div>
                  <div class="col-sm-4">
                    <h3>蒙特斯大虾</h3>
                    <img src="image/大虾.jpg" alt="">
                    <div class="glyphicon glyphicon-thumbs-up">两种口味可供选择</div>
                    <button type="button" class="btn btn-secondary btn-lg btn-block">添加到购物车</button>
                    <h6>一口价：￥65.00</h6>
                  </div>
                  <div class="col-sm-4">
                   <h3>香鲜鸡排</h3>
                   <img src="image/鸡排.jpg" alt="">
                   <div class="glyphicon glyphicon-thumbs-up">两种口味可供选择</div>
                   <button type="button" class="btn btn-secondary btn-lg btn-block">添加到购物车</button>
                   <h6>一口价：￥55.00</h6>
                  </div>
                </div>
              </div>
        </div>
    </div>
      
    <script src="bootstrap-3.3.7/js/jquery.min.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

当浏览器窗口大于等于992px时：
在这里插入图片描述
当浏览器小于992px时：

当浏览器小于768px时：

在此次任务的难点在于浏览器窗口变化的样式，.col-sm-4{ width: 500px;}这句为关键。

洋毛

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
网页热卖商品模块（栅格系统）

技术要点：Bootstrap栅格系统页面结构：实现步骤：实现代码展示：<!DOCTYPE html><html><head><title>网页热卖商品模块</title><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=de
复制链接

扫一扫