<!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>小米10s</p> <p>3299元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="../img/pull-down1.png" alt=""> </div> <p>小米11</p> <p>3999元起</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">搜索</button> <div class="nav-input-list"></div> </div> </div> </div> </body> </html>
html部分.
/* 顶部图片隐藏 */ .header{ width: 100%; height: 100%; display: none; } /* 黑色导航 */ .nav{ width: 100%; height: 40px; background-color:#333; } /* 居中div */ .nav-center{ width: 1226px; height: 100%; margin: 0 auto; } /* a的字体颜色 */ a{ color: #b0b0b0; } /* 鼠标悬停时字体颜色 */ .nav-center a:hover{ color: #fff; } /* 左侧li浮动 定位*/ .nav-left>li{ float: left; font-size: 12px; line-height: 40px; position: relative; } /* 右侧li浮动 定位*/ .nav-right>li{ float: right; font-size: 12px; line-height: 40px; position: relative; } /* span竖杠(|)的外边距 */ .nav span{ margin: 0 3.6px; color: #424242; } /* 购物车:大小 颜色 外边距 */ .cart{ width: 120px; height: 40px; background: #424242; margin-left: 20px; } /* 购物车鼠标悬停时背景颜色 */ .cart:hover{ background: #fff; } /* 购物车鼠标悬停时a的的颜色*/ .cart:hover>a{ color: #ff6700; } /* 购物车下拉列表的属性，1:相对于右侧li定位，隐藏下拉列表，所有属性:all .3s的过度 */ .cart>.cart-list{ width: 316px; /* 高度设置为0隐藏下拉列表 */ height: 0px; background:#fff; position: absolute; right: 0px; top: 40px; box-shadow: 0 2px 10px #aaa; color: #424242; /* 下拉列表的文字溢出部分隐藏 */ overflow: hidden; /* 过度:所有属性 .3s秒速度显示 */ transition: all .3s; /* 在白色导航上边显示出来 */ z-index: 1; } /* 鼠标悬停时显示下拉列表，字体居中 */ .cart:hover>.cart-list{ height: 100px; line-height: 100px; } /* app下载的属性中的二维码框设置 */ .app>.QRcode{ width: 124px; /* 高度设置为0隐藏下拉列表 */ height: 0px; background-color:#fff; box-shadow: 0 1px 5px #aaa; /* 相对于左侧li定位 */ position: absolute; top: 40px; left: 50%; margin-left: -66px; /* 下拉列表的文字溢出部分隐藏 */ overflow: hidden; /* 过度:所有属性 .3s秒速度显示 */ transition:all .3s; /* 在白色导航上边显示出来 */ z-index: 1; } /* 二维码图片的设置 */ .QRcode>.QRcode-img{ width: 90px; height: 90px; margin: 18px 0 0; } /* 二维码框中字体的设置 */ .QRcode>p{ font-size: 14px; line-height: 1; } /* 鼠标悬停二维框显示 */ .app:hover>.QRcode{ height: 148px; } /* 小三角的设置:绘制特殊图形的方式写 */ .sanjiao{ width: 0; height: 0; border-bottom: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; /* 定位小三角并且隐藏 */ position: absolute; left: 17px; top: 32px; display: none; } /* 鼠标悬停显示小三角 */ .app:hover>.sanjiao{ display: block; } /* 白色导航部分 */ .white-nav{ width: 100%; height: 100px; position: relative; } /* 居中部分 */ .white-wrap{ width: 1226px; height: 100px; margin: 0 auto; } /* logo部分 */ .logo-mi{ width: 55px; height: 55px; background: #ff6700; float: left; margin-top: 22.5px; /* 定位加隐藏 */ position: relative; overflow: hidden; } /* 中间文字导航部分 */ .white-nav-center{ width: 876px; height:100px; float: left; } /* 搜索框部分 */ .nav-input{ width: 295px; height:100px; float: right; position: relative; } /* logo的图片大小 */ .logo-mi>a>img{ width: 100%; height: 100%; /* 定位加过渡*/ position: absolute; top: 0; transition: all .3s; } /* logo-mi-logo定位的设置 */ .mi-logo{ top: 0; left: 0px; } /* logo-mi-home定位的设置 */ .mi-home{ top: 0; left: -55px; } .logo-mi:hover>a>.mi-home{ left: 0px; } .logo-mi:hover>a>.mi-logo{ left: 55px; } /* 白色导航中间部分 浮动加字体间距 */ .white-nav-center ul>li{ float: left; line-height: 100px; } /* 设置a的字体 颜色 内边距 */ .white-nav-center>ul>li>a{ font-size: 16px; color: #333; padding:0 10px; } /* logo右边图标的调整 */ .white-nav-center>ul>li:first-child{ margin-top: 9px; margin-left: 20px; margin-right: 40px; } /* 鼠标悬停a的文字变橘色 */ .white-nav-center>ul>li>a:hover{ color: #ff6700; } /* 白色导航栏的下拉列表的属性 */ .pull-down{ width: 100%; height: 230px; background: #fff; border-top: 1px solid #e0e0e0; box-shadow: 0 1px 2px #aaa; position: absolute; top: 100px; left: 0; box-sizing: border-box; display: none; transition: all .5s; } /* 居中的下拉列表部分 */ .pull-down-center{ width: 1226px; height: 100%; background-color: #fff; margin: 0 auto; } .img-box{ width: 204px; height: 110px; border-right:1px solid #bdb8b8 ; box-sizing: border-box; margin-top: 30px; margin-bottom: 15px; } .img-box img{ width: 160px; height: 110px; } .pull-down-center p{ font-size: 12px; line-height: 20px; } .pull-down-center p:nth-of-type(1){ color: #333; } .pull-down-center p:nth-of-type(2){ color:#ff6700; } /* 问题：不显示过渡属性 */ .white-nav li:hover>.pull-down{ display: block; } /* input属性 */ .nav-input>input{ width: 220px; height: 50px; border: 1px solid #e0e0e0; box-sizing: border-box; padding: 0 10px; margin-top: 23.5px; float: left; /* 不显示轮廓线 */ outline: none; border-right: none; transition:all .3s; } /* button按钮属性 */ .nav-input>button{ width: 52px; height: 50px; background: #fff; border: 1px solid #e0e0e0; box-sizing: border-box; float: left; margin-top: 23.5px; /* 不显示轮廓线 */ outline: none; transition:all .3s; } /* hover鼠标悬停时的状态 */ .nav-input>input:hover,.nav-input>input:hover+button{ border-color: #b0b0b0; } /* focus（否卡尔时）鼠标获取焦点时的状态 */ .nav-input>input:focus,.nav-input>input:focus+button{ border-color: #ff6700; } /* 鼠标悬停在button按钮上的状态 */ .nav-input>button:hover{ background-color: #ff6700; border-color: #ff6700; color: #fff; } /* 下拉列表属性 */ .nav-input-list{ width: 219px; height: 240px; background-color: #fff; border: 1px solid #ff6700; border-top:none ; /* 在input的div上定位 */ position: absolute; left: 0; top: 74px; display: none; } /* 点击获取焦点时下拉列表出现 */ .nav-input>input:focus~.nav-input-list{ display: block; } /* 以上白色导航结束 */
css部分。小米属性的下拉列表transition不出现过渡属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="work.html" name="biao1" method="post"> 用户名：<input type="text" name="user" value="请输入用户名"> <br> 密码：<input type="password" name="password" value="11"> <br> 性别： <input type="radio" name="性别" value="男">男 <input type="radio" name="性别" value="女">女 <br> 爱好： <input type="checkbox" name="like" >读书 <input type="checkbox" name="like">画画 <input type="checkbox" name="like">写字 <input type="checkbox" name="like">科技 <br> <input type="submit" name="确认" value="确认"> <input type="reset" value="充值"> <input type="button" value="五功能按钮"> <br> <button type="submit">点我</button> <button type="reset">点我</button> </form> <form action="../003form表单/images/img1.gif"> <select name="sg" id="sg"> <option value="bj" >苹果</option> <option value="bj" >梨</option> <option value="bj" >香蕉</option> <option value="bj" >葡萄</option> </select> </form> <form action="../003form表单/02表单元素1.html" enctype="multipart/form-data"> <select name="xw" id="xw"> <optgroup label="我是组1"> <option value="w">漩涡1</option> <option value="w">漩涡2</option> <option value="w">漩涡3</option> <option value="w">漩涡4</option> </optgroup> <optgroup label="我是组2"> <option value="w">漩涡1</option> <option value="w">漩涡2</option> <option value="w">漩涡3</option> </optgroup> </select> <p> <input type="radio" name="性别" value="男" id="男"> <label for="男">男</label> <input type="radio" name="性别" value="女" id="女"> <label for="女">女</label> </p> <p> <textarea id="留言板">请输入留言 </textarea> </p> <p> <input type="image" src="img2.gif"> </p> <input type="file" > </form> </body> </html>
问题就是，为什么footer容器夹在侧边栏和主要内容之间了呢
<!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>
input{
border: 1px solid gray;
}
input:focus{
border: 1px solid blue;
</style>
</head>
<body>
<input type="text">
</body>
</html>
当焦点放在输入框并没有变成蓝色，求解
<!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"> <link rel="stylesheet" href="./icon/iconfont.css"> <title>Document</title> <style> *{ margin: 0; padding: 0; } #box{ width:600px; height:1200px; margin:auto; background:rgb(14, 112, 128); } #box > h2{ padding:50px; padding-bottom:15px; text-align:center; color:white; } #box > h2:nth-child(2){ padding-top:0px; color:yellow; } #box > h3{ height:40px; text-align:center; line-height:40px; color:white; border:1px solid red; } #box > h3 > i{ font-size:30px; color:white; } #box > .content{ width:100%; height:280px; margin-top:20px; } #box > .content .content_center{ width:75%; height:100%; margin:auto; } #box > .content .content_center .content_center_left{ float:left; width:60%; height:100%; } #box > .content .content_center .content_center_left .content_center_left_top{ width:100%; height:60px; text-align:center; color:white; line-height:60px; font-size:20px; } #box > .content .content_center .content_center_left .content_center_left_bottom{ width:220px; height:220px; margin:auto; background:pink; } #box > .content .content_center .content_center_right{ float:left; width:40%; height:100%; } #box > .content .content_center .content_center_right .content_center_right_center{ float:right; width:80%; height:100%; padding-top:8px; } #box > .content .content_center .content_center_right .content_center_right_center .content_center_right_center_top{ width:100%; height:120px; } #box > .content .content_center .content_center_right .content_center_right_center .fz{ width:100%; height:40%; font-size:20px; color:white; line-height:48px; text-align:center; cursor: pointer; } #box > .content .content_center .content_center_right .content_center_right_center .lj{ width:100%; height:46%; text-align:center; line-height:55px; border-radius:30px; } #box > .content .content_center .content_center_right .content_center_right_center .fzje{ background:yellow; } #box > .content .content_center .content_center_right .content_center_right_center .fzlj{ background:white; margin-top:0px; } #box > .content .content_center .content_center_right .content_center_right_center .content_center_right_center_bottom{ width:100%; height:120px; margin-top:50px; } #box > .ziduan{ width:100%; margin-top:40px; color:white; } #box > .ziduan > p{ margin-left:20px; line-height:40px; } </style> </head> <body> <div id="box"> <h2>请使用USDT-TRC20支付转账</h2> <h2>转账数量需严格要求, 数量错误将不会到账</h2> <h3> <i class="iconfont icon-naozhong"></i> 有效时间 : <span class="shi">10</span>:<span class="fen">00</span>:<span class="miao">00</span></h3> <div class="content"> <div class="content_center"> <div class="content_center_left"> <div class="content_center_left_top"> 马上扫码去转账 </div> <div class="content_center_left_bottom"></div> </div> <div class="content_center_right"> <div class="content_center_right_center"> <div class="content_center_right_center_top"> <div class="fz">复制金额</div> <div class="lj fzje">15.38 USDT</div> </div> <div class="content_center_right_center_bottom"> <div class="fz">复制链接</div> <div class="lj fzlj">链接</div> </div> </div> </div> </div> </div> <div class="ziduan"> <p>温馨提醒</p> <p>1. 请勿向上述地址充值任何非USDT-TRC20资产, 否则资产将不可找回</p> <p>2. 您充值至上述地址后, 需整个网络节点的确认, 多次网络确认后到账</p> <p>3. 务必确保最终到账金额为15.38USDT, 不包含额外手续费, 其他不符金额都不自动到账</p> <p>4. 该地址只能使用一次, 重复使用会造成资产丢失</p> </div> </div> </body> </html>
.content{ width: 100%; overflow: hidden; padding: 4px 0 12px; } .title{ text-align: left; color: #333; font-size: 22px; font-weight: 200; line-height: 58px; } .phone-box{ width: 100%; height: 614px; } .yang-left{ width: 234px; height: 100%; background-color: #ff6700; float: left; } .yang-right{ width: 992px; height: 614px; float: left; } .yang-left img{ width: 234px; height: 614px; } .items1{ width: 234px; height: 300px; background-color: #e0e0e0; padding: 20px 0; margin: 0 0 14px 14px; float: left; transition: all .2s linear; box-sizing: border-box; } .img1{ width: 164px; margin-bottom: 18px; } .items1:hover{ transform: translateY(-2px); box-shadow: 0 15px 30px rgba(0, 0, 0, .1); } .name1{ width: 214px; height: 20.8; color: #333; font-size: 14px; line-height: 21px; margin: 0 auto 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .name2{ width: 214px; height: 18px; color: #b0b0b0; font-size: 12px; line-height: 18px; margin: 0 10px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .name3{ width: 214px; height: 20.8px; color: #ff6700; font-size: 14px; line-height: 18px; margin: 0 10px 14px; } .big-img{ width: 1226px; height: 120px; margin: 22px 0; } 老师，line-height: 21px这个不加可以吗？white-space: nowrap; overflow: hidden; text-overflow: ellipsi这行代码有啥用？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form练习</title> </head> <body> <form action="work.html" enctype="multipart/form-data"> <p> 姓名：<input type="text" value="大傻" disabled> </p> <p> 密码: <input type="password"> </p> <p> 性别：<input type="radio" id="男" checked name="性别"> <label for="男">男</label> <input type="radio" id="女" name="性别"> <label for="女">女</label> </p> <p> 喜欢的水果： <input type="checkbox" id="桃" name="水果"> <label for="桃">桃</label> <input type="checkbox" id="苹果" name="水果"> <label for="苹果">苹果</label> <input type="checkbox" id="梨" name="水果"> <label for="梨">梨</label> </p> <input type="file"> <input type="image" src="img2.gif"> <p> <input type="submit" value="提交表单"> </p> <p> <input type="reset" value="点我重制"> </p> <p> <input type="button" value="我并没卵用"> </p> <p> 表单1：<select name="数字" id=""> <option value="">11</option> <option value="">22</option> <option value="" selected>33</option> <option value="">44</option> <option value="">55</option> <option value="">66</option> <option value="">77</option> <option value="">88</option> <option value="">99</option> <option value="">00</option> </select> </p> <p> 表单2：<select name="字母" id=""> <optgroup label="数字"> <option value="">a</option> <option value="">22b</option> <option value="">33c</option> <option value="">44d</option> </optgroup> <optgroup label="字母"> <option value="">55e</option> <option value="">66f</option> <option value="" selected>77g</option> <option value="">88h</option> <option value="">99i</option> <option value="">00g</option> </optgroup> </select> </p> <p> <textarea name="" id="liu" cols="30" rows="10">留言板： </textarea> </p> <p> <input type="hidden"> <button type="submit">按键1</button> </p> </form> </body> </html>
无序列表的嵌套这种格式是可行的吗<ul> <li>中国</li> <ul> <li>沈阳</li> <ul> <li>大东区</li> <li>和平区</li> <li>浑南区</li> </ul> <li>赤峰</li> <li>辽阳</li> </ul> <li>法国</li> <li>英国</li></ul>
语义化是什么意思？？？？？
这里是不是写错了，1B=8b吧，我看文件上写是是8b
小米手机官网.zip
老师 我这个banner做完以后 白色导航的那个hover怎么显示不出来？
我设置1240宽度的时候，margin属性不能自动居中，为什么
当我缩小宽度到1000左右时，左右留白的宽度才不会相差太大
<style> @media screen (max: width 768px){ background-color:red; } </style>
@media screen (max: width 768px){ background-color:red; }
老师，我这行代码是哪里不对吗？
老师，为什么我的图片在设置“小米手机”这行字的时候就居中了，然后跟着视频中再设置margin-top的时候，就成下图这样了，这是什么问题
小米.rar
<style> @media screen and (max: width 768px;){ background-color: red; } </style>
写完之后，下面颜色出不来
非常抱歉给您带来不好的体验！为了更深入的了解您的学习情况以及遇到的问题，您可以直接拨打投诉热线：
我们将在第一时间处理好您的问题！
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护：百战汇智（北京）科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证：京B2-20212637
京公网安备 11011402011233号