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

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 100%;
            height: 60px;
            line-height: 60px;
            background-color: #666;
        }

        .nav ul {
            width: 1000px;
            margin: 0 auto;
        }

        .nav ul li {
            list-style: none;
            float: left;
            padding: 0 20px;
        }
       
        .nav ul::after {
            content: "";
            margin: 0 auto;
            display: block;
            clear: both;
        }
        .nav ul li a {
            text-decoration: none;
            font-size: 20px;
            color: #b0b0b0;

        }

        .nav ul li:hover {
            background-color: #222;
        }
    </style>
</head>
<body>
    <div class="nav">
        <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>
        </ul>
        <p>hahah</p>
    </div>
</body>

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

QQ截图20201113170207.png

QQ截图20201113170224.png

小米官网.rar

图一是别人的样子，图二是我的样子。我把字体图标放大，文字就下去了，和图标没法对齐。。。

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

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 100%;
            height: 60px;
            position: relative;
            text-align: center;
        }

        .nav ul {
            overflow: hidden;
            clear: both;
        }

        .nav ul li {
            list-style: none;
            float: left;
            padding: 25px 30px;
        }
        .nav ul li a {
            color: #333;
            text-decoration: none;
            font-size: 25px;
        }

        .nav-list {
            width: 100%;
            height: 300px;
            position: absolute;
            left: 0;
            display: none;
        }
        .nav li:hover>.nav-list {
            display: block;
        }
        .nav li:hover>a {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">首页</a>
                <div class="nav-list" style="background-color:pink";></div>
            </li>
            <li>
                <a href="#">手机</a>
                <div class="nav-list" style="background-color:skyblue";></div>
            </li>
            <li>
                <a href="#">平板</a>
                <div class="nav-list" style="background-color:pink";></div>
            </li>
            <li>
                <a href="#">配件</a>
                <div class="nav-list"  style="background-color:skyblue";></div>
            </li>
            <li>
                <a href="#">服务器</a>
                <div class="nav-list" style="background-color:pink";></div>
            </li>
            <li>
                <a href="#">下载</a>
                <div class="nav-list"  style="background-color:skyblue";></div>
            </li>
        </ul>
    </div>

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

为什么mi-home mi-logo我这里找到的是个雪碧图？

http://nickyong.cn/MIUI/src/productList.html

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

浏览器不支持

</video>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:805px;
            height:303px;
            border:5px solid brown;
            margin:100px auto;
            column-count:3;
            column-gap:10px;
            column-rule:solid 10px red;
            display:table-cell;
            vertical-align: middle;
        }
        /*p{
            display:table-cell;
            vertical-align: middle;
        }*/
    </style>
</head>
<body>
<div class="box">
    我想.那只是一刹那的心动吧.在人生中.一切的偶然太多.一切的不舍太多.一切的懵懂太多.一切的一切太多.就在刚刚明白的那一瞬间.却又懂得了离别.太美的错误因为太年轻.太美的承诺因为太无知.总在自己最脆弱的时候突然说要离开.是我太笨?还是青春太傻?是我太傻?还是时间太快?我不知道.自己到底是怎么一回事.在青春的愚昧中.我束手无策.
    　　就算鸟依旧要飞.就算风依旧要散.就算青春依旧会走.我还有什么办法去挽回花儿那段灿烂的时光呢?青春.是年少的冲动.青春.是懵懂的岁月.青春.是情窦的初开.青春.是回忆的见证.我的青春.我的冲动.我的年少.我的无知.我的心动.
    　　那些因为青春所许下的诺言.那些因为青春所留下的感悟.那些因为青春所犯下的错误.那些因为青春的种种种种.如装订的小说.一页一页的在我脑海中翻来覆去.剩下了些什么呢?是依依不舍.还是痛彻心扉?

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

问题一：本来想实现块级元素居中，多行文本在块级元素中垂直居中。我就用了display，但这样margin就失效了。有什么其他办法可以实现吗？

问题二：我试了用<p></p>标签，选择器里的display就不生效了，这是因为什么？display的适用范围吗？

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

自定义列表能不能用无序列表里嵌套无序列表来实现呢

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

表格里面使用<thead><tbody><tfoot>是不是为了增强标签的语义性，跟不加这些显示的效果页面是一样的吗

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

老师，这里的grid-template-areas的值老师说要用单引号却用的是双引号，所以是都可以是吗

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

老师，为什么我的边角是直角不是圆角

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

table, td, th { border:1px solid green; } 
td { background-color:green; color:white; }

第一行是边框颜色，第二行第一个是背景颜色第二个是字体颜色吗这两个顺序有要求吗

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

老师，在写小米商城官网的页脚时遇到一个问题。官网在这一部分有一个两张图片交替闪烁的效果，两张图片瞬间交换只显示一个，我用动画来写会有淡入淡出的效果，请问这个该怎么实现瞬间的交替呢？

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.bot-img {

width: 600px;

height: 100px;

border: 1px solid red;

text-align: left;

position: relative;

}

.bot-img p {

width: 92px;

height: 28px;

margin-left: 0;

float: left;

margin-left: 20px;

}

.bot-p {

background-color: blue;

}

.imgs,.imge {

position: absolute;

top: 0;

left: 354px;

background-color: red;

}

.imge {

animation: change 3s infinite;

background-color: greenyellow;

}

@keyframes change {

0% {

opacity: 0;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

</style>

</head>

<body>

</a>

</a>

</a>

</a>

</div>

</body>

</html>

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

同学您好