有效沟通问答-【官方】百战程序员_IT在线教育培训机构

<!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盒子模型 512楼

<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新特性 513楼

老师为什么我这个右边的列表的宽度是无效的，设置了还是这样哪里的问题呢

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

.cart-Details{display: none;transition:all 10s ease-in-out;}.cart:hover>.cart-Details{ display: block;}在购物车的下拉框实现过渡效果中用滑动门的思路为什么不能出现这个过渡的效果呢？能出现下拉框但是不是过渡的效果了

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 515楼

03_mi.html.rar

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

老师引入link中“icon”是什么，老师是网页图标是什么意思

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 517楼

如何在下拉框中加placeholder呢，让选择教员方向不可选

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 518楼

<!DOCTYPE >
<>
<>
    <>
    <></>
    <>
        : : : : : : : : :: : : : : : : : : : : : : : : :: : : : : : </>
</>
<>
<>
    <></>
    <>
        <></>
        <></>
    </>
    <></>

</>
</>
</>

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

这里面说的太快了，没有说注释的含义，突然说取消注释有点蒙，我不知道这意义是在哪

还有这刚开始p*10+tab 产生 <p></p>.... 10个

也没说必须要有个<!-->

-->在上面

同理嵌套也得有个 >

-->在上面

所以我就怕我之后看的很蒙

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table align="center" border="1" width="500" height="500">
    <tr>
        <td colspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
    </tr>
</table>
<hr>
<table border="10" align="center" width="600" >
    <caption>学生信息表</caption>
    <tr>
        <th colspan="3">学生基本信息</th>
        <th colspan="2">成绩</th>
    </tr>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>专业</th>
        <th>课程</th>
        <th>分数</th>
    </tr>
    <tr align="center">
        <td>球球</td>
        <td>男</td>
        <td rowspan="2">计算机</td>
        <td rowspan="3">程序设计</td>
        <td>68</td>
    </tr>
    <tr align="center">
        <td>楠楠</td>
        <td>女</td>
        <td>89</td>
    </tr>
    <tr align="center">
        <td>小明</td>
        <td>男</td>
        <td>会计</td>
        <td>68</td>
    </tr>
    <tr align="center">
        <td>小明</td>
        <td>男</td>
        <td>建筑</td>
        <td>建筑设计</td>
        <td>68</td>
    </tr>
</table>
</body>
</html>

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5基础元素 521楼

有序列表可以这样嵌套吗：

<ol>
<li>肉类：
    <ol>
        <li>猪肉</li>
        <li>鸡肉</li>
        <li>牛肉</li>
    </ol>
</li>
<li>蔬菜</li>
<li>水果</li>
</ol>

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5基础元素 522楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米首页</title>
    <link rel="icon" href="image/favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头部-->
<div class="header">
    <img src="image/bb3c06a430689ba2357dd7d1fbfa6bab.jpg" alt="">
</div>
<!--黑色导航条-->
<div class="header-wrapper">
    <div class="topbar-wrapper">
        <ul class="topbar-nav">
            <li><a href="#">小米商城</a></li>
            <li><a href="#">MUI</a></li>
            <li><a href="#">LOT</a></li>
            <li><a href="#">云服务</a></li>
            <li><a href="#">天星科技</a></li>
            <li><a href="#">有品</a></li>
            <li><a href="#">小爱开放平台</a></li>
            <li><a href="#">企业团购</a></li>
            <li><a href="#">资质证照</a></li>
            <li><a href="#">协议规则</a></li>
            <li><a href="#">下载app</a></li>
            <li><a href="#">智能生活</a></li>
            <li><a href="#">Select Location</a></li>
        </ul>
        <ul class="inf">
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">消息通知</a></li>
        </ul>

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


/*头部样式*/
.header{
    width:100%;
    height:120px;
    background-color:red;
    overflow:hidden;
    position:relative;
}
.header img{
    height:120px;
    position: absolute;
    left:50%;
    transform:translateX(-50%);
}
/*黑色导航条*/
.header-wrapper{
    width:100%;
    height:40px;
    background-color: #333333;
}
.topbar-wrapper{
    margin:0 auto;
}
.top-bar{
    width:794.13px;
    height:40px;
    background-color: #cc0000;
    float:left;
}
.topbar-nav li {
    float: left;
}
.topbar-nav a{
    color:#b0b0b0;
    font-size:12px ;
    line-height:40px;
    margin:10px;
}
.inf{
    width:142.48px;
    height:40px;
    background-color: blue;
    float:left;
}
.inf li{
    float:left;
}
.inf a{
    color:#b0b0b0;
    font-size:12px ;
    line-height:40px;

}

截图

两个ul是兄弟元素，给他们设置浮动后应该水平排列，这里蓝色部分为什么是这样能呢？

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 523楼

这节课的 list-style-image 那个图片太大了，能靠写代码调整图片大小么

list{

list-style-image: url(" a.jpg");

}

发现引用的a.jpg太大了

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS常用属性 524楼

<style>
        .box {
            width: 300px;
            height: 300px;
        }

        .left {
            float: left;
            width: 150px;
            height: 150px;
        }

        .top {
            float: top;
            width: 150px;
            height: 150px;
            background-color: skyblue;
        }

        .bottom {
            float: bottom;
            width: 150px;
            height: 150px;
            background-color: pink;
        }

        .right {
            float: right;
            width: 150px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
          <div class="top"></div>
          <div class="bottom"></div>
        </div>
        <div class="right"></div>
      </div>
</body>

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

同学您好