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

<!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>小米</title>
    <link rel="icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/小米官网练习.css">
</head>
<body>
    
<div class="header">
    <a href="#">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
    </a>
<!-- 黑色导航 -->
</div>
    <div class="nav">
        <div class="nav-center">
            <ul class="nav-left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">loT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">天星科技</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li class="app">
                    <a href="#">下载APP</a>
                    <span>|</span>
                    <div class="QRcode">
                        <img src="../img/93650133310ec1c385487417a472a26c.png" alt="" class="QRcode-img">
                        <p>小米商城APP</p>
                    </div>
                    <div class="sanjiao"></div>
                </li>
                <li><a href="#">智能生活</a><span>|</span></li>
                <li><a href="#">select location</a></li>
            </ul>   
            <ul class="nav-right">
                <li class="cart">
                    <a href="#">购物车(0)</a>
                    <div class="cart-list">购物车还没有商品,赶紧加入吧</div>
                </li>
                <li><a href="#">信息通知</a></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">登录</a><span>|</span></li>
            </ul>   
        </div>  
    </div>
<!-- 白色导航 -->
<div class="white-nav">
    <div class="white-wrap">
        <div class="logo-mi">
            <a href="#">
                <img src="../img/mi-logo.png" alt="" class="mi-logo">
                <img src="../img/mi-home.png" alt="" class="mi-home">
            </a>
            
        </div>
        <div class="white-nav-center"> 
             <ul>
                <li>
                    <a href="#">
                    <img src="../img/大logo.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">小米手机</a>
                    <div class="pull-down">
                        <div class="pull-down-center">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="../img/pull-down.jpg" alt="">
                                        </div>
                                        <p>3299元起</p>
                                        <p>小米10s</p>
                                    
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="../img/pull-down1.png" alt="">
                                        </div>
                                        <p>3999元起</p>
                                        <p>小米11</p>                                      
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">Redmi 红米</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 class="nav-input">
            <input type="text" placeholder="小米之家">
            <button class="button">&#xe63d;</button>
        </div>
    </div>
</div>



</body>
</html>

补充的HTML。问题是不显示放大镜图标和小米手机下拉列表的过渡属性.

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 272楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/前端入门与基础知识 273楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米</title>
    <link rel="icon" href="小米images/favicon.ico">
    <link rel="stylesheet" href="CSS/reset.css">
    <link rel="stylesheet" href="CSS/mi.css">
</head>
<body>
<!--头部开始-->
<div class="header">
    <a href="#">
        <img src="小米images/a2a9e6db5e3c5374301827435d8595c6.jpg" alt="">
    </a>
</div>
<!--头部结束-->
<!--黑色导航部分开始-->
<div class="black-nav">
    <div class="black-nav-left">
        <ul>
            <li>
                <a href="#">小米商城</a>
            </li>
            <li>
                <a href="#">MIUI</a>
            </li>
            <li>
                <a href="#">loT</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>
            <li>
                <a href="#">下载app</a>
            </li>
            <li>
                <a href="#">智能生活</a>
            </li>
            <li>
                <a href="#">select Location</a>
            </li>
        </ul>
    </div>
    <div class="black-nav-right">
        <ul>
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">消息通知</a></li>
            <li><a href="#">
                <img src="小米images/692a6c3b0a93a24f74a29c0f9d68ec71.png" alt="">购物车</a>
                <div class="cart-list">
                </div>
            </li>
        </ul>
    </div>
</div>
<!--黑色导航部分结束-->
</body>
</html>
/*头部样式开始*/
.header{
    width: 100%;
    height: 120px;
    background: red;
    overflow: hidden;
    position: relative;
}
.header img{
    height: 120px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/*头部样式结束*/
/*黑色导航开始*/
.black-nav{
    width: 100%;
    height: 40px;
    background:#b0b0b0;
}
.black-nav-left{
    margin-left: 100px;
    width: 789px;
}
.black-nav-right{
    margin-left: 100px;
    height: 40px;
    position: relative;
}
.black-nav-left a,.black-nav-right a{
    color: white;
    float: left;
    font-size: 12px;
    padding: 3px;
    line-height: 40px;
}
.black-nav-right img {
    height: 40px;
}
a:hover{
    color: deepskyblue;
}
.cart-list{
    width: 316px;
    height: 78px;
    background: deeppink;
    position: absolute;
    top: 40px;
    left:660px;
    display: none;
}
.black-nav-right li:hover>.cart-list{
    display: block;
}
/*黑色导航结束*/

现在我的鼠标放到第一个列表上的时候,为什么字体颜色不变成蓝色了呢

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 274楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/浮动与定位 275楼

为什么鼠标悬停在box上,图片2不往右移动

<!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>实操二:定位练习3</title>
    <style>
        p{
            margin:0;
            padding:0;
        }
        a{
            text-decoration:none;
        }
        .box{
            width:290px;
            height:390px;
            text-align:center;
            position:relative;
        }
        img{
            width:120px;
            height:240px;
            position:absolute;
            left:85px;
            top:15px;
        }
        .box:hover>.img1{
            left:40px;
        }
        /* 为什么鼠标悬停在box上,图片2不移动? */
        .box:hover>.img2{
            left:130px;
        }
        .title{
            color:#333;
            margin-bottom:2px;
        }
        .desc{
            color:#999;
            font-size:14px;
       }
       .price{
            color:#c00;
            font-size:22px;
        }
        span{
        color:#c00;
        font-size:14px;
        margin-bottom:3px;
        }
        .text{
            width:290px;
            height:80px;
            position:absolute;
            bottom:30px;
            left:0;
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="引用图片/img9.jpeg" alt="" class="img1">
        <img src="引用图片/img10.jpeg" alt="" calss="img2">
        <a href="#">
            <div class="text">
                <p class=title>金立S11</p>
                <p class="desc">超高清屏 超高性价比</p>
                <p class="price"><span>¥</span>2299</p>
            </div>
        </a>
    </div>
</body>
</html>


WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS常用属性 276楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS选择器 277楼

<!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>Document</title>

    <style>
        .square{
            width: 600px;
            height: 600px;
            background-color: antiquewhite;
        }
        .left{
            float: left;
            width: 200px;
            height: 600px;
            background-color: pink;
        }
        .right{
            float: right;
            width: 400px;
            height: 600px;
            background-color: green;
        }
        .top{
            width: 400px;
            height: 300px;
            background-color: springgreen;
        }
        .zuo{
            float: left;
            width: 200px;
            height: 300px;
            background-color: blue;
        }
        .you{
            float: right;
            width: 200px;
            height: 300px;
            background-color: chocolate;
        }
    </style>

</head>
<body>
   
    <div class="square">
        <div class="left"></div>
        <div class="right">
            <div class="top"></div>
            <div class="bottom">
                <div class="zuo"></div>
                <div class="you"></div>
            </div>
        </div>
    </div>

</body>
</html>


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

<!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模块/表单 282楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/表单 284楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/商城官网项目 285楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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