<!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="reset.css"> <style> .wrapper{ width:600px; height:600px; position:relative; } .content{ width:300px; height:300px; } .items{position: relative;} .items img{ width:300px; height:300px; position:absolute; } .circle li{ width:10px; height:10px; border-radius:50%; background-color: chocolate; float:left; margin: 0 6px; } .circle{position:absolute;right:160px; bottom:320px;} .prev{ position:absolute; left:180px; top:200px; width:40px; height:60px; background: url("image/6.png"); background-size: 40px; background-repeat: no-repeat; } .next{ position:absolute; right:180px; top:200px; width:40px; height:60px; background: url("image/7.png"); background-size: 40px; background-repeat: no-repeat; } </style> </head> <body> <div class="wrapper"> <div class="content"> <div class="items"><img src="image/luo1.jpg" alt=""></div> <div class="items"><img src="image/luo6.jpg" alt=""></div> <div class="items"><img src="image/luo3.jpg" alt=""></div> <div class="items"> <img src="image/luo4.jpg" alt=""></div> <div class="items"><img src="image/luo5.jpg" alt=""></div> <div class="items"> <img src="image/luo3.jpg" alt=""></div> </div> <ul class="circle"> <li id="pic1"></li> <li id="pic2"></li> <li id="pic3"></li> <li id="pic4"></li> <li id="pic5"></li> <li id="pic6"></li> </ul> <!-- 图片左右方来回滚动图片的左右箭头--> <a href=" " class=" prev"></a> <a href="#" class=" next"></a> </div> </body> </html>
老师，我这里content没有设置居中，图片应该在最左侧，这里怎么显示在这个位置？
.btn 的margin-top是10.5应该是（66-（43+1+1））÷2算出来的吧，视频说得有问题
<!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; } /* 鼠标滑动到li标签上，让slide-list的div显示 */ .slide ul li:hover>.slide-list{ display: block; } </style> </head> <body> <div class="slide"> <ul> <li> <a href="#">手机</a> <span class="iconfont icon-ico_listarrow"></span> <div class="slide-list">小米1</div> </li> <li> <a href="#">电视</a> <span class="iconfont icon-ico_listarrow"></span> <div class="slide-list">小米2</div> </li> </ul> </div> </body> </html> 老师，你好！这段代码里的 a标签和span标签为什么要设置成行内块级元素呢
这个实战中，可以直接使用后代选择器效果是一样的：
.nav ul li:hover .list-div{
display: block;
}
.header img{ height: 120px; position: absolute; left: 50%; transform: translateX(-50%); }
老师，我没明白这里图片居中使用的属性left和transform，不懂为什么这样写
如果不去写box-sizing:content-box:是不是默认为标准盒模型？
body部分
<div class="container"> <div class="wrap"> <div class="logo"> <img src="images/logo-mi2.png" alt=""> </div> <div class="nav-bar"> <ul> <li class="first">无无无无无</li> <li><a href="#">Xiaomi手机</a></li> <li><a href="#">Redmi 红米</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="search"> <input type="text" placeholder="洗衣机"> <button class="iconfont"></button> <div class="mini-search"> <ul> <li><a href="#">全部</a></li> <li><a href="#">手机</a></li> <li><a href="#">小米平板5</a></li> <li><a href="#">空调</a></li> <li><a href="#">耳机</a></li> <li><a href="#">黑鲨4S</a></li> <li><a href="#">电视</a></li> <li><a href="#">加湿器</a></li> </ul> </div> </div> </div> </div>
css部分
a{ text-decoration: none; color: #b0b0b0; text-align: center; } .wrap{ width: 1226px; margin: 0 auto; } .container{ width: 100%; height: 100px; color: peru; position: relative; } .logo{ width: 55px; height: 55px; margin-top: 22.5px; position: relative; overflow: hidden; float: left; } .logo img{ width: 100%; height: 100%; position: absolute; top: 0; } .nav-bar{ width: 873px; height: 100px; box-sizing: border-box; padding: 12px 0 0 30px; float: left; } .nav-bar .first{ width: 127px; padding-right: 15px; color: #fff; line-height: 100px; } .nav-bar li{ float: left; } .nav-bar a:not(.first){ color: #333333; font-size: 16px; display: block; padding: 41px 10px 38px; } .search{ width: 297px; height: 100px; position: relative; float: left; } .search>input{ width: 223px; height: 48px; border: 1px solid #e0e0e0; padding: 0 10px; outline: none; float: left; margin-top: 25px; transition: all .2s; } .search>button{ width: 52px; height: 50px; border: 1px solid #e0e0e0; border-left: none; padding: 1px 4px; margin-top: 25px; background-color: #fff; float: left; } .search>input:focus,.search>input:focus+button { border-color: #ff6700; } .search>input:hover,.search>input:hover+button{ border-color: #b0b0b0; } .search>button:hover { background-color: #ff6700; border-color: #ff6700; color: #fff; } .container .mini-search{ width: 243px; height: 240px; background-color: #b0b0b0; border: 1px solid #ff6700; border-top: none; position: absolute; top: 75px; left: 0; display: none; } .container .search>.mini-search ul>li>a{ display: block; width: 243px; height: 30px; color: #424242; font-size: 12px; padding: 6px 15px; } .search>input:focus .mini-search{ display: block; }
为什么图布局是乱的啊救命
浮动元素造成父元素塌陷主要是什么，
问题 ：表单的不完美
a、今天学习了表单 但是效果很是不理想 下面是自己找的表单练习 和效果图的对比
b、问：如何像效果图一样美丽？表单如何对齐？
c、代码区：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="ok.html" align="center"> <p>* 会 员 名 <input type="text"></p> <p>*登录密码<input type="password"></p> <p>*重复密码<input type="password"></p> <p>*联系人姓名<input type="text"></p> <p>*企业名称<input type="text"></p> <p> *贸易身份 <input type="checkbox">我要销售 <input type="checkbox">我要采购 <input type="checkbox">两者都是 </p> <p> 电话号码 <select name="" id=""> <option value="" selected>中国大陆+86</option> <option value="">hello word</option> <option value="">hello word</option> <input type="text"> </select> </p> </form> </body> </html>
d、效果图：（自己做的效果图展示）
e、理想图：
小米.rar
老师为什么在搜索框哪里我鼠标聚焦的时候，边框颜色不会变成橘色呢
老师我的快捷键好像没用了比如!直接生成，还有生成h1~h6快捷键都没有反应
<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盒子自上而下摆放，当给上面的小盒子添加向左浮动后为什么下面的大盒子自动跑到上面去了，直接占据了第一个盒子的空间位置？这是什么原因呢
<form>
用户名：<input type="text">
密码：<input type="password>
<br>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</form>
这里代码为什么报错了呢
radio那一行可以省去value不写吗？
<!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> /* position */ body{ height: 2000px; } .box{ width: 1000px; height: 800px; background-color: skyblue; margin: 30px; } .one{ width: 300px; height: 300px; background-color: slateblue; position: relative; /* left: 30px; bottom: -50px; */ } .two{ width: 300px; height: 300px; background-color: teal; position: relative; } .one img{ width: 200px; height: 200px; margin: 30px; } span{ position: absolute; left: 30px; top: 30px; } a{ position: fixed; bottom: 10px; left: 10px; width: 100px; height: 100px; background-color: tomato; text-decoration: none ; color: white; } </style></head><body><div class="box"> <div class="one"><img src="images/menu1.png" alt=""><span>lalalala</span></div> <div class="two"></div> <a href="#">返回页面顶部</a></div></body></html>老师为啥我在.one的div中插入一个图片 我图片如果不加外边距会不在.one的div外面 这个img不会跟着父元素的外边距而移动嘛
实操要点
1、想要达到每4个div之后，消除第4个的边距效果，使其在一行显示：
ul li:nth-child(4n) {
margin-right: 0px;
2、想要让元素居中摆放，textalign=center；这个属性要注意位置，要放在整体的容器（display=block）里面
3、图片上定位文字：首先要把父级元素定位设为相对顶位，随后就可以把文字设为绝对定位，覆盖在本来的父级元素上面；
非常抱歉给您带来不好的体验！为了更深入的了解您的学习情况以及遇到的问题，您可以直接拨打投诉热线：
我们将在第一时间处理好您的问题！
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护：百战汇智（北京）科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证：京B2-20212637
有问题
京公网安备 11011402011233号