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

 <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模块/响应式项目 166楼

你好老师，为啥我用新标签这个完全显示不了？没看出问题在哪儿
<!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>
        .header{
            width: 1400px;
            background-color: pink;
        }
        div{
            margin-top: 10px;
            height: 600px;
        }
        .nav{
            height: 80px;
            margin-top: 10px;
            background-color: pink;
        }
        .section{
            width: 900px;
            margin-top: 10px;
            background-color: pink;
            height: 600px;
            float: left;
        }
        aside{
            width: 480px;
            margin-top: 10px;
            background: pink;
            height: 600px;
            float: right;
        }
        .footer{
            height: 80px;
            margin-top: 10px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <header>头部</header>
    <nav>导航</nav>
    <div>
        <section>主要内容</section>
        <aside>侧边栏</aside>
    </div>
    <footer>脚部</footer>
</body>
</html>

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5新增元素 167楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="ok.html" name="form1"></form>
    <p>
        邮箱：<input type="email">
    </p>
    <p>
        <input type="submit">
    </p>
</body>
</html>

老师，form的type输了email后，打开网页，输入正确邮箱和任何数字都无提示，点击提交也没反应，页面不跳转

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

老师，是路径错了吗？为什么图标不显示？？？？

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

老师我没有群老师我没有群老师我没有群老师我没有群

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

这些标签是只能放在一起用吗？也就是一个固定的模板吗？

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5新增元素 171楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .box{
            width: 1263px;
            height: 750px;
            /*background: red;*/
        }
        .wrap{
            width: 25%;
            height: 375px;
            /*background: blue;*/
            float: left;
            padding: 10px;
            box-sizing: border-box;
            position: relative;
        }
        .items>img{
            width: 100%;
            height: 100%;
        }
        .items-name{
            position: absolute;
            top: 265px;
            left:25px;
        }
        .items-name1{
            left:90px;
        }
        .items-information{
            position: absolute;
            top: 300px;
            left:40px;
        }
        .items-information1{
            left:25px;
        }
        .items-price{
            position: absolute;
            top: 310px;
            left:100px;
        }
        .box-p{
            width: 303px;
            height: 80px;
        }
        .box-p>p:first-of-type{
            color: #333333;
            font-size: 16px;
            margin-top: 1px;
        }
        .box-p>p:nth-child(2){
            font-size: 14px;
            color: #999999;
        }
        .box-p>p:last-of-type{
            font-size: 22px;
            color: #cc0000;
        }
        span{
            color: #999999;
            font-size: 12px;
        }
        .items:hover{
            box-shadow: 0 10px 10px rgba(0,0,0,.18);
            /*transform: scale(1.1);*/
        }
        .circle{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(to bottom right,hotpink,pink);
            position: absolute;
            top: 20px;
            left: 20px;
            line-height: 50px;
        }
    /*    移动端*/
        @media screen and (max-width: 768px) {
            .wrap{
                width: 50%;
            }
        }
    /*    Ipad端*/
        @media screen and(max-width: 992px) and (min-width: 768px){
            .wrap{
                width: 33%;
            }
        }
    /*    pc端*/
        @media screen and (min-width: 992px){
            .wrap{
                width: 25%;
            }
        }
    </style>
</head>
<body>
 <div class="box">
     <div class="wrap">
         <div class="items">
             <img src="魅族images/be6fed05-168e-4633-bc1d-6e75705fce07.jpg" alt="">
             <p class="items-name" style="font-size: 21px;font-weight: 700;color: #ffffff">魅族 HD60 头戴式蓝牙耳机</p>
             <p class="items-information" style="color: #ffffff;font-size: 14px">40mm生物振膜 | 触控操作 | 蓝牙5.0</p>
             <p class="items-price" style="font-size: 24px;font-weight: 700;color:gold">￥499</p>
         </div>
     </div>
     <div class="wrap">
         <div class="items">
             <img src="https://openfile.meizu.com/group1/M00/08/5E/Cgbj0V_38NOAGvEXAAN6WGRLi3Y197.png" alt="">
             <div class="box-p" align="center">
                 <p>魅族 POP Pro 主动降噪耳机</p>
                 <p>【限时特惠449元+3期免息】</p>
                 <p>￥449 <span><small><del>￥499</del></small></span></p>
             </div>
         </div>
         <div class="circle" style="color: white;text-align: center">
         <p>免息</p>
     </div>
     </div>
     <div class="wrap">
         <div class="items">
             <img src="https://openfile.meizu.com/group1/M00/08/40/Cgbj0V-JCMSAa5qBAAMth2Y6_gU978.png" alt="">
             <div class="box-p" align="center">
                 <p>魅族 POP2s 真无线耳机</p>
                 <p>【限时特惠199元+3期免息】</p>
                 <p>￥199 <span><small><del>￥299</del></small></span></p>
             </div>
         </div>
         <div class="circle" style="color: white;text-align: center">
             <p>免息</p>
         </div>
     </div>
     <div class="wrap">
         <div class="items">
             <img src="https://openfile.meizu.com/group1/M00/07/2F/Cgbj0Vy_C3GAN_TKAAExaPfTwFc180.png" alt="">
             <div class="box-p" align="center">
                 <p>魅族 HIFI 解码耳放</p>
                 <p>【限时特惠149元】</p>
                 <p>￥149 <span><small><del>￥169</del></small></span></p>
             </div>
         </div>
     </div>
     <div class="wrap">
         <div class="items">
             <img src="https://fms.res.meizu.com/dms/2019/08/29/04811a8d-07fb-4188-a852-1971f442d08f.jpg" alt="">
             <p class="items-name items-name1" style="font-size: 21px;font-weight: 700;color: #ffffff">魅族 EP3C 耳机</p>
             <p class="items-information items-information1" style="color: #ffffff;font-size: 14px">Hi-Res 认证高解析音质 | Type-C数字接口</p>
             <p class="items-price" style="font-size: 24px;font-weight: 700;color:gold">￥
                 129</p>
         </div>
     </div>
     <div class="wrap">
         <div class="items">
             <img src="https://openfile.meizu.com/group1/M00/07/E0/Cgbj0V6z8VSAV6kEAAlCc-omYno614.png" alt="">
             <div class="box-p" align="center">
                 <p>魅族 HD60 降噪耳机</p>
                 <p>【限时特惠799元+12期免息】</p>
                 <p>￥799 <span><small><del>￥1099</del></small></span></p>
             </div>
         </div>
         <div class="circle" style="color: white;text-align: center">
             <p>免息</p>
         </div>
     </div>
     <div class="wrap">
         <div class="items">
             <img src="https://openfile.meizu.com/group1/M00/07/86/Cgbj0V3UocyAR_tJAApbDmCAyEo620.png" alt="">
             <div class="box-p" align="center">
                 <p>魅族 HD60 头戴式蓝牙耳机</p>
                 <p>40mm生物振膜 | 触控操作 | 蓝牙5.0</p>
                 <p>￥449</p>
             </div>
         </div>
     </div>
     <div class="wrap">
         <div class="items">
             <img src="https://openfile.meizu.com/group1/M00/04/17/Cgbj0VrcX6yABHxPAARZwWUAjc4748.png" alt="">
             <div class="box-p" align="center">
                 <p>魅族 HALO 激光蓝牙耳机</p>
                 <p>炫酷夜跑神器 随性张扬</p>
                 <p>￥449 <span><small><del>￥999</del></small></span></p>
             </div>
         </div>
     </div>
 </div>
</body>
</html>

我为什么缩小到移动端的时候，图片并没有变小，感觉所有的格式都乱了呢，还有就是并没有按相应该显示的几个

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

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.nav{

width: 100%;

height: 68px;

background-color: rgba(0,0,0,.85);

}

.nav ul {

margin-left: 300px;

}

.nav ul li{

float: left;

padding: 0 20px;

display: inline;

}

.nav ul li a{

text-decoration: none;

color: white;

line-height: 68px;

}

.nav ul li a:hover{

color: #ff6700;

}

</style>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<a href="#">小爱开放平台</a>

</li>

<li>

</li>

</ul>

</div>

<p>testtest</p>

</body>

</html>

老师为啥这个结果不用清除浮动，也可以p标签在下面？

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

<style>
        .wrap{
            width: 1226px;
            height: 40px;
            background-color: #333333;
            font-size: 12px;
            color: #b0b0b0;
            margin: 0 auto;
        }
        .nav-left{
            float: left;
        }
        .nav-right{
            float: right;
        }
        li{
            float: left;
            list-style: none;
            position: relative;
        }
        span{
            margin: 0.3em;
            color: #424242;
            font-family: sans-serif;
        }
        .wrap>.nav-right>li:nth-child(-n+2){
            padding: 0 5px;
        }
        .wrap>.nav-right>li:nth-child(3){
            width: 48px;
            padding: 0 10px;
        }
        .wrap>.nav-right>li:nth-child(4){
            width: 120px;
        }
        .download{
            width: 124px;
            height: 0;
            background-color: #ffffff;
            box-shadow: 0 1px 5px #aaa;
            position: absolute;
            top: 40px;
            left: 50%;
            margin-left: -62px;
            overflow: hidden;
        }
        .download>img{
            width: 90px;
            height: 90px;
            margin: 10px 16px 8px;
        }
        .download>p{
            color: #333;
            font-size: 14px;
            line-height: 14px;
            text-align: center;
        }
        .nav-left>li:hover>.download{
            height: 148px;
            transition: all 0.2s;
        }
        .tri{
            width: 0;
            height: 0;
            border-bottom: 8px solid red;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            display: none;
        }
        .nav-left>li:hover>.tri{
            display: block;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <ul class="nav-left">
            <li><a href="#"></a>小米商城<span>|</span></li>
            <li><a href="#"></a>MlUl<span>|</span></li>
            <li><a href="#"></a>loT<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><a href="#"></a>下载app<span>|</span>
                <div class="download">
                    <img src="images/小米app.jpg" height="109" width="112"/>
                    <p>小米商城APP</p>
                </div>
                <div class="tri"></div>
            </li>
            <li><a href="#"></a>智能生活<span>|</span></li>
            <li><a href="#"></a>Select Location</li>
        </ul>
        <ul class="nav-right">
            <li><a href=""></a>登录<span>|</span></li>
            <li><a href=""></a>注册<span>|</span></li>
            <li><a href=""></a>消息通知</li>
            <li><a href=""></a>购物车</li>
        </ul>
    </div>
</body>

问题1：.tri那里的left:50% margin-left:-8px不明白，不知道怎么找三角形的位移

问题2：为什么效果图里tri和download的位置不在一起

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

<b>标签和<strong>标签分别在那些场合用？

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

嗷嗷刚刚代码那个p标签写在div外面了，现在解决了，用两种方式清楚浮动都可以了

<style>

margin: 0;

padding: 0;

}

.nav{

width: 100%;

height: 68px;

background-color: rgba(0,0,0,.85);

}

.nav ul {

list-style: none;

margin-left: 300px;

line-height: 68px;

/* overflow: hidden; */

}

.nav ul::after{

content: "";

overflow: hidden;

clear: both;

}

.nav ul li{

float: left;

padding: 0 20px;

}

.nav ul li a{

text-decoration: none;

color: white;

}

.nav ul li a:hover{

color: #ff6700;

}

clear: both;

}

</style>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<a href="#">小爱开放平台</a>

</li>

<li>

</li>

</ul>

<p>testtest</p>

</div>

</body>

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

老师我想问一下，购物车的鼠标滑动之后的边框不显示想问一下我写的CSS哪里出了问题。

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

为什么会这样啊1

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

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<!--

type属性H5新增：

1.email定义用于e-mail地址的字段

2.url定义用于输入URL的字段

-->

<from>

E-mail<input type="email"name="usermail">

<br>

网址<input type="url"name="homepage">

</from>

</body>

</html>

老师我这样写，输入邮箱或网址无法出现跳转，输入错误的也没有提示为什么？

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

<div class="bottom">
                    <div class="b-left"></div>
                    <div class="b-right"></div>
              </div>

老师,这个代码,,一个div包含两个小的div,,这两个小的div永远都在大的div里面,,不会出去

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

同学您好