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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魅族</title>
    <style>
        .box-header{
            width: 100%;
            height: 680px;
            background: url("魅族images/444c6b0f-a71c-4e91-8c17-6745223228c5.jpg") no-repeat center ;
            background-size: cover;
        }
        .box-phone{
            width: 100%;
            height: 450px;
            background: url("魅族images/a6c64f8f-6ab5-4a93-8139-2a893eb2a2a5.jpg") no-repeat center;
            background-size: cover;
        }
        .box-header-bottom{
            width: 1262px;
            height: 277px;
            /*background: red;*/
        }
        .box-top{
            width: 25%;
            height: 100%;
            /*background: orange;*/
            float: left;
        }
        .img1{
            width: 130px;
            height: 130px;
        }
        .box-top>p:first-of-type,.phone-top-left>p:first-of-type,.phone-top-right>p:first-of-type,.phone-bottom-items>p:first-of-type{
            font-size: 20px;
            font-weight: bold;
            width: 310px;
            height: 30px;
        }
        .box-top>p:last-child,.phone-top-left>p:first-of-type+p,.phone-top-right>p:first-of-type+p,.phone-bottom-items>p:last-of-type{
            color: #999999;
            font-size: 14px;
            width: 310px;
            height: 21px;
        }
        .title{
            text-align: center;
            font-weight: bold;
            font-size: 2em;
        }
        .box-phone-bottom{
            width: 1262px;
            height: 1005px;
        }
        .box-phone-bottom-center{
            width: 1230px;
            height:1220px;
        }
        .phone-top{
            width:1230px;
            height: 610px;
        }
        .phone-bottom{
            width: 1212px;
            height: 375px;
        }
        .phone-top-left,.phone-top-right{
            width: 615px;
            height: 610px;
            float: left;
        }
        .phone-bottom-items{
            width: 303px;
            height: 375px;
            float: left;
        }
        .img2{
            width: 460px;
            height: 460px;
        }
        .price{
            width: 71px;
            height: 33px;
            color: red;
            font-size: 28px;
        }
        .price1{
            width: 14px;
            height: 21px;
            font-size: 12px
        }
        .img3{
         width: 230px;
            height: 230px;
        }
/*.img+p{
    font-size: 20px;
    font-weight: bold;
}*/
    </style>
</head>
<body>
<div class="box-header">
    <a href="https://www.meizu.com/">
    </a>
</div>
<div class="box-header-bottom">
    <div class="box-top" align="center">
        <img src="魅族images/5f896683-d2f2-487d-a296-722fc9e17f1e.png" alt="" class="img1">
        <p>魅族 18</p>
        <p>立省900 + 12 期免息 + 赠手机壳</p>
    </div>
    <div class="box-top" align="center">
        <img src="魅族images/5f896683-d2f2-487d-a296-722fc9e17f1e.png" alt="" class="img1">
        <p>魅族 18</p>
        <p>立省900 + 12 期免息 + 赠手机壳</p>
    </div>
    <div class="box-top" align="center">
        <img src="魅族images/5f896683-d2f2-487d-a296-722fc9e17f1e.png" alt="" class="img1">
        <p>魅族 18</p>
        <p>立省900 + 12 期免息 + 赠手机壳</p>
    </div>
    <div class="box-top" align="center">
        <img src="魅族images/5f896683-d2f2-487d-a296-722fc9e17f1e.png" alt="" class="img1">
        <p>魅族 18</p>
        <p>立省900 + 12 期免息 + 赠手机壳</p>
    </div>
