会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133730个问题

你好老师,我这除了h3已经设置高度的,其他内容怎么撑不开高度显示不出来呐

<div class="content">

        <div class="wrap">


        <!-- 手机模块开始 -->


            <div class="phone">

                <h3 class="title">手机</h3>

                <div class="phone-box">

                    <div class="phone-box-left">

                        <a href="#"><img src="./images/phone_left.jpg" alt=""></a>

                    </div>

                    <div class="phone-box-right">

                        <div class="item">

                            <a href="#">

                                <img src="./images/phone-right.jpg" alt="" class="item-img">

                                <p class="item-name">小米10至尊纪念版</p>

                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>

                                <p class="item-price">5299元起</p>

                            </a>

                        </div>

                        <div class="item">

                            <a href="#">

                                <img src="./images/phone-right.jpg" alt="" class="item-img">

                                <p class="item-name">小米10至尊纪念版</p>

                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>

                                <p class="item-price">5299元起</p>

                            </a>

                        </div>

                        <div class="item">

                            <a href="#">

                                <img src="./images/phone-right.jpg" alt="" class="item-img">

                                <p class="item-name">小米10至尊纪念版</p>

                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>

                                <p class="item-price">5299元起</p>

                            </a>

                        </div>

                        <div class="item">

                            <a href="#">

                                <img src="./images/phone-right.jpg" alt="" class="item-img">

                                <p class="item-name">小米10至尊纪念版</p>

                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>

                                <p class="item-price">5299元起</p>

                            </a>

                        </div>

                        <div class="item">

                            <a href="#">

                                <img src="./images/phone-right.jpg" alt="" class="item-img">

                                <p class="item-name">小米10至尊纪念版</p>

                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>

                                <p class="item-price">5299元起</p>

                            </a>

                        </div>

                        <div class="item">

                            <a href="#">

                                <img src="./images/phone-right.jpg" alt="" class="item-img">

                                <p class="item-name">小米10至尊纪念版</p>

                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>

                                <p class="item-price">5299元起</p>

                            </a>

                        </div>

                        <div class="item">

                            <a href="#">

                                <img src="./images/phone-right.jpg" alt="" class="item-img">

                                <p class="item-name">小米10至尊纪念版</p>

                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>

                                <p class="item-price">5299元起</p>

                            </a>

                        </div>

                        <div class="item">

                            <a href="#">

                                <img src="./images/phone-right.jpg" alt="" class="item-img">

                                <p class="item-name">小米10至尊纪念版</p>

                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>

                                <p class="item-price">5299元起</p>

                            </a>

                        </div>

                    </div>

                </div>

                <div class="big-img">

                    <a href="#">

                        <img src="./images/phone_ad.jpg" alt="">

                    </a>

                </div>

            </div>


        <!-- 手机模块结束 -->


        </div>

    </div>



/* 主体开始 */


    .content{

        width: 100%;

        background: #f5f5f5;

        overflow: hidden;

        padding: 4px 0 12px;

    }


    .title{

        font-size: 22px;

        color: #333;

        text-align: left;

        font-weight: 200;

        line-height: 58px;

    }


image.png



WEB前端全系列/第一阶段:HTML5+CSS3模块/商城官网项目 515楼

HTML:
<!-- 79-小米.html     -->
<!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>小米</title>
    <link rel="stylesheet" href=".\css\reset.css">
    <link rel="icon" href=".\images\favicon.ico">
    <link rel="stylesheet" href=".\css\mi.css">

</head>

<body>
    <!-- 头部开始 -->
    <div class="header">
        <a href="#"><img src=".\images\a2a9e6db5e3c5374301827435d8595c6.jpg" alt="照片无法显示"></a>
    </div>
    <!-- 头部结束 -->
    <!-- 黑色导航条 -->
    <div class="nav">
        <div class="wrap">
            <div class='left'>
                <ul>
                    <li><a href="#">小米商城</a><span>|</span></li>
                    <li><a href="#">MIUI</a><span>|</span></li>
                    <li><a href="#">IOT</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li class='download'><a href="#">下载App</a><span>|</span>
                        <div class="triangle"></div>
                        <div class='download-QRcode'>
                            <img src="./images/download.png" alt="无法显示">
                            <p>小米商城APP</p>
                        </div>
                    </li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                </ul>
            </div>
            <div class="right">
                <div class='user-info'>
                    <ul>
                        <li><a href="">登录</a></li>
                        <li><a href="">注册</a></li>
                        <li class='message'><a href="#">消息通知</a></li>

                    </ul>
                </div>
                <div class='shop-cart'>
                    <p><img src="" alt=""><span>购物车</span></p>
                    <div class='triangle'></div>
                    <div class="cart-list"></div>

                </div>
            </div>

        </div>

    </div>

</body>

</html>

CSS

body{
    background-color: blueviolet;
}
.header{
    width: 100%;
    height: 120px;
    /* overflow: hidden; */
    /* position: relative; */

}
.header img{
    height: 120px;
    margin: 0 auto;
    /* position: absolute;
    left: 50%;
    transform: translate(-50%);  */
}
.nav{
    width: 100%;
    height: 40px;
    background-color: #333333;
}
.wrap{
    height: 40px;
    width: 1226px;
    margin: 0 auto;
    /* background-color: pink; */
}
.wrap .left{
    /* width: 900px; */
    height: 40px;
    line-height: 40px;
    float: left;
    /* background-color: orange; */
}

