会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132358个问题

小米.rar

老师为什么在搜索框哪里我鼠标聚焦的时候,边框颜色不会变成橘色呢

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 196楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 197楼

小米官方.zip

在黑色导航的左侧栏中的,当鼠标滑动到“下载app”该内容时,三角形并未显示出来。

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

在作业3中产生疑问:当我把第二、第三两个form注释掉时,运行效果一样,那我是否可以只写第一个form,这样更简洁?

一、没注释前

<!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>

效果一

image.png

效果二

image.png

WEB前端全系列/第一阶段:HTML5+CSS3模块/表单 203楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/浮动与定位 204楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/响应式项目 206楼

<!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>

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

blob.png

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



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

<!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>

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

WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 208楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5新增元素 209楼

小米官网项目.zip

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

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

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637