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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业3</title>
</head>
<body>
<table border="1" width="600" height="100" align="center" cellspacing="0"cellpadding="1">
    <tr>
        <td align="right">用户名：</td>
        <td align="center">
            <form action="ok.html" name="form1">
                <input type="text">
            </form>
        </td>
    </tr>
    <tr>
        <td align="right">密码：</td>
        <td align="center">
            <form action="ok.html" name="form2">
                <input type="password" name="password">
            </form>
        </td>
    </tr>
    <tr>
        <td align="right">性别：</td>
        <td align="center">
            <form action="ok.html" name="form3">
            <input type="radio" name="sex" checked>
            <lable for="man">男</lable>
            <input type="radio" name="sex">
            <lable for="woman">女</lable>
            </form>
        </td>
    </tr>
</table>
</body>
</html>

二、注释后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业3疑问</title>
</head>
<body>
<table border="1" width="600" height="100" align="center" cellspacing="0"cellpadding="1">
    <tr>
        <td align="right">用户名：</td>
        <td align="center">
            <form action="ok.html" name="form1">
                <input type="text">
            </form>
        </td>
    </tr>
    <tr>
        <td align="right">密码：</td>
        <td align="center">
<!--            <form action="ok.html" name="form2">-->
                <input type="password" name="password">
<!--            </form>-->
        </td>
    </tr>
    <tr>
        <td align="right">性别：</td>
        <td align="center">
<!--            <form action="ok.html" name="form3">-->
                <input type="radio" name="sex" checked>
                <lable for="man">男</lable>
                <input type="radio" name="sex">
                <lable for="woman">女</lable>
<!--            </form>-->
        </td>
    </tr>
</table>
</body>
</html>

效果一

效果二

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

老师为什么设置了浮动，margin:0px auto;就不生效

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

老师，我想请问在div嵌套中，我设置外部盒子由内部盒子内容撑开，然后把内部盒子设为行内块元素，为什么没有实现封口的效果呢？

如果我用嵌套来设计一个相框，可以这么设计吗

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

为什么图片不能并排

米课项目 (4).zip

2022-02-15 (2).png

