<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav{
            width:100%;
            height:61px;
            position:relative;
        }
        .nav li{
            float:left;
            padding:20px 26px;
            list-style-type: none;
        }
        .nav a{
            text-decoration: none;
            color: #333333;
        }
        .nav-list{
            width:300px;
            height: 300px;
            background-color:red;
            position:absolute;
            left:100px;
            top:61px;
            display:none;
        }
        .nav li:hover>.nav-list{
            display: block;
        }
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">手机</a>
        <div class="nav-list"></div></li>
        <li><a href="">配件</a></li>
        <li><a href="">下载</a></li>
        <li><a href="">服务</a></li>
        <li><a href="">amigios</a></li>
    </ul>
</div>
</body>
</html>

麻烦老师解答一下疑惑：

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

这节课实操里面下面￥符号放在i标签里，“起”这个字放在em标签里，不明白为啥在上面又把字体设置成normal，先设置成斜体，再把字体恢复正常，感觉多此一举，有什么意义呢？

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

    <style>
        /*
        思路：
        1）绝对定位到需要的位置
        2）display:none; 隐藏
        3）display:block;显示



        */
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style-type: none;
        }
        .box {
            width: 1226px;
            height: 460px;
            background-color: #008cff;
            margin: 0 auto;

        }

        .slide{
            width: 234px;
            height: 460px;
            background-color: rgba(105,101,101,.6);
            padding: 20px 0;
            box-sizing: border-box;
            position: relative;



        }
        .slide li{
            height: 42px;
            line-height: 42px;
            padding-left: 30px;



        }
        .slide a{
            font-size: 14px;
            color: #fff;
        }
        .a{
            width: 992px;
            height: 460px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 234px;
            display: none;


        }
        .slide li:hover>.a{
            display: block;


        }



    </style>
</head>
<body>
<div class="box">
    <div class="slide">
        <ul>
            <li>
                <a href="#">手机 电话卡</a>
                <div class="a">1</div>
            </li>
            <li>
                <a href="#">手机 电话卡</a>
                <div class="a">2</div>
            </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="#">手机 电话卡</a></li>

        </ul>


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

老师您好，我想问一下之前隐藏都用的是overflow：hidden；，这次为什么要用display：none|block；

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

2.下拉效果.zip

1.png

我想要实现图片中两个效果，1.是上面列表点击（hover）时，会显示下拉列表，但是要求下拉列表不会随着鼠标离开而隐藏。2.是下面的文字也显示在下拉列表的图片的下面，请问老师如何设置，谢谢！！

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

接着上一个代码

就是红框这个代码的逻辑是什么呀

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

老师，这里overflow不是可以处理float引起的两个副作用吗？
为啥还要再使用一次clear啊

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

name和value又有什么区别呢

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

设置—Emment里面没有use online completions

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

什么时候需要使用ie盒模型呀？有时候我不使用他们也可以达到效果，那什么时候应该使用他们呢？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>米课</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/mike.css">
</head>
<body>
    <div class="nav">
        <div class="wrap">
            <div class="logo"></div>
            <div class="search">
                <form action="">
                    <input type="text" placeholder="查找课程..." class="text-input">
                    <button class="iconfont">&#xe64d;</button>
                </form>
            </div>
            <div class="nav-bar"></div>
        </div>
    </div>
</body>
</html>

.search button{
    width: 40px;
    height: 34px;
    background-color: #f5f5f5;
    color: #54abd4;
    font-weight: 900;
    position: absolute;
    top: 16px;
    right: 2px;
    border: none;
}


老师您好，请问我的代码哪里有问题呢，为什么button里面的方大镜图标显示不出来？

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

demo-

老师，这节课讲的不太明白,麻烦您给能解决一下吗

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

也没搜索到

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

我只用了绝对定位left，没有用margin-left,动画也没有用display，而是给颜色设置透明，最后效果差不多，这样可以吗？

            <div class="tria"></div>

.tria{
    width: 0;
    height: 0;
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: 0;
    left: 33%;
    transition: all 0.05s;
}
.black-nav-left li:hover>.tria{
    border-bottom: 8px solid #fff;
}

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

没啥要问答的，就是想给后面的同学留言

成长的过程是苦涩的，但我们实毋须害怕，因为在每一次哀伤的背后，都有一份成长的喜悦，就如松柏凌霜雪而弥劲，春天总是伴随在严冬之后。

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

我想让网页整出三个一行排列的图加字。用那些代码呀

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

没啥要问答的，就是想给后面的同学留言

成长的过程是苦涩的，但我们实毋须害怕，因为在每一次哀伤的背后，都有一份成长的喜悦，就如松柏凌霜雪而弥劲，春天总是伴随在严冬之后。

同学您好