综合项目8-1-4

最新推荐文章于 2021-07-21 11:20:56 发布
全栈的魅力
最新推荐文章于 2021-07-21 11:20:56 发布
阅读量284
点赞数
本文链接：https://blog.csdn.net/m0_46444569/article/details/106117219
版权
<!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">
    <!-- 引入 Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        /*为页面中以下元素设置字体为Microsoft YaHei*/
        body,h3,h6 { font-family: Microsoft YaHei}
        /*热卖商品*/
        .hot h3 {
            margin-top: -20px;
            color: #1A1A1A;
            font-size: 1.5em;
            font-weight: 600;
            margin: 0 0 1em;
            padding: 0 0 0.5em;
            border-bottom: 2px solid #eee;
        }
        .hot p {
            color: #5fa022;;
            font-size: 1em;
            font-weight: 400;
            line-height: 1.8em;
            margin: 1em 0;
        }
        .hot {
            padding: 3em 0;
            border: 1px solid #eee;
            margin: 0 0;
        }
        .hot h6 {
            color: #C15162;
            font-size: 1.5em;
            font-weight: 400;
            margin: 0.3em 0;
        }
        a.morebtn {
            display: block;
            font-size: 1em;
            color: #FFF;
            text-decoration: none;/*去掉a链接下划线*/
            font-weight: 400;
            background: #D96B66;
            padding: 10px 18px;
            transition: 0.5s all ease;
            -webkit-transition: 0.5s all ease;
            border-radius: 3px;
            -webkit-border-radius: 3px;
        }
        a.morebtn:hover{
            background:  #5fa022;
        }
        @media (max-width: 1024px) {
            a.morebtn{
                max-width:410px;/*当视口小于1024px时按钮的最大宽度*/
            }
        }
    </style>
</head>
<body>
<!-- 热卖商品 -->
<div class="hot">
    <div class="container">
        <div class="col-md-4 ">
            <h3>米西奈斯煎饼</h3>
            <img src="images/4.jpg" class="img-responsive" alt="">
            <div>
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择 </p>
                <div class="cur">
                    <span ><a class="morebtn" href="#">添加到购物车</a></span>
                    <span><h6>一口价 ：￥45.00</h6></span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h3>蒙特斯大虾</h3>
            <img src="images/1.jpg" class="img-responsive" alt="蒙特斯大虾">
            <div>
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择 </p>
                <div class="cur">
                    <span><a class="morebtn" href="#">添加到购物车</a></span>
                    <span><h6>一口价 ：￥55.00</h6></span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h3>香酥鸡排</h3>
            <img src="images/3.jpg" class="img-responsive" alt="香酥鸡排">
            <div>
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择 </p>
                <div class="cur">
                    <span><a class="morebtn " href="#">添加到购物车</a></span>
                    <span><h6>一口价 ：￥65.00</h6></span>
                </div>
            </div>
        </div>
    </div>
</div>
<!--热卖商品结束 -->
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

CSS

/*为页面中以下元素设置字体为Microsoft YaHei*/
body,button, input, select, h3,  h6 { font-family: Microsoft YaHei}
/*header部分*/
.head-top{
    background: #5fa022;
    padding: 0.8em 0;
}
.navbar-brand{
    padding: 0 0;
}
/*设置图片logo的大小和位置*/
.navbar-brand>img{
    height: auto;
    margin-right: 5px;
    margin-top: 5px;
    width: 250px;
}
/*设置整个导航菜单的内边距、背景色和阴影*/
.navbar-default{
    padding: 1.5em 0;
    background-color: #f2f0f1;
    box-shadow: 12px -5px 39px -12px;
}
/*设置导航栏中菜单a链接的样式*/
.navbar-default .navbar-nav>li a {
    top: 10px;
    padding: 0.5em 3em;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2em;
    color:#919191;
}
/*设置导航栏菜单的鼠标悬停和获取焦点时的状态*/
.navbar-default .navbar-nav> li >a:hover,
.navbar-default .navbar-nav> li >a:focus {
    background:#D96B66;
    color: white;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}