</div>
<h3 class="title">手机</h3>
<div class="box-phone">
</div>
<div class="box-phone-bottom">
    <div class="box-phone-bottom-center">
        <div class="phone-top" >
            <div class="phone-top-left" align="center">
                <p>魅族 18</p>
                <p>限时领券至高立省900 | 赠手机壳</p>
                <p class="price"><span class="price1">￥</span>3999</p>
                <img src="魅族images/de87d38d-3785-4605-a211-71364ded123f.png" alt=""  class="img2">
            </div>
            <div class="phone-top-right" align="center">
                <p>魅族 18</p>
                <p>限时领券至高立省900 | 赠手机壳</p>
                <p class="price"><span class="price1">￥</span>3999</p>
                <img src="魅族images/de87d38d-3785-4605-a211-71364ded123f.png" alt=""  class="img2">
            </div>
        </div>
        <div class="phone-bottom">
            <div class="phone-bottom-items" align="center">
                <img src="魅族images/Cgbj0F6zwMuANEeWAAw6yQFAJXM097.png" alt="" class="img3">
                <p>魅族 17「AG梦幻独角兽」</p>
                <p>高通骁龙 865 | 120 Hz尝鲜模式</p>
                <p class="price"><span class="price1">￥</span> 3699</p>
            </div>
            <div class="phone-bottom-items" align="center">
                <img src="魅族images/Cgbj0F6zwMuANEeWAAw6yQFAJXM097.png" alt="" class="img3">
                <p>魅族 17「AG梦幻独角兽」</p>
                <p>高通骁龙 865 | 120 Hz尝鲜模式</p>
                <p class="price"><span class="price1">￥</span>3699</p>
            </div>
            <div class="phone-bottom-items" align="center">
                <img src="魅族images/Cgbj0F6zwMuANEeWAAw6yQFAJXM097.png" alt="" class="img3">
                <p>魅族 17「AG梦幻独角兽」</p>
                <p>高通骁龙 865 | 120 Hz尝鲜模式</p>
                <p class="price"><span class="price1">￥</span> 3699</p>
            </div>
            <div class="phone-bottom-items" align="center">
                <img src="魅族images/Cgbj0F6zwMuANEeWAAw6yQFAJXM097.png" alt="" class="img3">
                <p>魅族 17「AG梦幻独角兽」</p>
                <p>高通骁龙 865 | 120 Hz尝鲜模式</p>
                <p class="price"><span class="price1">￥</span> 3699</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

老师，我写魅族官网写了一部分，为什么价格哪里class都一样，但是设置不出来同样的样式呢？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>金立手机官网—金立手机及配件官方正品专卖网站_金立全面全面屏s11新品首发</title>
    <link rel="icon" href="https://shop.gionee.com/favicon.ico">
    <link rel="stylesheet" href="css/jinli.css">
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="wrap">
        <div class="logo">
            <img src="image/logo.png" alt="">
        </div>
        <div class="nav_right">
            <div class="enter">
                <ul>
                    <li><a href="#">amigo账号登录</a><span>|</span></li>
                    <li><a href="#">原账号登录</a><span>|</span></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="#">购物车(0)</a></li>
                </ul>
            </div>
            <div class="phone">
                <ul>
                    <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="#">amigoOS</a></li>
                    <li class="search" >
                        <input type="text" placeholder="请输入搜索内容" autofocus>
                        <button>搜</button>
                    </li>
                </ul>

            </div>
        </div>
    </div>

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

.nav{
    width: 100%;
    height: 104px;
    border-bottom: 1px solid #d5d5d5;
    position: fixed;
    left: 0px;
    top: 0px;
    /*background-color: #cc0000;*/
}
.wrap{
    width: 1084px;
    height: 104px;
    margin: 0px auto;
    /*background-color: #42c3ee;*/
}
.logo img{
    width: 205px;
    margin-top: 25px;
}
.logo,.nav_right{
    float: left;
}
.nav_right{
    width:879px;
    height: 104px;
}
.enter{
    width: 100%;
    height: 30px;
    line-height: 30px;
}
.enter ul li a{
    text-decoration: none;
}
.enter ul li a:hover{
    color: #ef4222;
}
.enter ul li{
   list-style-type: none;
}
.nav_right ul{
    float: right;
}
.nav_right ul li{
    float: left;
}
.nav_right ul a{
    margin:0px 10px;
    color: #9f9f9f;
}
.enter ul li:first-child a{
    color:#ef4222 ;
}
.phone{
    width:100%;
    height: 73px;
    line-height: 73px;
}
.phone ul li a{
    text-decoration: none;
}
.phone ul li{
    list-style-type: none;
}
.phone ul li a{
    margin-left: 40px;
    font-size: 16px;
    color: black;
    /*font-weight: bolder;*/
}
.phone ul li a:hover{
    color: #ef4222;
}
.search{
    width: 170px;
    height: 30px;
    /*border: 1px solid #fff;*/
    box-sizing: border-box;
    /*padding-left: 5px;*/
    margin-top:18.5px;
    margin-left: 120px;

}
.search input{
    width: 138px;
    height: 28px;
    float: left;
}
.search button{
    width: 25px;
    height: 28px;
    float: left;
    background-color: #ffff;
    border: none;
}

