ul标签可以和ol互相嵌套吗?
不用了不用了，选择器上打错了
代码和视频的是一样的，咋就出不来？
用谷歌调试工具的话也不会动
<style> div>h3{ color:red;} </style> <body> <div> <h3>这是一个标题</h3> <p> <h3>这是一个标题</h3> </p> </div> </body>
为什么子代选择器下面p标签里孙子级的h3也会被选中呢？
1、电脑端
2、手机端
注意：
1、手机<768, 平板 >768 <992 , 小屏幕 >992 <1240，大屏幕 >1240
2、浮动造成的影响：父级元素坍塌、同级块元素显示错误
实操要点：
1、图像定位：通过给父级容器设置相对定位，给照片设置绝对定位改变图像位置
2、图像旋转：通过设置transform:rotate(10deg)；来设置旋转角度
实操要点
1、想要达到每4个div之后，消除第4个的边距效果，使其在一行显示：
ul li:nth-child(4n) {
margin-right: 0px;
}
2、想要让元素居中摆放，textalign=center；这个属性要注意位置，要放在整体的容器（display=block）里面
3、图片上定位文字：首先要把父级元素定位设为相对顶位，随后就可以把文字设为绝对定位，覆盖在本来的父级元素上面；
这个实战中，可以直接使用后代选择器效果是一样的：
.nav ul li:hover .list-div{
display: block;
老师，我对这个三角形提醒的绘制还是有点看不懂
嗷嗷刚刚代码那个p标签写在div外面了，现在解决了，用两种方式清楚浮动都可以了
<style>
*{
margin: 0;
padding: 0;
.nav{
width: 100%;
height: 68px;
background-color: rgba(0,0,0,.85);
.nav ul {
list-style: none;
margin-left: 300px;
line-height: 68px;
/* overflow: hidden; */
.nav ul::after{
content: "";
overflow: hidden;
clear: both;
.nav ul li{
float: left;
padding: 0 20px;
.nav ul li a{
text-decoration: none;
color: white;
.nav ul li a:hover{
color: #ff6700;
p{
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">小米商城</a>
</li>
<a href="#">小米影像</a>
<a href="#">MIUI</a>
<a href="#">LOT</a>
<a href="#">云服务</a>
<a href="#">天星科技</a>
<a href="#">有品</a>
<a href="#">小爱开放平台</a>
<a href="#">企业团购</a>
</ul>
<p>testtest</p>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
display: inline;
</html>
老师为啥这个结果不用清除浮动，也可以p标签在下面？
<style> .container { position: relative; width: 900px; height: 600px; background-color: pink; margin: 0 auto; } .container img { position: absolute; width: 170px; border: 10px solid #f1f1f1; } .img1 { top: 0; left: 360px; transform: rotate(10deg); } .img2 { top: 100px; left: 100px; transform: rotate(-50deg); } .img3 { top: 200px; right: 100px; transform: rotate(55deg); } .img4 { top: 400px; left: 360px; transform: rotate(30deg); } </style> </head> <body> <div class="container"> <img src="./img/1.jpeg" class="img1"> <img src="./img/2.jpeg" class="img2"> <img src="./img/3.jpeg" class="img3"> <img src="./img/4.jpeg" class="img4"> </div>
<style> * { margin: 0; padding: 0; } body { background-color: aliceblue; } .container { width: 1080px; margin: 0 auto; } .container ul { overflow: hidden; clear: both; } .container ul li { position: relative; float: left; list-style: none; background-color: #fff; margin: 10px 9px 0 0; width: 260px; height: 375px; } .container ul li:nth-child(4n) { margin-right: 0; } .container ul li a { display: block; width: 100%; height: 100%; text-align: center; text-decoration: none; padding-top: 20px; } img { width: 250px; height: 230px; } .container ul li a .text { width: 100%; margin-top: 20px; } .text .name { display: block; color: #333; font-size: 16px; margin-bottom: 3px; } .text .desc { display: block; color: #999; font-size: 15px; } .text .price i { font-style: normal; font-size: 17px; color: red; } .text .price { display: inline-block; color: red; font-size: 22px; /* padding-left: 14px; */ } .text .price em { font-size: 16px; font-style: normal; } .prodect-sign { position: absolute; top: 15px; left: 20px; display: block; width: 55px; height: 55px; background-color: pink; border-radius: 60%; line-height: 55px; color: #fff; font-size: 16px; } </style> </head> <body> <div class="container"> <ul> <li> <a href="#"> <img src="./img/1.webp" alt=""> <div class="text"> <span class="name">小米 11Pro</span> <span class="desc">限时优惠,抢购吧</span> <span class="price"><i>￥</i>1999<em>起</em></span> </div> <span class="prodect-sign">免息</span> </a> </li> <li> <a href="#"> <img src="./img/2.png" alt=""> <div class="text"> <span class="name">小米 12Pro</span> <span class="desc">限时优惠,抢购吧</span> <span class="price"><i>￥</i>2999<em>起</em></span> </div> <span class="prodect-sign">免息</span> </a> </li> <li> <a href="#"> <img src="./img/1.webp" alt=""> <div class="text"> <span class="name">小米 11U</span> <span class="desc">限时优惠,抢购吧</span> <span class="price"><i>￥</i>2222<em>起</em></span> </div> <span class="prodect-sign">免息</span> </a> </li> <li> <a href="#"> <img src="./img/2.png" alt=""> <div class="text"> <span class="name">小米 12U</span> <span class="desc">限时优惠,抢购吧</span> <span class="price"><i>￥</i>3333<em>起</em></span> </div> <span class="prodect-sign">免息</span> </a> </li> </ul> </div> </body>
偷懒用老师写的尺寸，但是看着好大啊，对于类名还是不会起名字，不会管理
<style> * { margin: 0; padding: 0; } .nav { width: 100%; height: 60px; position: relative; text-align: center; } .nav ul { overflow: hidden; clear: both; } .nav ul li { list-style: none; float: left; padding: 25px 30px; } .nav ul li a { color: #333; text-decoration: none; font-size: 25px; } .nav-list { width: 100%; height: 300px; position: absolute; left: 0; display: none; } .nav li:hover>.nav-list { display: block; } .nav li:hover>a { color: blue; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="#">首页</a> <div class="nav-list" style="background-color:pink";></div> </li> <li> <a href="#">手机</a> <div class="nav-list" style="background-color:skyblue";></div> </li> <li> <a href="#">平板</a> <div class="nav-list" style="background-color:pink";></div> </li> <li> <a href="#">配件</a> <div class="nav-list" style="background-color:skyblue";></div> </li> <li> <a href="#">服务器</a> <div class="nav-list" style="background-color:pink";></div> </li> <li> <a href="#">下载</a> <div class="nav-list" style="background-color:skyblue";></div> </li> </ul> </div>
非常抱歉给您带来不好的体验！为了更深入的了解您的学习情况以及遇到的问题，您可以直接拨打投诉热线：
我们将在第一时间处理好您的问题！
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护：百战汇智（北京）科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证：京B2-20212637
京公网安备 11011402011233号