WEB前端全系列/第一阶段：HTML5+CSS3模块/响应式项目 215楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            /*p默认有16px的上下外边距*/
            margin: 0px;
        }
        .box{
            width:1260px;
            height:780px;
            position:relative;
        }
        /* 合并选择器*/
        .box1,.box2 {
            width:303px;
            height:375px;
            background-color: red;
            position:relative;
            float: left;
            margin:12px 0px 0px 12px;
            /*position:static;使用静态定位，就相对浏览页面*/
        }
         img{
            width:100%;
        }
        .text1{
            width:303px;
            height:88px;
            position:absolute;
            left:0px;
            bottom:20px;
            text-align:center;
        }
        .name1{
            color: #fff;
            font-size: 21px;
            font-weight: 700;
        }
        .desc1{
            color:#fff;
            font-size:14px;
        }
        .price1{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
        .box2{
            background-color: whitesmoke;

        }
        .box2 img{
            width:100%;
        }
        .text2{
            width:303px;
            height:88px;
            position:absolute;
            left:0px;
            bottom:20px;
            text-align:center;
        }
        .name2{
            color: #333;
            font-size: 16px;
        }
        .desc2{
            color:#999;
            font-size: 14px;
        }
        .price2{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
        .box2 span{
            color:#cc0000;
            font-size: 14px;
        }
        .box2 .number{
            color:#cc0000;
            font-size: 22px;
        }
        s{
            color:gray;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">

        <img src="images/1.jpg" alt="">
        <div class="text1">
            <p class="name1">魅族 EP3C 耳机</p>
            <p class="desc1">【限时特惠99元】</p>
            <p class="price1">￥129</p>
        </div>
    </a>
</div>
    <div class=" box2">

        <img src="images/2.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 POP Pro 主动降噪耳机</p>
            <p class="desc2">三重混合主动降噪技术 | 三麦克风智能通话降噪</p>
            <p class="price2"><span>￥</span><span class="number">499</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/3.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 POP2s 真无线耳机</p>
            <p class="desc2">【限时6期免息】好声音标杆 | Flyme 妙连</p>
            <p class="price2"><span>￥</span><span class="number">299</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/4.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 HIFI 解码耳放</p>
            <p class="desc2">【年货节特惠价149元】</p>
            <p class="price2"><span>￥</span><span class="number">169</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/5.jpg" alt="">
        <div class="text2 ">
            <p class="name1">魅族 HD60 头戴式蓝牙耳机</p>
            <p class="desc1">【年货节特惠价349元+12期免息】</p>
            <p class="price1">￥499</p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/6.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 HD60 降噪耳机</p>
            <p class="desc2">【年货节特惠价799元+12期免息】</p>
            <p class="price2"><span>￥</span><span class="number">1099</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/7.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 EP63NC 无线降噪耳机</p>
            <p class="desc2">【年货节特惠价249元+6期免息】</p>
            <p class="price2"><span>￥</span><span class="number">249</span><s>￥499</s></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/8.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 POP Pro 主动降噪耳机</p>
            <p class="desc2">【年货节特惠价149元】</p>
            <p class="price2"><span>￥</span><span class="number">149</span><s>￥169</s></p>
        </div>
        </a>
    </div>
</div>
</body>
</html>

老师，我想实现图片居中，该怎么弄，现在的效果图全部靠左，我想两边空白地方一样多

右边红色的地方太多了，如何左右均匀分布

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

<!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>Margin布局</title>
    <style>
        .box{
            width: 100%;
            height: 1155px;
            background-color: aqua;
        }
        .wrap{
            width: 1240px;
            height: 1150px;
            background-color: red;
            /* （父元素宽度-子元素宽度）/2 */
            margin: 0 auto;
        }
        .wrap>div{
            width: 303px;
            height: 375px;
            background-color: seagreen;
            float: left;
            margin-top: 10px;
            margin-right: 9px;
        }
        .four{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">
            <div></div>
            <div></div>
            <div></div>
            <div class="four"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

老师我想请问一下在这个布局下我想测试第四个测试是否被挤下一行的第一个，但是在内联样式设置第四个div背景为粉红色为什么没有显示出来呢？

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

微信图片_20221129182817.jpg

微信图片_20221129182755.jpg

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

小米官网项目.zip

为什么我的鼠标移动到标签上面下面出来的div会一直闪烁看不清还有我一直都不能把手机图标移动在盒子里排成一列

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        .box,.box1{
            width: 303px;
            height: 375px;
            background-color: red;
            position: relative;
        }
        .box1{
            float:left;
        }
         img{
            width: 100%;
        }
        .text{
            width: 100%;
            height: 88px;
            /*相对于已经定位的父元素定位*/
            position: absolute;
            left: 0;
            bottom: 20px;
            text-align: center;

        }
        .name{
            color: #fff;
            font-size: 21px;
            font-weight: 700;
        }
        .desc{
            color: #fff;
            font-size: 14px;
        }
        .price{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<div class="box">
    <a href="#">
        <img src="images/370ad36f-425c-453a-b406-ccb2a0dffeec.jpg" alt="">
        <div class="text">
            <p class="name">MEIZU UR 高端定制耳机 预约</p>
            <p class="desc">【预约专用】私人定制，为你而声</p>
            <p class="price">￥200</p>
        </div>
    </a>
</div>
<div class="box1">
    <a href="#">
        <img src="images/370ad36f-425c-453a-b406-ccb2a0dffeec.jpg" alt="">
        <div class="text">
            <p class="name">MEIZU UR 高端定制耳机 预约</p>
            <p class="desc">【预约专用】私人定制，为你而声</p>
            <p class="price">￥200</p>
        </div>
    </a>
</div>
</body>
</html>

我已经在box1处加了float:left;效果图为什么没有实现块级元素水平显示

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

对于download这个div的css：

position: absolute之后，

left: 50%; 是距离父容器的左边的垂直线往右父容器宽度的50%吗

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

<form action="提交页面.html">
    <p>
        性别：
        <input type="radio" name="sex" id="man"/>
        <lable for="man">男</lable>
        <input type="radio" name="sex"id="woman"/>
        <lable for="woman">女</lable>
    </p>
</form>

提升用户体验度点击文字这里，代码如上，浏览器里却不能点击文字

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

这个地方的<span>可以用<p>吗

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

为什么19:28的时候margin-left: -62px;能使download这个div向左移动，这个62是怎么算出来的（哪个减去哪个）？

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

老师，我这里没有明白视频的意思，col-xs-12是把一行分成12个格子？一行占12个格子？还是分成12行？

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

同学您好