.wrap .left>ul>li{
    /* width: 69px; */
    /* padding:0 5px; */
    float: left;
    
    box-sizing: border-box;
    text-align: center;
}
.wrap .left>ul>li>a{
    font-size: 12px;
    color: #a4a484;
}
.wrap .left>ul>li:hover>a{
    color: white;
}
.wrap .left span{
    margin: 0 3.6px;
}
.wrap .right{
    float: right;
    display: flex;
    justify-content: space-around;
}
.wrap .right .user-info{
    width:137px;
    height: 40px;
    line-height: 40px;
    margin: 0 5px;
    float: left;
    /* background-color: yellow; */
}
.wrap .user-info .message{
    margin: 0 10px;
}
/* .wrap .user-info>ul>li{
    /* float: left; */
/* .wrap .user-info>ul{
    justify-content:space-around ;
    display: flex;
} */
.user-info ul{
    display: flex;
    justify-content: space-between;
}
.wrap .user-info>ul>li>a{
   font-size: 12px;
   color: #a4a484;
   

}
.wrap .shop-cart{
    float: right;
    width: 120px;
    height: 40px;
    line-height: 40px;
    background-color:paleturquoise;
    position: relative;

}
.wrap .shop-cart:hover{
    background-color: white;
}
.wrap .shop-cart p{
    font-size: 12px;
    color: #a4a484;
}
.wrap .shop-cart .cart-list{
    width: 316px;
    height: 100px;
    background-color: white;
    position: absolute;
    bottom: -100px;
    left: -196px;
    display: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.wrap .shop-cart:hover>p{
    color: orange;
}
.wrap .shop-cart:hover .cart-list{
    display: block;

}
.download{
    
    /* width: 124px; */
    position: relative;
    transition: all .3s;
}
.download:hover>.download-QRcode{

    display: block;
}

.download:hover>.triangle{
    display: block;
}
.download .triangle{
    width: 0;
    height: 0;
    border-bottom: 8px solid white;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: 0;
    left: 42%;
    transform: translate(-8px);
    display: none;
    /* z-index: 999; */
}
.download .download-QRcode{
    width: 124px;
    height: 148px;
    position: absolute;
    top: 40px ;
    left: 50%;
    transform: translate(-62px);
    background-color: white;
    text-align: center;
    display: none;
    /* transition: all 10s; */
}
.download .download-QRcode img{
    width: 90px;
    margin: 18px 0 12px;
}
.download .download-QRcode p{
    position: relative;
    bottom: 26px;
    font-size: 14px;
}

老师我那个transition设置了all 0.3s为什么没有反应?

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 517楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/前端入门与基础知识 520楼

<!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>
    <!-- 盒子模型之组成部分:
                1.内容区域 Content
                   1) 默认大小:由内容本身大小撑开
                   2)手动设置:由width和height两个属性来完成盒子大小设置

                2.内边距  Padding
                3.外边框  Border
                4.外边距  Margin-->

        <!-- 实操细节:
                    1.宽度设置百分比生效
                    2.高度设置百分比不生效,高度一般设置px
                 -->
    <style>
        .image{
            width:30%;   /*手动设置了图片内容大小,不压缩比例,只设置高度即可*/
            /* 因为手机屏幕大小不是固定尺寸的,所以手机宽度一般设置百分比,这样可以适配各种尺寸的手机,
            为原比例的30% */
        }
    </style>
</head>
<body>
    <img class="image" src="hmbb.jpg" alt="海绵宝宝">
</body>
</html>


问题:为什么高度height设置百分比不生效呢?

          搞不懂这个实操细节,意思是设置高度只能用XXpx,而宽度可以是XXpx和百分比吗?

          那什么情况下,只设置width,不设置height?什么情况下只设置高度不设置宽度呢?

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS盒子模型 522楼

<div class="zhu">
    <div class="zhu-center">
        < img src="images/u=1487180403,3048898319&fm=15&gp=0.jpg" alt="">
        <div class="center-left">
            <ul>
                <li>< a href=" "><div>手机 电话卡<i class="iconfont">&#xe621</i></div></ a></li>
                <div class="right-list">
                    <ul>
                        <li>< a href="#">
                            < img src="images/c89e7b3a3495acaa0a4df271d9da59ea.png" alt="">
                            <p>小米10S</p >
                        </ a></li>
                    </ul>
                </div>



            </ul>

          </div>
        </div>

    </div>
    
.zhu{
    width: 100%;
    height: 460px;
    position: relative;

}
.zhu-center{
    width: 1226px;
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -613px;
}
.center-left{
    width: 234px;
    height: 460px;
    padding: 20px 0 ;
    background-color: rgba(105,101,101,.6);
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
}
.center-left li{
    width: 234px;
    height: 42px;
    padding-left: 30px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 42px;
    text-align: left;
}
.center-left a{
    color: #fff;
}
.center-left i{
    float: right;
    padding-right: 20px;
}
.center-left>ul>li:hover{
    background-color: #ff6700;
}
.center-left>ul>li:hover .right-list{
    display: block;
}
.center-left>ul li:hover i{
    color: #e0e0e0;
}
.right-list {
    width: 992px;
    height: 460px;
    position: absolute;
    top: 0;
    left: 234px;
    border: 1px solid #e0e0e0;
    border-left: none;
    background-color: #fff;
    padding: 2px 0;
    box-sizing: border-box;
    box-shadow: 0 8px 16px rgba(0,0,0,.18);
    display: none;
}
.right-list>ul{
    float: left;
    width: 247.75px;
    height: 100%;
    box-shadow: none;
}
.right-list li{
   height: 76px;
    width: 100%;
    padding: 18px 20px 18px 20px;
    box-sizing: border-box;
}
.right-list p{
    color: #333;
    font-size: 14px;
    line-height: 40px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    float: left;
}
.right-list img{
    float: left;
    margin-right: 14px;
}
.right-list li:hover p{
   color: #ff6700;
}    
  
  
老师,我想问问,怎么我鼠标悬停在左边的li上,右边的list不出现


WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 523楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/商城官网项目 524楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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