缺点的话对分辨率大的显示器有影响会使图片模糊失真,用做图标不可取,使用矢量图标更加友好
你好,老师我测试下 元素后面必须加空格 再加:.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
你好,表格属性里的表格边框border属性table,td{border:1px solid black }里面的solid black 什么意思啊,视频中直接就书写也不对其进行解释
老师,一张图片上要呈现出文字,该怎么弄?类似这种。
<!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> <link rel="stylesheet" href="./iconfont.css"> <style> *{ margin: 0; padding: 0; } body{ background-color: #f1f1f1; } .slide{ width: 234px; height: 420px; background-color: rgba(105,101,101,0.6); padding: 20px 0; margin: 100px; position: relative; } .slide ul{ list-style: none; } .slide ul li{ width: 100%; height: 42px; line-height: 42px; text-align: left; padding-left: 30px; box-sizing: border-box; } .slide ul li:hover{ background-color: #ff6700; } .slide ul li a{ display: inline-block; text-decoration: none; color: #fff; } .slide .iconfont{ display: inline-block; font-size: 24px; color: #fff; position: absolute; right: 10px; } .slide-list{ width: 992px; height: 460px; background-color: #fff; position: absolute; top: 0; left: 234px; border: 1px solid #e0e0e0; border-left:none ; box-sizing: border-box; box-shadow: 0 4px 16px rgba(0,0,0,0.18); display: none; overflow: hidden; clear: both; } /* 鼠标滑动到li标签上,对应的div出现 */ .slide ul li:hover>.slide-list{ display: block; } .slide-list .text{ display: block; width: 208px; height: 70px; line-height: 70px; /* background-color: red; */ float: left; margin-left: 30px; margin-top: 7px; font-size:normal; } .slide-list .text:hover>i{ color: #ff6700; } .slide-list .text img{ display: inline-block; /* 垂直对齐方式 */ vertical-align: middle; } .slide-list .text i{ font-size:normal; display: inline-block; color:black; font-size: 16px; } </style> </head> <body> <div class="slide"> <ul> <li> <a href="#">手机</a> <span class="iconfont icon-jiantou"></span> <div class="slide-list"> <a class="text" href="#"> <img src="./Redmi K50 Pro.webp" > <i>Redmi K50 Pro</i> </a> <a class="text" href="#"> <img src="./Xiaomi 12X.webp" alt=""> <i>Xiaomi 12X</i> </a> <a class="text" href="#"> <img src="./Xiaomi Civi.webp" alt=""> <i>Xiaomi Civi</i> </a> <a class="text" href="#"> <img src="./Xiaomi 10S.webp" alt=""> <i>Xiaomi 10S</i> </a> <a class="text" href="#"> <img src="./Redmi K50 Pro.webp" alt=""> <i>Redmi K50</i> </a> <a class="text" href="#"> <img src="./Redmi K50 Pro.webp" > <i>Redmi K50 Pro</i> </a> <a class="text" href="#"> <img src="./Xiaomi 12X.webp" alt=""> <i>Xiaomi 12X</i> </a> <a class="text" href="#"> <img src="./Xiaomi Civi.webp" alt=""> <i>Xiaomi Civi</i> </a> <a class="text" href="#"> <img src="./Xiaomi 10S.webp" alt=""> <i>Xiaomi 10S</i> </a> <a class="text" href="#"> <img src="./Redmi K50 Pro.webp" alt=""> <i>Redmi K50</i> </a> <a class="text" href="#"> <img src="./Redmi K50 Pro.webp" > <i>Redmi K50 Pro</i> </a> <a class="text" href="#"> <img src="./Xiaomi 12X.webp" alt=""> <i>Xiaomi 12X</i> </a> <a class="text" href="#"> <img src="./Xiaomi Civi.webp" alt=""> <i>Xiaomi Civi</i> </a> <a class="text" href="#"> <img src="./Xiaomi 10S.webp" alt=""> <i>Xiaomi 10S</i> </a> <a class="text" href="#"> <img src="./Redmi K50 Pro.webp" alt=""> <i>Redmi K50</i> </a> <a class="text" href="#"> <img src="./Redmi K50 Pro.webp" > <i>Redmi K50 Pro</i> </a> <a class="text" href="#"> <img src="./Xiaomi 12X.webp" alt=""> <i>Xiaomi 12X</i> </a> <a class="text" href="#"> <img src="./Xiaomi Civi.webp" alt=""> <i>Xiaomi Civi</i> </a> <a class="text" href="#"> <img src="./Xiaomi 10S.webp" alt=""> <i>Xiaomi 10S</i> </a> <a class="text" href="#"> <img src="./Redmi K50 Pro.webp" alt=""> <i>Redmi K50</i> </a> <a class="text" href="#"> <img src="./Redmi K50 Pro.webp" > <i>Redmi K50 Pro</i> </a> <a class="text" href="#"> <img src="./Xiaomi 12X.webp" alt=""> <i>Xiaomi 12X</i> </a> <a class="text" href="#"> <img src="./Xiaomi Civi.webp" alt=""> <i>Xiaomi Civi</i> </a> <a class="text" href="#"> <img src="./Xiaomi 10S.webp" alt=""> <i>Xiaomi 10S</i> </a> <a class="text" href="#"> <img src="./Redmi K50 Pro.webp" alt=""> <i>Redmi K50</i> </a> <a class="text" href="#"> <img src="./Redmi K50 Pro.webp" > <i>Redmi K50 Pro</i> </a> <a class="text" href="#"> <img src="./Xiaomi 12X.webp" alt=""> <i>Xiaomi 12X</i> </a> <a class="text" href="#"> <img src="./Xiaomi Civi.webp" alt=""> <i>Xiaomi Civi</i> </a> <a class="text" href="#"> <img src="./Xiaomi 10S.webp" alt=""> <i>Xiaomi 10S</i> </a> </div> </li> <li> <a href="#">电视</a> <span class="iconfont icon-jiantou"></span> <div class="slide-list">小米2</div> </li> </ul> </div> </body> </html>
为什么这个字体我设置的normal但是还是斜体
你好,老师 option和input标签里面必须书写value属性吗?书写和不书写的区别又是什么呢?
为什么submit和reset属性后面不需要添加name
input的name属性是不是随便给一个值都行,只要给取个名字就可以,还是讲name属性的属性值必须是有要求的
你好,老师。form标签里书写的内容是不是不会自动换行
自定义列表能不能用无序列表里嵌套无序列表来实现呢
超链接href属性 跳转网站地址前面一定要加https://吗
非常抱歉给您带来不好的体验!为了更深入的了解您的学习情况以及遇到的问题,您可以直接拨打投诉热线:
我们将在第一时间处理好您的问题!
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护:百战汇智(北京)科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证:京B2-20212637