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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 100px;
            background-color: green;
            transform: translate(10px,10px);
            margin: 50px;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: red;
            margin: 50px;
            transform: rotate(30deg);
        }
        .box3{
            width: 200px;
            height: 100px;
            background-color: yellow;
            margin: 50px;
            transform: scale(1.2,1.5);
        }
        .text{
            /* transform: scale(0.5); */
            font-size: smaller;
        }
    </style>
</head><!--  -->
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    <p class="text">我是6PX字号</p>
    <p>我是默认12PX字号</p>
</body>
</html>

老师，默认最小字体不是12px吗，我这里直接修改字号也能修改，不用transform:scale(0.5)来缩放，是和我Chrome浏览器的版本有关吗

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

8c603338652291c85e40849fb9f3648a.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
            border: 20px solid green;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

为什么浏览器盒子模型里面的border老和我设置的border有一点差距，设置20px,但是浏览器里显示19.512

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

老师我找到问题了，我的密码题答案中少了一个td

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <td>姓名:</td>
            <td>
                <form>
                    <input type="text">
                </form>
            </td>
        </tr>
        <tr>
            <td>密码:</td>
            <td>
                <form>
                    <input type="password">
                </form>
            </td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td>
                <form>
                    <input type="password">
                </form>
            </td>
        </tr>
        <tr>
            <td>密码提示问题:</td>
            <td>
                <form>
                    <select>
                        <option value="title">请选择一个问题</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </form>
            </td>
        </tr>
        <tr>
            <td>密码提示答案:</td>
            <form>
                <input type="text">
            </form>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <form>
                    <input type="radio" name="sex">男<br>
                    <input type="radio" name="sex">女
                </form>
            </td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td>
                <form>
                    <input type="number">
                </form>
            </td>
        </tr>
        <tr>
            <td>籍贯:</td>
            <td>
                <form>
                    <select>
                        <option value="title">请选择</option>
                    </select>
                    省/直辖市
                    <select>
                        <option value="title">请选择</option>
                    </select>
                    市<br>
                </form>
            </td>
        </tr>
        <tr>
            <td>爱好:</td>
            <td>
                <form>
                    <input type="checkbox" value="1">上网
                    <input type="checkbox" value="2">看电影
                    <input type="checkbox" value="3">学习
                </form>
            </td>
        </tr>
        <tr>
            <td>个人介绍:</td>
            <td></td>
        </tr>
        <tr>
            <td>上传头像</td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2"></td>
        </tr>
    </table>
</body>
</html>
老师我的table外面有一个input框不知道是哪里来的，找不到

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

/* shouji */

.content {

width: 100%;

background: #f5f5f5;

overflow: hidden;

padding: 4px 0 14px;

}

.title {

text-align: left;

color: #333;

font-size: 22px;

font-weight: 200;

line-height: 58px;

}

.phone-box {

width: 100%;

height: 614px;

}

.phone-left {

width: 234px;

height: 100%;

float: left;

}

.phone-right {

width: 990px;

height: 614px;

float: left;

}

.item {

width: 234px;

height: 300px;

background: #fff;

float: left;

box-sizing: border-box;

padding: 20px 0;

margin: 0 0 14px 12px;

}

老师按你的比例我右边就少一列我就减了2px，可是为什么跟你视频里的不一样呢

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

老师为什么要这么调位置，有什么说法吗

我这样可以吗，这么做是不是对后面有影响

这个又有什么用

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

怎么样可以谈化背景图片

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

怎么样可以看到输出的密码是什么一般不是后面都可以有小眼睛可以看密码是多少的

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            display: grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 200px 200px 200px 200px 200px;
            grid-template-areas: "item1 item1 item1"
                                 "item2 item3 item4"
                                 "item5 item5 item6"
                                 "item7 item8 item8"
                                 "item9 item9 item9";

        }

        .item {
            font-size: 35px;
            text-align: center;
            border: 1px solid #e5e4e9;
        }

        .item-1 {
            grid-area: item1;
            background-color: #ef342a;
        }

        .item-2 {
            /* grid-area: item2; */
            background-color: #f68f26;
        }

        .item-3 {
            /* grid-area: item3; */
            background-color: #4ba946;
        }

        .item-4 {
            grid-area: item4;
            background-color: #0376c2;
        }

        .item-5 {
            grid-area: item5;
            background-color: #c077af;
        }

        .item-6 {
            grid-area: item6;
            background-color: #f8d29d;
        }

        .item-7 {
            grid-area: item7;
            background-color: #b5a87f;
        }

        .item-8 {
            grid-area: item8;
            background-color: #d0e4a9;
        }

        .item-9 {
            grid-area: item9;
            background-color: #4dc7ec;
        }
    </style>
</head>

<body>


    <div id="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
    </div>

</body>

</html>

老师，我的代码哪里有问题呢，我看您注释掉就显示空白了，但是我的代码注释了后还是在显示的

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

我设置1240宽度的时候，margin属性不能自动居中，为什么

当我缩小宽度到1000左右时，左右留白的宽度才不会相差太大

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

老师这里为啥不用ul做，用ul做和这样用div直接做有什么区别吗

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

老师还想再问一下这个，

我要选中这个类名 .app

除了用.app{ }

还可以用什么写法吗

可以用.nav-left下面什么什么的这样写吗

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

购物车（0）</a>

为什么这里用的i标签而不是p标签，

不加href的a标签和p标签和去掉倾斜的i标签可以混用吗，使用会有什么不一样吗

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
            color: red;
        }

        a:visited {
            color: orange;
        }

        a:hover {
            color: blue;
        }

        a:active {
            color: pink;
        }
    </style>
</head>

<body>

    <a href="http://mi.com">小米官网 </a>
</body>

</html>

老师好，为啥我的:visited 效果在谷歌上面不生效呢

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

同学您好