<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式布局实操</title> <style> * { margin: 0; padding: 0; } body{ background-color: #f1f1f1; } .nav { width: 100%; height: 50px; background-color: #555; overflow: hidden; clear: both; line-height: 50px; } .list{ width: 80%; margin: 0 auto; /* list让内容往中间显示 */ } .nav ul{ overflow: hidden; clear: both; float: left; } .container .nav ul li { list-style: none; float: left; padding: 0 20px; } .container .nav ul li a { text-decoration: none; color: white; font-size: 16px; } .container .nav ul li.select { background-color: orange; } .nav .search { float: right; /* position: relative; */ } .container .nav .search input { height: 30px; width: 200px; border: none; padding-left: 10px; border-radius: 50px; display: inline-block; /* position: absolute; top: 10px; right: 100px; */ } .container .nav .search button { height: 30px; width: 60px; border: none; border-radius: 50px; margin-left: 20px; background-color: orange; color: white; font-size: 16px; display: inline-block; /* position: absolute; top: 10px; right: 20px; */ } </style> </head> <body> <div class="container"> <div class="nav"> <div class="list"> <ul> <li class="select"><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">服务</a></li> <li><a href="#">联系</a></li> </ul> <div class="search"> <input type="text" placeholder="搜索..."> <button>搜索</button> </div> </div> </div> </div> </div> </body> </html>
老师，我在搜索框后面加了button按钮，但是搜索框input和button不在一条水平线上，是因为浮动的影响吗？还是我别的地方写错了？我上述代码中注释掉的部分是给父元素search添加了position,然后分别给子元素input搜索框和button添加了绝对定位，解决了这个问题，请问这样做对吗？还有没有其他解决办法使他们的高度齐平
老师，我想问一下这里的 .box{ width="100px" height="100px" margin="50px" border="5px" padding="20px" } 当设置了border后，那margin距离.box还是50px吗？还是距离border是 50px？ 当设置了内边距后，.box被撑开，那.box的width和height应该发生了 改变，是否和上面设置的height和width冲突
老师为什么这一块设置浮动效果是这样的
老师，我想问一下这里的width和height设置的是content的大小吗？
9分43开始突然有一段没声音啊
老师，像播放的三角按钮，使用播放图标可以吗？
使用css画三角和使用图标，哪种方式更好呢？
刚才通过实操作业。
发现把大容器宽度和高度都设置为 实参。
里面的子容器宽度和高度都设置为%百分比形式的 形式参数。
结论：
貌似发现了新世界，感觉后期如果维护的话。只需要修改外面大容器的实际参数值。就好了
毕竟内部的一些参数因为全部都是百分比形式输入的。所以内部布局都会跟着外部布局去变化。
老师，这个img 直接margin:0 auto不就居中了嘛，为什么还要transform跟absolute定位
盒子的背景颜色老师有时候用background，有时候用background-color，这两个有什么区别吗
为啥老师输入<a就能自动生成<a href=""</a>
/* 导航样式开始 */ .nav { width: 100%; height: 66px; background: #88c5e1; border-bottom: 5px solid #54abd4; } .wrap { width: 87%; margin: 0 auto; } .logo, .nav-bar, .search { float: left; height: 66px; } .search .text-input { width: 100%; height: 40px; background-color: #f5f5f5; border: 1px solid #f5f5f5; box-sizing: border-box; border-radius: 2px; outline: none; margin-top: 13px; padding-left: 10px; transition: all 0.2s; } .search button { width: 40px; height: 34px; background-color: #f5f5f5; color: #54abd4; font-weight: 900; position: absolute; top: 16px; right: 2px; } .text-input:hover { background-color: #f5f5f5; border-color: #54abd4; } .nav-bar>ul { float: right; } .nav-bar ul li { float: left; } .nav-bar ul li a { color: #fff; padding: 10px; display: block; margin-left: 8px; margin-top: 12.5px; } .nav-bar-active { border-bottom: 2px solid #fff; } .nav-bar a:hover { border-bottom: 2px solid #fff; } /* 导航样式结束 */ /* ************** 响应式设计 *********** */ /* pc端 */ @media screen and(min-width:992px) { .logo { width: 25%; background: url("../images/Brand.png") no-repeat left; background-size: 183px; } .search { width: 40%; position: relative; } .nav-bar { width: 35%; } .btn { display: none; } } /* pad端 */ @media screen and(min-width:768px) and (max-width:992px) { .logo { width: 18%; background: url("../images/Brand-M.png") no-repeat left; background-size: 86px; } .search { width: 42%; position: relative; } .nav-bar { width: 40%; } .btn { display: none; } } /* M端 */ @media screen and(max-width:768px) { .logo { width: 16%; background: url("../images/Brand-S.png") no-repeat left; background-size: 38px; } .search { width: 68%; position: relative; } .nav-bar { display: none; } .btn { width: 43px; height: 43px; border: 1px solid #fff; font-weight: 700; line-height: 43px; float: right; color: #fff; margin-top: 10.5px; } .btn i { font-size: 20px; } }
也不知道哪里出问题了，对照着源码对了好几遍了，但是源码复制过来就没问题了
/*视频开始*/ .video-box{ width: 100%; height: 299px; background-color: red; } .video-box>div{ width: 296px; height: 285px; background-color: #ffffff; float: left; margin-bottom: 14px; margin-right: 14px; } .video-box>div:last-child{ margin-right: 0; } <!--主题开始--> <div class="content"> <div class="wrap"> <!--手机开始--> <div class="phone"> <h3 class="title">手机</h3> <div class="phone-box"> <div class="phone-box-left"> <a href="#"> <img src="images/574c6643ab91c6618bfb2d0e2c761d0b.jpg" alt=""> </a> </div> <div class="phone-box-right"> <div class="items1"> <a href="#"> <img src="images/d880ff45a9a3b70527770e01521fc939.jpg" alt="" class="img1"> <p class="name2">小米10至尊版</p> <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price2">5299元起</p> </a> </div> <div class="items1"> <a href="#"> <img src="images/d880ff45a9a3b70527770e01521fc939.jpg" alt="" class="img1"> <p class="name2">小米10至尊版</p> <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price2">5299元起</p> </a> </div> <div class="items1"> <a href="#"> <img src="images/d880ff45a9a3b70527770e01521fc939.jpg" alt="" class="img1"> <p class="name2">小米10至尊版</p> <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price2">5299元起</p> </a> </div> <div class="items1"> <a href="#"> <img src="images/d880ff45a9a3b70527770e01521fc939.jpg" alt="" class="img1"> <p class="name2">小米10至尊版</p> <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price2">5299元起</p> </a> </div> <div class="items1"> <a href="#"> <img src="images/d880ff45a9a3b70527770e01521fc939.jpg" alt="" class="img1"> <p class="name2">小米10至尊版</p> <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price2">5299元起</p> </a> </div> <div class="items1"> <a href="#"> <img src="images/d880ff45a9a3b70527770e01521fc939.jpg" alt="" class="img1"> <p class="name2">小米10至尊版</p> <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price2">5299元起</p> </a> </div> <div class="items1"> <a href="#"> <img src="images/d880ff45a9a3b70527770e01521fc939.jpg" alt="" class="img1"> <p class="name2">小米10至尊版</p> <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price2">5299元起</p> </a> </div> <div class="items1"> <a href="#"> <img src="images/d880ff45a9a3b70527770e01521fc939.jpg" alt="" class="img1"> <p class="name2">小米10至尊版</p> <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price2">5299元起</p> </a> </div> </div> </div> <div class="big-img"> <a href="#"> <img src="images/c3b86ede4dd31d7c126d56fbdde4f855.jpg" alt=""> </a> </div> </div> <!-- 手机结束--> <!-- 家电开始--> <div class="elc"> <h3 class="title">家电</h3> <div class="elc-box"> <div class="items1 items2"> <a href="#"> <img src="images/f256b81e4233333692eece77ed06ebc2.jpg" alt=""> </a> </div> <div class="items1"> <a href="#"> <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt="" class="img1"> <p class="name2">小米11 Ultra</p> <p class="desc2">1/1.12''GN2｜2K四微曲屏</p> <p class="price2">5499元 <del>5999元</del></p> </a> </div> <div class="items1"> <a href="#"> <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt="" class="img1"> <p class="name2">小米11 Ultra</p> <p class="desc2">1/1.12''GN2｜2K四微曲屏</p> <p class="price2">5499元 <del>5999元</del></p> </a> </div> <div class="items1"> <a href="#"> <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt="" class="img1"> <p class="name2">小米11 Ultra</p> <p class="desc2">1/1.12''GN2｜2K四微曲屏</p> <p class="price2">5499元 <del>5999元</del></p> </a> </div> <div class="items1"> <a href="#"> <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt="" class="img1"> <p class="name2">小米11 Ultra</p> <p class="desc2">1/1.12''GN2｜2K四微曲屏</p> <p class="price2">5499元 <del>5999元</del></p> </a> </div> <div class="items1 items2"> <a href="#"> <img src="images/f256b81e4233333692eece77ed06ebc2.jpg" alt=""> </a> </div> <div class="items1"> <a href="#"> <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt="" class="img1"> <p class="name2">小米11 Ultra</p> <p class="desc2">1/1.12''GN2｜2K四微曲屏</p> <p class="price2">5499元 <del>5999元</del></p> </a> </div> <div class="items1"> <a href="#"> <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt="" class="img1"> <p class="name2">小米11 Ultra</p> <p class="desc2">1/1.12''GN2｜2K四微曲屏</p> <p class="price2">5499元 <del>5999元</del></p> </a> </div> <div class="items1"> <a href="#"> <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt="" class="img1"> <p class="name2">小米11 Ultra</p> <p class="desc2">1/1.12''GN2｜2K四微曲屏</p> <p class="price2">5499元 <del>5999元</del></p> </a> </div> <div class="items-last"> <div></div> <div></div> </div> </div> </div> </div> <div class="big-img"> <a href="#"> <img src="images/c3b86ede4dd31d7c126d56fbdde4f855.jpg" alt=""> </a> </div> <!-- 家电结束--> <!--视频开始--> <div class="video"> <h3 class="title">视频</h3> <div class="video-box"> <div></div> <div></div> <div></div> <div></div> </div> </div> <!-- 视频结束--> </div> </div> <!-- 主题结束-->
视频顶头le？
老师为啥就能一下子把几行代码包进<a>里，看着很丝滑；翻译件提供的快捷提示我没有，怎么安装啊
请问 标记等于标签吗 谢谢
非常抱歉给您带来不好的体验！为了更深入的了解您的学习情况以及遇到的问题，您可以直接拨打投诉热线：
我们将在第一时间处理好您的问题！
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护：百战汇智（北京）科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证：京B2-20212637
京公网安备 11011402011233号