会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133528个问题
JAVA 全系列/第二十一阶段:Spring Cloud Alibaba技术栈/RocketMQ 33211楼
JAVA 全系列/第二十四阶段:容器管理技术/Docker 33212楼
JAVA 全系列/第一阶段:AI驱动的JAVA编程/面向对象详解和JVM底层内存分析 33213楼
JAVA 全系列/第六阶段:JavaWeb开发/Servlet技术详解 33214楼
JAVA 全系列/第四阶段:数据库与AI协同技术实战/SQL 语言 33216楼
Python 全系列/第二阶段:Python 深入与提高/GUI编程(隐藏) 33218楼

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        body{

            background-color: #f5f5f5;

        }

        .exhibit{

            width: 1226px;

            height: 628px;

            margin: 0 auto;

            /* background-color: aqua; */

        }

        .left{

            float: left;

            width: 234px;

            height: 614px;

            /* background-color: black; */

        }

        .right{

            float: right;

            width: 992px;

            height: 614px;

            /* background-color: #fff; */

        }

        .box{

            float: left;

            width: 234px;

            height: 300px;

            padding: 20 auto;

            margin-bottom: 14px;

            margin-left: 14px;

            background-color: #fff;

            text-align: center;

        }

        .sal{

            height: 160px;

            width:160px;

            margin-top: 20px;

        }

        .ex{

            height: 614px;

            width: 234px;

        }

        .title{

            margin: 0 10px 2px;

            font-size: 14px;

            font-weight: 400;

            color: #333;

            text-align: center;


        }

        .desc{

            margin: 0 10px 10px;

            height: 18px;

            font-size: 12px;

            color: #b0b0b0;

            text-overflow: ellipsis;

            white-space: nowrap;

            text-align: center;

            overflow: hidden;

        }

        .price{

            margin: 0 10px 14px;

            text-align: center;

            color: #ff6700;

        }


    </style>

</head>

<body>

    <div class="exhibit">

        <div class="left">

            <img src="./images/1.webp" alt="1" class="ex">

        </div>

        <div class="right">

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>


            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

        </div>

    </div>

</body>

</html>

image.png

WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 33219楼
Python 全系列/第一阶段:Python入门/编程基本概念 33220楼

<div class="white-nav">
    <div class="white-nav-bar">
        <div class="bar-left">
            <a href="#">
                <img  class="mi-logo"src="images/mi-logo.png" alt="">
                <img  class="mi-home" src="images/mi-home.png" alt="">
            </a>
        </div>
        <div class="bar-center">
            <ul>
                <li><a href="#">小米手机
                <div class="list">
                    <div class="list-center">
        <ul>
            <li>
                <a href="#"><div class="img-box"><img src="images/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg" alt="">
                </div>
                    <p class="name1">小米10S</p>
                    <p class="price1">3299元起</p></a>
            </li>
            <li><a href="#"><div class="img-box"><img src="images/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg" alt="">
            </div>
                <p class="name1">小米10S</p>
                <p class="price1">3299元起</p></a></li>
            <li><a href="#"><div class="img-box"><img src="images/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg" alt="">
            </div>
                <p class="name1">小米10S</p>
                <p class="price1">3299元起</p></a></li>
            <li><a href="#"><div class="img-box"><img src="images/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg" alt="">
            </div>
                <p class="name1">小米10S</p>
                <p class="price1">3299元起</p></a></li>
            <li><a href="#"><div class="img-box"><img src="images/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg" alt="">
            </div>
                <p class="name1">小米10S</p>
                <p class="price1">3299元起</p></a></li>
            <li class="last-list"><a href="#"><div class="img-box"><img src="images/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg" alt="">
            </div>
                <p class="name1">小米10S</p>
                <p class="price1">3299元起</p></a>
            </li>
        </ul>
    </div>
    </div>
                </a></li>