/*设置导航栏右侧a链接（0.00）的颜色*/
.navbar-right>a{
    color:#D96B66;
}
/*媒体查询：当视口小于970px时，导航菜单字体变小，避免了换行的问题*/
@media (max-width: 970px) {
    .navbar-default .navbar-nav>li a {
        font-size: 1.1em;
    }
}
/*header部分结束*/
/*搜索模块*/
/*设置搜索按钮前面的搜索图标*/
.search{
    background-image: url(../images/banner.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    min-height: 600px;
    margin-top: -20px;
}
/*设置搜索框外层div样式，形成白色透明背景*/
.reservation {
    padding: 60px 60px;
    width:50%;
    background: rgba(255, 255, 255, 0.7);
    margin: 0 auto;
    margin-top:15%;
    font-weight: 500;
    color: #f2f0f1;
    font-size: 1.2em;
    outline: none;
}
/*设置搜索按钮的样式*/
.btn{
    width: 50% ;
    background: #D96B66;
    color: #fff;
    padding: 5px;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}
.form-control{
    color: #8e908d;
}
.searchbtn{
    text-align: center;
}
/*媒体查询：当屏幕小于768像素时搜索表单白色背景大小发生变化*/
@media (max-width: 768px){
    .reservation {
        padding: 20px 20px;
        width: 90%;
    }
}
/*搜索模块结束*/
/*热卖商品*/
.hot h3 {
    margin-top: -20px;
    color: #1A1A1A;
    font-size: 1.5em;
    font-weight: 600;
    margin: 0 0 1em;
    padding: 0 0 0.5em;
    border-bottom: 2px solid #eee;
}
.hot p {
    color: #5fa022;;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.8em;
    margin: 1em 0;
}
.hot {
    padding: 3em 0;
    border: 1px solid #eee;
    margin: 0 0;
}
.hot h6 {
    color: #C15162;
    font-size: 1.5em;
    font-weight: 400;
    margin: 0.3em 0;
}
a.morebtn {
    display: block;
    font-size: 1em;
    color: #FFF;
    text-decoration: none;/*去掉a链接下划线*/
    font-weight: 400;
    background: #D96B66;
    padding: 10px 18px;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}
a.morebtn:hover{
    background:  #5fa022;
}
@media (max-width: 1024px) {
    a.morebtn{
        max-width:410px;/*当视口小于1024px时按钮的最大宽度*/
    }
}
/*热卖商品结束*/
/*特色推荐*/
/*设置左上角图片的位置和宽高*/
.navbar-brand>img{
    height: auto;
    width:250px;
    margin-right: 5px;
    margin-top: 5px;
}
/*设置选项卡菜单的字体颜色*/
.nav-pills>li>a{
    color:#8e908d ;
}
/*设置选项卡菜单鼠标悬停和获取焦点时背景色和字体颜色*/
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #5A9522;
}
.choose{
    border: 1px solid silver;
}
/*设置选项卡内容的位置*/
.tab-content{
    margin: 5px;
    text-align: center;/*居中显示*/
}
/*特色推荐结束*/
/*轮播广告*/
.pic{
    margin: 0 auto;
    width: 800px;
    padding: 20px;
}
.carousel {
    background: white;
}
/*媒体查询：当视口小于992px时缩小了轮播div的宽度，图片换行*/
@media (max-width:992px) {
    .pic{
        width: 415px;
    }
}
/*轮播广告结束*/
/*footer部分*/
.footer p {
    color: #fff;
    font-size: 1em;
    line-height: 1.8em;
    vertical-align: middle;
    margin: 0.4em 0;
}
.footer p a{
    color: #fff;
    text-decoration:none;
}
.footer {
    padding: 1em 0;
    background-color:#D96B66;
}
.footer-right ul {
    padding: 0;
}
.footer-right li {
    display: inline-block;
    margin: 0 1em;
}
.footer-left {
    float: left;
}
.footer-right {
    float: right;
}
/*设置字体图标的大小和颜色*/
.glyphicon{
    font-size: 1.2em;
    color: #f2f0f1 ;
}
在这里插入图片描述
全栈的魅力
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
综合项目8-1-4

<!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-sca
复制链接

扫一扫