老师我的搜索按钮怎么不在这个框里面呀

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

运行效果图

问题：1.给父元素的line-hight设置了和行高等高，文字不能居中显示，取消了ling-height反倒可以

2.给购物车的li设置了宽高，超出了父元素一部分

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

<!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>
</head>

<body>
    <table border="1" height="500" width="700">
        <tr bgcolor="pink">
            <td rowspan="2" align="center">酒店</td>
            <td align="center">海外酒店</td>
            <td align="center">团购</td>
        </tr>
        <tr bgcolor="pink">
            <td align="center">特价酒店</td>
            <td align="center">民宿.客栈</td>
        </tr>
        <tr bgcolor="blue">
            <td align="center" rowspan="2">机票</td>
            <td align="center">火车票.抢票</td>
            <td align="center">汽车票.船票</td>
        </tr>
        <tr bgcolor="blue">
            <td align="center"> 特价机票</td>
            <td align="center">专车.租车</td>
        </tr>
        <tr bgcolor="green">
            <td align="center" rowspan="2">旅游</td>
            <td align="center">目的地攻略</td>
            <td align="center">游轮旅游</td>
        </tr>
        <tr bgcolor="green">
            <td align="center">周边游</td>
            <td align="center">定制旅游</td>
        </tr>
        <tr bgcolor="orange">
            <td align="center">景点.玩乐</td>
            <td align="center">美食林</td>
            <td align="center">购物.外汇</td>
        </tr>
        <tr bgcolor="orange">
            <td align="center">礼品卡</td>
            <td align="center">WIFI电话卡</td>
            <td align="center">保险.签证</td>
        </tr>
    </table>
</body>

</html>

$KLGQGWHJR_9LOI]6{9GWK7J.png$

老师我想问下这图片是怎么加进去的呀，如果加进去后文字的位置会怎么样呢？

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

这个不是有五类吗，我看老师没有说背景渐变这个；

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

<html>

<head>

<title>我的第一个网页<title/>

</head>

<body>

hello,我的第一个前端页面

</html>

666.png

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

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

老师，为什么我的这个不显示图片

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

nav-list 定位，li没有定位，父元素不是nav吗，为什么它还是在li下面，top也没有给值，不理解这里

WEB前端全系列/第一阶段：HTML5+CSS3模块/浮动与定位 398楼

我用这样的实现也是没有问题的吧,老师

Title

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

table { border-collapse:collapse; }
table,td { border: 1px solid black; }

这个什么意思呀为啥视频不细讲一下这两个都什么效果呢

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

<!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>
        ul {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>你好</li>
        <li>
            <ul>
                <li>好的</li>
                <li>好的</li>
                <li>好的</li>
            </ul>
        </li>
        <li>你好</li>
    </ul>
</body>
</html>

这里改变样式直接用ul{}不就可以了，为什么要用ui li{}的后代选择器

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

老师这地方完全不明白，麻烦详细解答一下，为啥把三角放在顶部要设置为bottom:0这不是距离底部为0吗，已经设置了left50%让它居中了为啥还要设置margin-left为-8px？

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

为什么我代码写一半就开始报出bug刚刚还好好的

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

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.dw {

width: 800px;

height: 120px;

background-color: #ababab;

}

.dw22 {

width: 800px;

height: 100px;

background-color: #6de9c6;

}

.wda {

width: 80px;

height: 80px;

background-color: red;

margin-left: 10px;

margin-top: 20px;

float: left;

}

</style>

</div>

</head>

<body>

</div>

</div>

</body>

</html>

//为啥这个dw是异常的，在所有div后面，也不是左上角对齐，而生内部居中

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

<pre class="brush:java;toolbar:false"><br/></pre>Title

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

同学您好