.white-nav{
    width: 1423px;
    height: 100px;
    background-color: #ffffff;
    position: relative;

}
.white-nav-bar{
    width: 1226px;
    height: 100%;
    margin: 0 auto;
}
.bar-left{
    width: 55px;
    height: 55px;
    background-color: #ff6700;
    margin-top: 22.5px;
    float:left;
    position: relative;
    overflow: hidden;

}
.bar-center{
    width: 875px;
    height: 100%;
    float: left;
    line-height: 100px;

}
.bar-right{
    height: 100px;
    width: 296px;
    position: relative;
    float: left;
}
.bar-center>ul{
    margin-left: 179px;

}
.bar-center li{
    padding: 0 10px;
    float: left;


}
.bar-center>ul>li>a{
    color: #333333;
}
.bar-center>ul>li>a:hover{
    color: #ff6700;
}
.mi-home{
    width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
}
.mi-logo{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.bar-left:hover .mi-logo{
    left: -100%;
}
.bar-left:hover .mi-home{
    left: 0;
}
.bar-left img{
    transition: all .2s;
}
.list{
    width: 1423px;
    height: 0;
    background-color: #fff;
    position: absolute;
    left: 40px;
    top: 100px;
    box-shadow: 0 3px 4px rgba(0,0,0,.2);
    transition: all .2s;
    overflow: hidden;
    float: left;



}
.list-center{
    width: 1226px;
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -613px;
    float: left;
}
.list-center li{
    width: 204px;
    padding: 0;
}
.img-box{
    width: 100%;
    height: 110px;
    border-right: 1px solid #eee;
    box-sizing: border-box;
    margin-top: 35px;
    margin-bottom: 16px;
}
.img-box img{
    height: 100%;
}
.list-center p{
    font-size: 12px;
    line-height: 20px;
}
.last-list .img-box{
  border-right: none ;
}
.name1{
    color: #333;
}
.price1{
    color: #ff6700;
}
.bar-center li:hover .list{
    height: 229px;
    border-top: 1px solid rgba(224,224,224,.6);

}
.bar-right{
    height: 100px;
    position: relative;
}
.bar-right input{
    width: 244px;
    height: 50px;
    border: 1px solid #e0e0e0;
    padding: 0 10px;
    box-sizing: border-box;
    outline: none;
    float: left;
    border-right: none;
    margin-top: 25px;

}
.bar-right>button{
    width: 52px;
    height: 50px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    float: left;
    margin-top: 25px;

}
.bar-right input:focus{
    border-color: #ff6700;
}
.bar-right input:focus~.iconfont{
    border-color: #ff6700;
}
.bar-right>button:hover{
    background-color: #ff6700;
    color: #fff;
}

.text-list{
    width: 243px;
    height: 0;
    border-top: none;
    position: absolute;
    top: 75px;
    left: 0;
    z-index: 990;
    background-color: #fff;
}
.bar-right input:focus+.text-list{
    height: 240px;
    border: 1px solid #ff6700;
    border-top: none;
}

老师我想问问为什么我的list显示不了100%的宽度

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 33221楼
JAVA 全系列/第六阶段:项目管理与SSM框架/SpringMVC 33222楼
Python 全系列/第六阶段:数据库与AI协同技术实战/mysql的使用 33223楼
JAVA 全系列/第十六阶段:全文检索与日志管理/Elasticsearch旧 33224楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
        }
        .box1,.top,.bottom{
            width: 100%;
        }
        .box{
            height: 1005px;
        }
        .center{
            width: 1240px;
            height: 1005px;
            background-color:#807e73;
            margin: 0 auto;
            text-align: center;
        }
        .top{
            height: 610px;
        }
        .bottom{
            height: 375px;
        }
        .top>div{
            width: 615px;
            height: 610px;
            float: left;
            margin-top: 10px;
            border-bottom:10px;
            background-color: azure;

        }
        .top-lift,.bottom1,.bottom2,.bottom3 {
            margin-right: 9px;
        }
        .bottom>div{
            width: 303px;
            height: 375px;
            float: left;
            margin-top: 10px;
            background-color: azure;
        }
        .ptop1{
           color: #333;
            font-size: 28px;
        }
        .ptop2{
            color: #333;
            font-size: 18px;
        }
        .ptop3{
            color: #c00;
            font-size: 22px;
        }
        .sptop1{
            font-size: 14px;
        }
        .imgtop{
            width: 460px;
            height: 460px;
            padding-top: px;
        }
        .imgbottom{
            width: 230px;
            height: 230px;
        }
        .pbottom1{
            color: #333;
            font-size: 16px;

        }
        .pbottom2{
            color: #999;
            font-size: 14px;

        }
        .pbottom3{
            color: #c00;
            font-size: 22px;

        }
        .spanbottom{
            font-size: 14px;
        }

    </style>
