为什么我这样设置了也不能换行，不管作用的为什么。。。
<head> <meta charset="UTF-8"> <title>Title</title> <style> .white-nav{ width: 100%; height: 100px; background-color: skyblue; } .logo{ width: 55px; height: 55px; background-color: #ff6700; float: left; margin-top: 22.5px; } </style> </head> <body> <div> <div class="white-nav"> <div class="logo"></div> <div class="nav-bar"></div> <div class="search"></div> </div> </div>
老师这里为什么要给.logo加浮动呢，如果不加呢
老师，我对这个三角形提醒的绘制还是有点看不懂
快捷键 1. 输入 div#root 得到 <div id="root"></div>
2.输入 div.root 得到 <div class="root"></div>
3.输入 div#root+div.root 得到 <div id="root"></div><div class="root"></div>
index.html创建完成后，直接输入英文状态下的 ! 回车即可得到初始代码
老师，一张图片上要呈现出文字，该怎么弄？类似这种。
<body> <figure> <img src="1.jpg" alt=""> <figcaption>这是一个美丽的小姐姐</figcaption> </figure> <details open> <summary>我是标题</summary> <div> <p>我不是标题</p> </div> </details> </body> </html>
details 老师在写summary时呈现出详情两个字，下面打开才是（我是标题）。可我的操作里跟老师的不一样，我的直接是（我是标题），是为啥？
<!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、理想图：
非常抱歉给您带来不好的体验！为了更深入的了解您的学习情况以及遇到的问题，您可以直接拨打投诉热线：
我们将在第一时间处理好您的问题！
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护：百战汇智（北京）科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证：京B2-20212637
有问题
京公网安备 11011402011233号