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

<form action="提交页面.html">
    <p>
        性别：
        <input type="radio" name="sex" id="man"/>
        <lable for="man">男</lable>
        <input type="radio" name="sex"id="woman"/>
        <lable for="woman">女</lable>
    </p>
</form>

提升用户体验度点击文字这里，代码如上，浏览器里却不能点击文字

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

<!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>Margin布局</title>
    <style>
        .box{
            width: 100%;
            height: 1155px;
            background-color: aqua;
        }
        .wrap{
            width: 1240px;
            height: 1150px;
            background-color: red;
            /* （父元素宽度-子元素宽度）/2 */
            margin: 0 auto;
        }
        .wrap>div{
            width: 303px;
            height: 375px;
            background-color: seagreen;
            float: left;
            margin-top: 10px;
            margin-right: 9px;
        }
        .four{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">
            <div></div>
            <div></div>
            <div></div>
            <div class="four"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

老师我想请问一下在这个布局下我想测试第四个测试是否被挤下一行的第一个，但是在内联样式设置第四个div背景为粉红色为什么没有显示出来呢？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" align="center" width="500px" height="200px">
    <tr bgcolor="#ffd700">
        <td>片名</td>
        <td>日期</td>
        <td>时间</td>
        <td>电影院</td>
        <td>票价</td>
    </tr>
    <tr>
        <td rowspan="2">【国】卡拉是条狗</td>
        <td rowspan="3">三月七日</td>
        <td  rowspan="6">7:30</td>
        <td rowspan="2">红楼电影院</td>
        <td>小厅：40</td>
    </tr>
    <tr>
        <td>大厅：50</td>
    </tr>
    <tr>

        <td>【美】谍海计中计</td>
        <td>花市电影院</td>
        <td>30</td>
    </tr>
    <tr>
        <td >【美】正义守望者</td>
        <td>三月八日</td>
        <td rowspan="3">华兴国际电影院</td>
        <td>小厅：35</td>
    </tr>
    <tr>
        <td>【国】周宇的火车</td>
        <td>三月十日</td>
        <td>大厅：45</td>
    </tr>
    <tr>
        <td>【美】冰川时代</td>
        <td>三月十一日</td>
        <td>情侣座：80</td>
    </tr>
</table>
</body>
</html>

老师我交不了截图，截图要下载插件，但是我下载了也没有用，重启浏览器还是没有用

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

问题1：对第9个图片上第三行文字进行绝对定位时，为什么设置left为0，文字是整体靠左对齐?设置left为92px时文字才处于相对居中位置，而前两行文字和第1，5个图片上所有文字均是设置left为0来实现文字整体居中的。

<!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>
        .box{
            width:100%;
            height:1155px;
        }
        .wrap{
            width:1240px;
            height:1155px;
            margin:0 auto;
        }
        /* 给img1，5，9的父元素设置相对定位 */
        .wrap-x{
            position:relative;
        }
        .wrap>div{
            width:303px;
            height:375px;
            float:left;
            margin-top:10px;
            margin-right:9px;
            background-color:gainsboro;
            /* 图片居中设置，用margin:0 auto;会和外边距设置冲突
            只显示水平居中，不显示外边距 */
            text-align:center;
        }
        .wrap>div:nth-child(4n){
            margin-right:0;
        }
        img{
            width:230px;
            height:230px;
        }
        .imgs{
            width:100%;
            height:100%;
        }
        /* 给img1，5，9上的文字进行绝对定位，使之出现在图片上 */
        .name{
            width:303px;
            height:31.33px;
            position:absolute;
            top:220px;
            left:0;
            color:#FFFFFF;
            font-size:21px;
            font-weight:700;
            margin-bottom:0;
        }
        .desc{
            width:303px;
            height:20.67px;
            position:absolute;
            top:260px;
            left:0;
            color:#ffffff;
            font-size:14px;
        }
        .price{
            width:82.06px;
            height:36px;
            position:absolute;
            top:280px;
            left:100px;
            color:#ebce6b;
            font-size:24px; 
            font-weight:700;
        }
        .original1{
            font-size:14px;
            font-weight:700;
            color:#ffffff;
            text-decoration:line-through;
            margin-left:4px;
        }
        .goods-name{
            width:303px;
            height:24px;
            color: #333333;
            font-size:16px;
            margin:0 0 2px;
        }
        .goods-desc{
            width:303px;
            height:20.67px;
            color:#999999;
            font-size:14px;
        }
        /* 为什么设置第三个P标记里的价格字体不生效?但P嵌套的span标记设置的字体却能生效？ */
        .goods-price{
            /* width:58.71px; */
            /* height:32.67px; */
            color:#CC0000;
            font-size:22px;
            padding:0 0 0 14px;
        }
        a{
            text-decoration:none;
        }
        span{
            width:14px;
            height:20.67px;
            color:#CC0000;
            font-size:14px;
            padding:0 0 0 0;
        }
        .original2{
            width:37.36px;
            height:15.33px;
            text-decoration:line-through;
            color:#666666;
            font-size:14px;
            margin-left:8px;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">
          <div class="wrap-x"><a href="#">
              <img src="../images/img1.jpg" class="imgs" alt="">
              <p class="name">魅族 EP3C 耳机</p>
              <p class="desc">【限时特惠99元】</p>
              <p class="price">￥99<span class="original1">￥120</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img2.png" alt="">
             <p class="goods-name">魅族 POP Pro 主动降噪耳机</p>
             <p class="goods-desc">三重混合主动降噪技术 | 三麦克风智能通话降噪</p>
             <p class="goods-price"><span>￥</span>499</p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img3.png" alt="">
              <p class="goods-name">魅族 POP2s 真无线耳机</p>
              <p class="goods-desc">【限时3期免息】好声音标杆 | Flyme 妙连</p>
              <p class="goods-price"><span>￥</span>299</p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img4.png" alt="">
              <p class="goods-name">魅族 EP63NC 无线降噪耳机</p>
              <p class="goods-desc">【限时特惠249元+3期免息】</p>
              <p class="goods-price"><span>￥</span>249<span class="original2">￥499</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img5.jpg" class="imgs" alt="">
              <p class="name">魅族 HD60 头戴式蓝牙耳机</p>
              <p class="desc">【限时特惠329元+3期免息】</p>
              <p class="price">￥329<span class="original1">￥499</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img6.png" alt="">
              <p class="goods-name">魅族 HD60 降噪耳机</p>
              <p class="goods-desc">【限时特惠799元+12期免息】</p>
              <p class="goods-price"><span>￥</span>799<span class="original2">￥1099</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img7.png" alt="">
              <p class="goods-name">魅族 POP2 真无线蓝牙耳机</p>
              <p class="goods-desc">【限时特惠249元】</p>
              <p class="goods-price"><span>￥</span>249<span class="original2">￥399</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img8.png" alt="">
              <p class="goods-name">魅族 HIFI 解码耳放</p>
              <p class="goods-desc">【限时特惠149元】</p>
              <p class="goods-price"><span>￥</span>149<span class="original2">￥169</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img9.jpg" class="imgs" alt="">
              <p class="name">MEIZU UR 高端定制耳机 预约</p>
              <p class="desc">【预约专用】私人定制，为你而声</p>
              <p class="price">￥200</p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img10.png" alt="">
              <p class="goods-name">MEIZU UR LIVE 特调版</p>
              <p class="goods-desc">手工定制公模 ｜ 楼氏定制四单元动铁</p>
              <p class="goods-price"><span>￥</span>1299</p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img11.png" alt="">
              <p class="goods-name">POP 真无线蓝牙耳机</p>
              <p class="goods-desc">【限时特惠299元】</p>
              <p class="goods-price"><span>￥</span>299<span class="original2">￥499</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img12.png" alt="">
              <p class="goods-name">魅族 EP2X 耳机</p>
              <p class="goods-desc">一体式线控 | 3.5mm接口 | 流线设计</p>
              <p class="goods-price"><span>￥</span>69<span class="original2">￥129</span></p>
          </a></div>
       </div>
    </div>
</body>
</html>

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

 <div class="conetnt-title">推荐餐厅</div>
    <div class="conetnt">
        <div class="items">
            <div class="items-top">
                <img src="img/xl-logo2x.png" alt="">
                <p>商家标题一</p>
                <p>人均：￥20.00 |10人预订</p>
                <p>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                </p>
            </div>
        </div>
            <div class="items-bottom">南屏街金马坊</div>
        </div>
    </div>

.conetnt-title{
    width: 100%;
    height: 25px;
    padding-left: 10px;
    box-sizing: border-box;
    color: #017e5c;
    text-align: left;
    line-height: 25px;
    background-color: #eee;
}
.conetnt{
    padding: 10px;
    box-sizing: border-box;
}
.items{
    width: 100%;
    height: 110px;
}
.items-top{
    width: 100%;
    height: 80px;
    background-color:red;
    display: flex;
}
.items-bottom{
    width: 100%;
    height: 30px;
    background-color: #eee;
    text-align: left;
    line-height: 30px;
    color: #a6a6a6;
}
.items-top>img{
    width: 75px;
    height: 75px;
    margin: 5px 15px 5px 5px;
}

老师，这个字体出来为啥是水平排列的？

WEB前端全系列/第一阶段：HTML5+CSS3模块/响应式项目 545楼

问题：我想请问一下老师，怎样设置能让列表整体居中或居右呢？

!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>
        /* div{
            width:100%;
            text-align:center;
        }   怎样设置能让列表整体位置居中呢？ */
        li{
            list-style-type:none;
            float:left;
            padding:31px 20px 30px;
        }
        a{
            color:#333;
            font-size:14px;
            text-decoration:none;
        }
        a:hover{
            color:#008cff;
        }

    </style>
</head>
<body>
    <div>
    <ul>
        <li><a href="#">手机</a></li>
        <li><a href="#">Lipro</a></li>
        <li><a href="#">声学</a></li>
        <li><a href="#">配件</a></li>
        <li><a href="#">生活</a></li>
        <li><a href="#">Flyme</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>
    </ul>
<!-- </div> -->
</body>
</html>

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

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

 <link rel="stylesheet" href="CSS/iconfont.css"/>
    <link rel="icon" href="images/title.ico"/>

老师，这俩在哪里能找到？

WEB前端全系列/第一阶段：HTML5+CSS3模块/响应式项目 548楼

</head>

<body>

</div>

</div>

</body>

/*导航开始*/

.nav{

width: 100%;

height: 85px;

background-color: skyblue;

}

.logo{

width: 117px;

height: 55px;

margin: 15px 0 15px 30px;

float: left;

}

/*导航结束*/

老师，为啥我每次导入图片，图片都是太大了？iconfont这个代码有啥用？

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS应用技巧 549楼

复制图片地址，粘贴过来，运行不显示图片。
复制过去没有.gif后缀怎么办

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

.content{
    width: 100%;
    overflow: hidden;
    padding: 4px 0 12px;
}
.title{
    text-align: left;
    color: #333;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
}
.phone-box{
    width: 100%;
    height: 614px;
}
.yang-left{
    width: 234px;
    height: 100%;
    background-color: #ff6700;
    float: left;
}
.yang-right{
    width: 992px;
    height: 614px;
    float: left;
}
.yang-left img{
    width: 234px;
    height: 614px;
}
.items1{
    width: 234px;
    height: 300px;
    background-color: #e0e0e0;
    padding: 20px 0;
    margin: 0 0 14px 14px;
    float: left;
    transition: all .2s linear;
    box-sizing: border-box;
}
.img1{
    width: 164px;
    margin-bottom: 18px;
}
.items1:hover{
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}
.name1{
    width: 214px;
    height: 20.8;
    color: #333;
    font-size: 14px;
    line-height: 21px;
    margin: 0 auto 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.name2{
    width: 214px;
    height: 18px;
    color: #b0b0b0;
    font-size: 12px;
    line-height: 18px;
    margin: 0 10px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.name3{
    width: 214px;
    height: 20.8px;
    color: #ff6700;
    font-size: 14px;
    line-height: 18px;
    margin: 0 10px 14px;
}
.big-img{
    width: 1226px;
    height: 120px;
    margin: 22px 0;
}
老师，line-height: 21px这个不加可以吗？white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsi这行代码有啥用？

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

<body>
    <div class="box">
        <a href="#">
            <img src="../img/魅族大图.png" alt="">
            <span class="title">魅族 18</span>
            <span class="intro">高通骁龙 888 ｜162g 6.2英寸轻妙手感</span>
            <span class="price">￥4399</span>
            <div class="sub">新品</div>
        </a>
        
    </div>
    <div class="box1">

    </div>
</body>

这是HTML

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS选择器 552楼

body{
    margin-left:0px;padding: 0;
    background-color: rgb(248, 244, 244);
}
a{
    text-decoration: none;
}
.box{
    width: 615px;
    height: 610px;
    background-color:#fff;
    position: relative;
    /* 图片是否平铺，不平铺 */
    background-repeat:no-repeat;
    float: left;
    margin-left:145px;
   
}
.box:hover{
    box-shadow: 0 10px 15px rgb(202, 202, 218);
}
.box img{
    width: 460px;
    height: 460px;
    position: absolute;
    bottom: 0;
    left: 77.5px;
}
span{
    /* 转换成块 */
    display: block;
    
}
.title{
    font-size: 28px;
    color: #333;
    position: absolute;
    top: 30px;
    left: 259px;
}
.intro{
    font-size: 18px;
    color: #333;
    position: absolute;
    top: 75px;
    left: 150px;
}
.price{
    font-size: 24px;
    color: #c00;
    position: absolute;
    top: 110px;
    left: 267px;

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS选择器 553楼

body{

margin-left:0px;padding: 0;

background-color: rgb(248, 244, 244);

}

text-decoration: none;

}

.box{

width: 615px;

height: 610px;

background-color:#fff;

position: relative;

/* 图片是否平铺，不平铺 */

background-repeat:no-repeat;

float: left;

margin-left:145px;

}

.box:hover{

box-shadow: 0 10px 15px rgb(202, 202, 218);

}

.box img{

width: 460px;

height: 460px;

position: absolute;

bottom: 0;

left: 77.5px;

}

span{

/* 转换成块 */

display: block;

}

.title{

font-size: 28px;

color: #333;

position: absolute;

top: 30px;

left: 259px;

}

.intro{

font-size: 18px;

color: #333;

position: absolute;

top: 75px;

left: 150px;

}

.price{

font-size: 24px;

color: #c00;

position: absolute;

top: 110px;

left: 267px;

点击整个父元素.box的div点击不了只能点击a里边的元素

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS选择器 554楼

老师，广告部分第一块容器ad-aside样式中写了左浮，但为什么和上面banner这一块对齐？

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

同学您好