.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、图片上定位文字：首先要把父级元素定位设为相对顶位，随后就可以把文字设为绝对定位，覆盖在本来的父级元素上面；
小米官方.zip
在黑色导航的左侧栏中的，当鼠标滑动到“下载app”该内容时，三角形并未显示出来。
在作业3中产生疑问：当我把第二、第三两个form注释掉时，运行效果一样，那我是否可以只写第一个form，这样更简洁？
一、没注释前
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业3</title> </head> <body> <table border="1" width="600" height="100" align="center" cellspacing="0"cellpadding="1"> <tr> <td align="right">用户名：</td> <td align="center"> <form action="ok.html" name="form1"> <input type="text"> </form> </td> </tr> <tr> <td align="right">密码：</td> <td align="center"> <form action="ok.html" name="form2"> <input type="password" name="password"> </form> </td> </tr> <tr> <td align="right">性别：</td> <td align="center"> <form action="ok.html" name="form3"> <input type="radio" name="sex" checked> <lable for="man">男</lable> <input type="radio" name="sex"> <lable for="woman">女</lable> </form> </td> </tr> </table> </body> </html>
二、注释后
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业3疑问</title> </head> <body> <table border="1" width="600" height="100" align="center" cellspacing="0"cellpadding="1"> <tr> <td align="right">用户名：</td> <td align="center"> <form action="ok.html" name="form1"> <input type="text"> </form> </td> </tr> <tr> <td align="right">密码：</td> <td align="center"> <!-- <form action="ok.html" name="form2">--> <input type="password" name="password"> <!-- </form>--> </td> </tr> <tr> <td align="right">性别：</td> <td align="center"> <!-- <form action="ok.html" name="form3">--> <input type="radio" name="sex" checked> <lable for="man">男</lable> <input type="radio" name="sex"> <lable for="woman">女</lable> <!-- </form>--> </td> </tr> </table> </body> </html>
效果一
效果二
老师为什么设置了浮动，margin:0px auto;就不生效
老师，我想请问在div嵌套中，我设置外部盒子由内部盒子内容撑开，然后把内部盒子设为行内块元素，为什么没有实现封口的效果呢？
如果我用嵌套来设计一个相框，可以这么设计吗
非常抱歉给您带来不好的体验！为了更深入的了解您的学习情况以及遇到的问题，您可以直接拨打投诉热线：
我们将在第一时间处理好您的问题！
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护：百战汇智（北京）科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证：京B2-20212637
京公网安备 11011402011233号