<div class="box1"></div>
<div class="box2"></div>
<style>
.box1{
width:100px;
height:100px;
background-color:blue;
float:left;
}
.box2{
width:200px;
height:200px;
background-color;
</style>
你好老师，div标签是块级元素自上而下垂直摆放，代码编写两个div盒子自上而下摆放，当给上面的小盒子添加向左浮动后为什么下面的大盒子自动跑到上面去了，直接占据了第一个盒子的空间位置？这是什么原因呢
那我是要压缩文件吗、？
总是感觉很奇怪不用定位白色导航那里总是把我的li 标签挤得页面很乱是哪里出问题了吗
/* 黑色导航开始 */ .black-nav{ width: 100%; height: 40px; background-color: #333; line-height: 40px; } .wrap{ width: 1226px; margin: 0 auto; /* position: relative; */ } .left-nav{ float: left; } .right-nav{ float: right; } .black-nav li{ float: left; position: relative; } .black-nav a{ color: #b0b0b0; font-size: 12px; } .black-nav span{ color: #424242; margin: 0 3.6px; } .black-nav a:hover{ color: #fff; } .download{ width: 124px; height: 0; background-color: #fff; position:absolute; top: 40px; left: -50%; display: none; box-shadow: 0 1px 5px #333 ; transition: all 0.5s; /* margin-left: -62px; */ } .download img{ width: 90px; margin: 18px auto 0; } .left-nav li:hover>.download{ height: 148px; display: block; } .download p{ color: #424242; font-size: 14px; line-height: 14px; } .triangle{ width: 0; height: 0; border-bottom: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; position: absolute; bottom: 0px; right: 50%; margin-left: -8px; display: none; } .left-nav li:hover>.triangle{ display: block; } .cart{ width: 120px; height: 40px; background: #424242; margin-left: 20px; } .cart span{ color: #b0b0b0; } .cart:hover{ background: #fff; } .cart:hover>a{ color: #ff6700; } .cart i{ font-style: normal; padding-left: 5px; position: relative; } .cart-1{ width: 320px; height: 0px; position: absolute; top: 40px; right: 0; box-shadow: 0 1px 5px rgba(0,0,0,0.2); transition: all 0.5s; line-height: 100px; } .cart:hover>.cart-1{ height: 100px; } /* 黑色导航结束 */ /* 白色导航开始 */ .withe-nav{ width: 100%; height: 100px; background: #fff; position: relative; clear: both; line-height: 100px; } .logo{ float: left; } .white-left-nav{ width: 850px; float: left; } .white-right-nav{ width: 296px; float: right; } .logo{ width: 56px; height: 56px; margin-top: 22.5px; } .logo img{ width: 56px; height: 56px; left: 0; } .white-left-nav li{ padding: 5px 0 0 30px; float: left; box-sizing: border-box; } .white-left-nav li a{ color: #333; font-size: 16px; } .white-left-nav>ul>li>a:hover{ color: #ff6700; } .white-left-nav ul{ margin-left: 113px; } .white-right-nav input{ width: 244px; height: 50px; line-height: 50px; padding: 0 10px; font-size: 14px; box-sizing: border-box; border: 1px solid #e0e0e0; margin-top: 25px; } .white-right-nav button{ width: 52px; height: 50px; font-size: 24px; line-height: 50px; background-color: #fff; color: #616161; box-sizing: border-box; border: 1px solid #e0e0e0; border-left: 0; margin-top: 25px; float: right; } .white-right-nav button:hover{ background-color: #ff6700; color: #fff; } .item{ width: 100%; height: 229px; position: absolute; top: 100px; left: 0; } /* 白色导航结束 */
<!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="./iconfont.css"> <link rel="stylesheet" href="./rests.css"> <link rel="stylesheet" href="./mi.css"> </head> <body> <!-- 黑色导航开始 --> <div class="black-nav"> <div class="wrap"> <ul class="left-nav"> <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="./image/download.png" alt=""> <p>小米商城App</p> </div> <!-- 三角形 --> <div class="triangle"></div> </li> <li><a href="#">智能生活</a><span>|</span></li> <li><a href="#">Select</a></li> </ul> <ul class="right-nav"> <li><a href="">登陆</a><span>|</span></li> <li><a href="">注册</a><span>|</span></li> <li><a href="">消息通知</a></li> <li class="cart"> <a href="#"> <i class="iconfont"></i> <i>购物车</i> </a> <div class="cart-1">还没有东西</div> </li> </ul> </div> </div> <!-- 黑色导航结束 --> <!-- 白色导航开始 --> <div class="withe-nav"> <div class="wrap"> <div class="logo"> <img src="./image/logo-mi2.png" alt=""> </div> <div class="white-left-nav"> <ul> <li> <a href="#">小米手机</a> <div class="item"> <div class="wrap"> <ul> <li> <a href="#"> <div><img src="./image/item.webp" alt=""</div> <p>小米pro</p> <p>5200元</p> </a> </li> <li> <a href="#"> <div><img src="./image/item.webp" alt=""</div> <p>小米pro</p> <p>5200元</p> </a> </li> <li> <a href="#"> <div><img src="./image/item.webp" alt=""</div> <p>小米pro</p> <p>5200元</p> </a> </li> <li> <a href="#"> <div><img src="./image/item.webp" alt=""</div> <p>小米pro</p> <p>5200元</p> </a> </li> <li> <a href="#"> <div><img src="./image/item.webp" alt=""</div> <p>小米pro</p> <p>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> <li> <a href="#">社区</a> </li> </ul> </div> <div class="white-right-nav"> <input type="text" placeholder="洗衣机"> <button>^</button> </div> </div> </div> <!-- 白色导航结束 --> </body> </html>
下图有疑问，相对定位应该是以自身为基准进行平移吧
1.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>webxiaode的网页</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-nov"> <div class="wrop"> <ul class="black-nov-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></li> <li><a href="#">SelectLocation</a></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="#"> <span class="iconfont"></span>购物车（0）</a> <div class="cart-list">购物车中还没有商品，赶紧选购吧！</div> </li> </ul> </div> </div> <!-- 黑色导航部分结束 --> </body> </html> 2.css样式 * { margin: 0; padding: 0; } /*头部样式开始*/ .header { width: 100%; height: 120px; overflow: hidden; position: relative; } .header img { height: 120px; position: absolute; left: 50%; transform: translateX(-50%); } /*头部样式结束*/ /*黑色导航开始*/ .black-nov { width: 100%; height: 40px; line-height: 40px; /*行高为40px*/ background-color: #333; font-size: 12px; /*设置字体大小*/ }/*导航部分*/ .wrop { width: 1226px; margin: 0 auto; } .black-nov-left { float: left; } .black-nov-right { float: right; } .black-nov li { float: left; /*字体浮动居左*/ position: relative; /*相对定位*/ } .black-nov a { color: #b0b0b0; } .black-nov span { color: #424242; margin: 0 3.6px; } .download { width: 124px; height: 0; background: #fff; box-shadow: 0 1px 5px #aaa; position: absolute; /*绝对定位*/ top: 40px; left: 50%; margin-left: -62px; overflow: hidden; /*消除浮动*/ transition: all 0.3s; /*过渡所有属性*/ } .download img { width: 90px; margin: 18px auto 0; } .download p { color: #333; font-size: 14px; line-height: 14px; } .black-nov-left li:hover > .download { height: 148px; } .stri { width: 0; height: 0; border-bottom: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; position: absolute; /*绝对定位*/ bottom: 0; left: -50%; /*左右居中*/ margin-left: 46px; display: none; /*默认没有*/ } .black-nov-left li:hover > .stri { display: block; } /*让它出现*/ .cart { width: 120px; 高度： 40px; margin-left: 25px; background: #424242; position: relative; } .cart span{ color: #b0b0b0; } .cart:hover { background: #fff; } .cart a:hover{ color: #ff6700; } .cart-list { width: 316px; height: 0; background: #fff; box-shadow: 0 2px 10px rgb(0, 0, 0,0.15); position: absolute; /*绝对定位*/ top: 40px; right: 0; 颜色 ： #424242; overflow: hidden; /*消除浮动*/ transition: all 0.3s; /*过渡所有属性*/ 行高：100px; } .cart:hover>.cart-list{ 高度： 100px; } /*黑色导航结束*/ 问题：左边导航和右边导航连接在一起了，怎么解决啊
.left ul li span{ float: right; } 为什么不用居右？这样出来的效果也一样的呀
<i class="one"></i> i 是属于什么标签？
缺点的话对分辨率大的显示器有影响会使图片模糊失真，用做图标不可取，使用矢量图标更加友好
你好，老师我测试下 元素后面必须加空格 再加：.not() 选择器才能实现功能，而其他的伪类选择器不用加空格直接跟着写就可以，这是为什么呢
<!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> .box{ width: 50px; height: 50px; background-color: cornflowerblue; font-size: 12px; animation: Rotating 5s linear 1; } @keyframes Rotating { 0%{ } 25%{ transform: rotate(90deg); } 50%{ transform: translateX(300px); } 75%{ background-color: #ff5500; } 100%{ transform: translateX(0); } } </style> </head> <body> <div class="box">一个盒子宽高都是50</div> </body> </html>
为什么我旋转了，移动的时候它又转回去了。
<!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> ol > li { color: red; } </style> </head> <body> <ol> <li>合肥</li> <li>淮北 <ol> <li>相山区</li> <li>濉溪县</li> <li>烈山区</li> </ol> </li> <li>巢湖</li> </ol> </body> </html>
你好，老师。我这个子代选择器的书写li标签里嵌套的ol li标签为什么也生效了，能帮忙看看哪里出了问题吗
你好老师，用html构建表格给table一个border属性外边框和单元格都会自动显示边框，而用css来加样式的时候，必须table 和td同时给一个border属性，这样外边框和单元格才会都有边框
你好老师，css的表格属性里折叠边框border-collapse属性是不是相当于表格属性里的callspacing padding属性相当于callpadding
非常抱歉给您带来不好的体验！为了更深入的了解您的学习情况以及遇到的问题，您可以直接拨打投诉热线：
我们将在第一时间处理好您的问题！
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护：百战汇智（北京）科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证：京B2-20212637
你好，老师。我这个子代选择器的书写li标签里嵌套的ol li标签为什么也生效了，能帮忙看看哪里出了问题吗
京公网安备 11011402011233号