</head>
<body>
<div class="box1">
    <div class="center">
        <div class="top">
            <div class="top-lift">
                <a href="https://detail.meizu.com/item/meizu18.html" target="_blank">
                    <p class="ptop1">魅族 18</p>
                    <p class="ptop2">限时领券立省200 | 赠液态壳</p>
                    <p class="ptop3"><span class="sptop1">¥</span>3999</p>
                    <img src="meizu1.png" alt="魅族" title="魅族" class="imgtop" pos/>
                </a>
            </div>
            <div class="top-right">
                <a href="https://detail.meizu.com/item/meizu18pro.html" target="_blank">
                    <p class="ptop1">魅族 18 Pro</p>
                    <p class="ptop2">限时领券立省300 | 赠液态壳</p>
                    <p class="ptop3"><span class="sptop1">¥</span>4999</p>
                    <img src="meizu2.png" alt="魅族" title="魅族" class="imgtop"/>
                </a>
            </div>

        </div>
        <div class="bottom">
            <div class="bottom1">
                <a href="https://detail.meizu.com/item/meizu17.html" target="_blank">
                    <img src="meizu3.png" alt="魅族" title="魅族" class="imgbottom" />
                    <p class="pbottom1">魅族 17「AG梦幻独角兽」</p>
                    <p class="pbottom2">高通骁龙 865 | 120 Hz尝鲜模式</p>
                    <p class="pbottom3"><span class="spanbottom">¥</span>3699</p>

                </a>
            </div>
            <div class="bottom2">
            <a href="https://detail.meizu.com/item/meizu17.html" target="_blank">
                <img src="meizu4.png" alt="魅族" title="魅族" class="imgbottom" />
                <p class="pbottom1">魅族 17「松深入墨」</p>
                <p class="pbottom2">高通骁龙 865 | 120 Hz尝鲜模式</p>
                <p class="pbottom3"><span class="spanbottom">¥</span>3699</p>
            </a>
            </div>
            <div class="bottom3">
                <a href="https://detail.meizu.com/item/meizu17pro.html" target="_blank">
                    <img src="meizu5.png" alt="魅族" title="魅族" class="imgbottom" />
                    <p class="pbottom1">魅族 17 Pro「定白」</p>
                    <p class="pbottom2">限时领券至高立省1200+12期免息</p>
                    <p class="pbottom3"><span class="spanbottom">¥</span>4299</p>
                </a>
            </div>
            <div class="bottom4">
                <a href="https://detail.meizu.com/item/meizu17pro.html" target="_blank">
                    <img src="meizu6.png" alt="魅族" title="魅族" class="imgbottom" />
                    <p class="pbottom1">魅族 17 Pro「乌金</p>
                    <p class="pbottom2">限时领券至高立省1200+12期免息</p>
                    <p class="pbottom3"><span class="spanbottom">¥</span>4299</p>
                </a>
            </div>
        </div>



    </div>
</div>
</body>
</html>


WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 33225楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637