elc-box中最后一个盒子中 浏览更多 设置宽高不生效 字体图标大小也不生效（字体图标不显示这个问题也有疑问，）
<!-- 家电部分 --> <div class="elc"> <div class="elc-nav"> <a href="#"> <img src="../images/41d16e66381cfeda7b6b39ab67678d5e.jpg" alt=""> </a> </div> <h2 class="title">家电 <a href="#"> <span>热门</span> <span>电视影音</span> </a> </h2> <div class="elc-box"> <div class="items-2"> <a href="#"> <img src="../images/116fc43816b87192be4e67cf762e8da5.jpeg" alt=""> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/03a9e7e96a09d256ca1badeec186c859.jpg" alt="" class="img1"> <h3 class="name2">小米全面屏电视65英寸 E65X </h3> <p class="desc2">全面屏设计</p> <p class="price2">2999元<del class="original">3299元</del></p> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/20d36fbaa18625e4fe507af31e4e9f83.jpg" alt="" class="img1"> <h3 class="name2">全面屏电视E43K </h3> <p class="desc2">全面屏设计，海量内容</p> <p class="price2">1349元<del class="original">1500元</del></p> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/9d8674cd21c486feff5328772ab9cf01.jpg" alt="" class="img1"> <h3 class="name2">小小米电视4A 70英寸 </h3> <p class="desc2">大屏更享受</p> <p class="price2">3599元<del class="original">3900元</del></p> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/6bed167fc905bab57dee478bcf1e5e0d.JPG" alt="" class="img1"> <h3 class="name2">米家互联网对开门冰箱 540L </h3> <p class="desc2">重磅新品福利特惠</p> <p class="price2">2999元<del class="original">3600元</del></p> </a> </div> <div class="items-2"> <a href="#"> <img src="../images/dfbdabe36b2d630d57a015e6fb5eb3ea.jpg" alt=""> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/b8c63a2024528fe5410ebe669b7d2407.jpg" alt="" class="img1"> <h3 class="name2">Redmi全自动波轮洗衣机1A 8kg</h3> <p class="desc2">一键操作，父母都爱用</p> <p class="price2">849元<del class="original">899元</del></p> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/74e573c4c0d89048392d14831cc507d5.jpg" alt="" class="img1"> <h3 class="name2">Air 13.3" 2019款 </h3> <p class="desc2">新一代独立显卡</p> <p class="price2">6299元</p> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/7e5f89adf98ab3fccb34012b5209cd58.jpg" alt="" class="img1"> <h3 class="name2">米家互联网烟灶套装（天然气）</h3> <p class="desc2">点火排烟，风随火动</p> <p class="price2">2298元</p> </a> </div> <div class="items-last"> <div> <a href="#"> <img src="../images/1612c93ad4756215774a0dbec7a81bb2.jpg" alt=""> <h3 class="name2">米家电烤箱 </h3> <p class="price2">279元</p> </a> </div> <div> <a href="#"> <div class="more">浏览更多 <small>电视影音</small> </div> <i class="icontfont"></i> </a> </div> </div> </div> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米广告部分</title> <link rel="icon" href="../images/favicon.ico"> <link rel="stylesheet" href="../css/reset.css"> <!-- <link rel="stylesheet" href="../css/demo.css "> --> <link rel="stylesheet" href="小米.css"> </head> <body> <div class="content"> <div class="wrap"> <!-- 家电部分 --> <div class="elc"> <div class="elc-nav"> <a href="#"> <img src="../images/41d16e66381cfeda7b6b39ab67678d5e.jpg" alt=""> </a> </div> <h2 class="title">家电 <a href="#"> <span>热门</span> <span>电视影音</span> </a> </h2> <div class="elc-box"> <div class="items-2"> <a href="#"> <img src="../images/116fc43816b87192be4e67cf762e8da5.jpeg" alt=""> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/03a9e7e96a09d256ca1badeec186c859.jpg" alt="" class="img1"> <h3 class="name2">小米全面屏电视65英寸 E65X </h3> <p class="desc2">全面屏设计</p> <p class="price2">2999元<del class="original">3299元</del></p> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/20d36fbaa18625e4fe507af31e4e9f83.jpg" alt="" class="img1"> <h3 class="name2">全面屏电视E43K </h3> <p class="desc2">全面屏设计，海量内容</p> <p class="price2">1349元<del class="original">1500元</del></p> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/9d8674cd21c486feff5328772ab9cf01.jpg" alt="" class="img1"> <h3 class="name2">小小米电视4A 70英寸 </h3> <p class="desc2">大屏更享受</p> <p class="price2">3599元<del class="original">3900元</del></p> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/6bed167fc905bab57dee478bcf1e5e0d.JPG" alt="" class="img1"> <h3 class="name2">米家互联网对开门冰箱 540L </h3> <p class="desc2">重磅新品福利特惠</p> <p class="price2">2999元<del class="original">3600元</del></p> </a> </div> <div class="items-2"> <a href="#"> <img src="../images/dfbdabe36b2d630d57a015e6fb5eb3ea.jpg" alt=""> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/b8c63a2024528fe5410ebe669b7d2407.jpg" alt="" class="img1"> <h3 class="name2">Redmi全自动波轮洗衣机1A 8kg</h3> <p class="desc2">一键操作，父母都爱用</p> <p class="price2">849元<del class="original">899元</del></p> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/74e573c4c0d89048392d14831cc507d5.jpg" alt="" class="img1"> <h3 class="name2">Air 13.3" 2019款 </h3> <p class="desc2">新一代独立显卡</p> <p class="price2">6299元</p> </a> </div> <div class="items-1"> <a href="#"> <img src="../images/7e5f89adf98ab3fccb34012b5209cd58.jpg" alt="" class="img1"> <h3 class="name2">米家互联网烟灶套装（天然气）</h3> <p class="desc2">点火排烟，风随火动</p> <p class="price2">2298元</p> </a> </div> <div class="items-last"> <div> <a href="#"> <img src="../images/1612c93ad4756215774a0dbec7a81bb2.jpg" alt=""> <h3 class="name2">米家电烤箱 </h3> <p class="price2">279元</p> </a> </div> <div> <a href="#"> <div class="more">浏览更多 <small>电视影音</small> </div> <i class="icontfont"></i> </a> </div> </div> </div> </div> </div> </div>
<!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> #container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 200px 200px 200px 200px 200px 200px; grid-template-areas: "item1 item1 item2" "item1 item1 item3" "item3 item3 item3" "item4 item5 item6" "item7 item8 item9" "item9 item9 item9"; } .item{ font-size: 30px; border: 1px solid #e5e4e9; text-align: center; line-height: 200px; } .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>
为什么我的代码运行出来效果不对
<!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="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./css/mi.css"> <link rel="stylesheet" href="./css/iconfont/iconfont.css"> </head> <body> <!-- 头部开始 --> <div class="header"> <a href="#"> <img src="./images/top.jpg" alt=""> </a> </div> <!-- 头部结束 --> <!-- 黑色导航部分开始 --> <!-- 黑色导航实现步骤： 1. 主容器，背景黑色 2. 内容部分居中显示，容器处理 3. 左导航和右导航 4. 动画 --> <div class="black-nav"> <div class="wrap"> <ul class="black-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> <a href="#">下载APP</a> <span>|</span> <div class="download"> <img src="./images/download.png" alt=""> <p>小米商城APP</p> </div> <div class="stri"></div> </li> <li><a href="#">智能生活</a><span>|</span></li> <li><a href="#">SelectLocation</a><span>|</span></li> </ul> <ul class="black-nav-right"> <li><a href="#">登录</a><span>|</span></li> <li><a href="#">注册</a><span>|</span></li> <li><a href="#">消息通知</a><span>|</span></li> <li class="cart"> <a href="#"> <i class="iconfont"></i> <i>购物车（0）</i> </a> <div class="cart-list"> 购物车中还没有商品，赶紧选购吧 </div> </li> </ul> </div> </div> <!-- 黑色导航部分结束 --> <!-- 白色导航开始 --> <div class="white-nav"> <div class="wrap"> <div class="logo"> <img src="./images/mi-home.png" alt="" class="mi-home"> <img src="./images/mi-logo.png" alt="" class="mi-logo"> </div> <div class="nav-bar"> <ul> <li><a href="#"><img src="./images/zzxsh.gif" alt=""></a></li> <li> <a href="#">小米手机</a> <div class="nav-bar-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="img-box"> <img src="./images/phone.png" alt=""> </div> <p class="name">小米10至尊纪念版</p> <p class="price">5200元</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/phone.png" alt=""> </div> <p class="name">小米10至尊纪念版</p> <p class="price">5200元</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/phone.png" alt=""> </div> <p class="name">小米10至尊纪念版</p> <p class="price">5200元</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/phone.png" alt=""> </div> <p class="name">小米10至尊纪念版</p> <p class="price">5200元</p> </a> </li> </ul> </div> </div> </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="search"> <input type="text" placeholder="元宇宙"> <button class="iconfont"></button> </div> </div> </div> <!-- 白色导航结束 --> </body> </html> 老师为什么白色导航下居中不了啊，还有黑色导航
老师板块二既然是轮播图，这五个图形为什么用绝对定位不用固定定位呢
老师，视频里在20：20这里设置img-box的width：100%，意思是相对于它的父元素为100%，但是它的父元素是wrap，宽度是最开始设置的1226px，那么img-box里设置的宽度不应该也是1226px嘛。为什么查看控制台，显示的是和图片的宽度一样
<!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 auto; } .container{ width: 1200px; background-color: rgb(173, 151, 200); margin:20px auto; padding-bottom: 10px; border-radius: 20px; } .t-box{ display: flex; width: 1160px; height: 50px; align-items: center; justify-content: flex-start; } .b-box{ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 1160px; height: 150px; background-color: white; border-radius: 20px; background-attachment: scroll; /*左右滚动*/ } .rs{ font-weight:800; font-size: larger; color: rgb(25, 24, 34); margin-left: 13px; } .rs span{ padding-left: 15px; font-size: medium; font-family: "楷体"; } .btn{ margin-right: 15px; border-radius: 25px; padding: 5px 10px; border: none; letter-spacing: 2px; color: rgb(92, 80, 118); } .t-txt,.b-txt{ display: flex; align-items: center; justify-content: space-around; white-space: nowrap; height: 70px; width: 1150px; border: 1px solid; /* white-space: nowrap; */ background-attachment: auto; /*左右滚动*/ } .b-box .txt{ line-height: 70px; box-sizing: border-box; /*依旧变形*/ width: 100px; height: 45px; background-color: rgb(173, 151, 200); margin-right: 10px; } </style> </head> <body> <div class="container"> <div class="t-box"> <p class="rs">粉丝热搜<span>大家都在看</span></p> <button class="btn">查看全部 ❥</button> </div> <div class="b-box"> <div class="t-txt"> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> </div> <div class="b-txt"> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> <div class="txt"></div> </div> </div> </div> </body> </html>
如上，底部内容位置里面有好多小盒子，我想让超出部分横向滚动，但是好像不行，添加新的盒子其他盒子就会挤压变形平分区域没法超出屏幕横向滚动。请老师指点我该怎么写
<table align="center">
这样写align是红色的，是错误的意思吗
老师，有没有webstorm软件的的破解包啊
<!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>
.text1{
line-height: 0px;
}
.box{
height: 80px;
width: 100%;
background-color: burlywood;
</style>
</head>
<body>
<div class="box">
<p class="text1">大家好</p>
</div>
</body>
</html>
老师想问一下 为什么在这里我text1是div里头的 行高设置为0px的时候，他效果看起来是超出了这个div呢 是因为div本身就会和最顶部上面有一个空间的原因吗
老师，能讲一下iconfont的相关知识吗？
老师 overflow：hidden；可以清除浮动的影响（解决父元素塌陷的问题），原理是啥？理解不了
问题： 表格相关问题
a、在给表格或者单个单元格设置背景图片的时候 需不要给定宽度或者高度？来达到照片的正常显示？
为什么main中给定了高度，还要在left和right中设置高度呢？子元素不是可以继承父元素的样式吗？
Title 98 95 88 91
<!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> </head> <body> <audio src="./source/一路向北 - 周杰伦.mp3" controls autoplay loop muted></audio> </body> </html>
音频设置了autoplay，不能自动播放；再加上muted也没用呢，老师能试试么？
非常抱歉给您带来不好的体验！为了更深入的了解您的学习情况以及遇到的问题，您可以直接拨打投诉热线：
我们将在第一时间处理好您的问题！
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护：百战汇智（北京）科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证：京B2-20212637
京公网安备 11011402011233号