小米.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嵌套中,我设置外部盒子由内部盒子内容撑开,然后把内部盒子设为行内块元素,为什么没有实现封口的效果呢?
如果我用嵌套来设计一个相框,可以这么设计吗
为什么图片不能并排
米课项目 (4).zip
2022-02-15 (2).png
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { /*p默认有16px的上下外边距*/ margin: 0px; } .box{ width:1260px; height:780px; position:relative; } /* 合并选择器*/ .box1,.box2 { width:303px; height:375px; background-color: red; position:relative; float: left; margin:12px 0px 0px 12px; /*position:static;使用静态定位,就相对浏览页面*/ } img{ width:100%; } .text1{ width:303px; height:88px; position:absolute; left:0px; bottom:20px; text-align:center; } .name1{ color: #fff; font-size: 21px; font-weight: 700; } .desc1{ color:#fff; font-size:14px; } .price1{ color: #ebce6b; font-size: 24px; font-weight: 700; } .box2{ background-color: whitesmoke; } .box2 img{ width:100%; } .text2{ width:303px; height:88px; position:absolute; left:0px; bottom:20px; text-align:center; } .name2{ color: #333; font-size: 16px; } .desc2{ color:#999; font-size: 14px; } .price2{ color: #ebce6b; font-size: 24px; font-weight: 700; } .box2 span{ color:#cc0000; font-size: 14px; } .box2 .number{ color:#cc0000; font-size: 22px; } s{ color:gray; font-size: 14px; } </style> </head> <body> <div class="box"> <div class="box1"> <img src="images/1.jpg" alt=""> <div class="text1"> <p class="name1">魅族 EP3C 耳机</p> <p class="desc1">【限时特惠99元】</p> <p class="price1">¥129</p> </div> </a> </div> <div class=" box2"> <img src="images/2.png" alt=""> <div class="text2 "> <p class="name2">魅族 POP Pro 主动降噪耳机</p> <p class="desc2">三重混合主动降噪技术 | 三麦克风智能通话降噪</p> <p class="price2"><span>¥</span><span class="number">499</span></p> </div> </a> </div> <div class=" box2"> <img src="images/3.png" alt=""> <div class="text2 "> <p class="name2">魅族 POP2s 真无线耳机</p> <p class="desc2">【限时6期免息】好声音标杆 | Flyme 妙连</p> <p class="price2"><span>¥</span><span class="number">299</span></p> </div> </a> </div> <div class=" box2"> <img src="images/4.png" alt=""> <div class="text2 "> <p class="name2">魅族 HIFI 解码耳放</p> <p class="desc2">【年货节特惠价149元】</p> <p class="price2"><span>¥</span><span class="number">169</span></p> </div> </a> </div> <div class=" box2"> <img src="images/5.jpg" alt=""> <div class="text2 "> <p class="name1">魅族 HD60 头戴式蓝牙耳机</p> <p class="desc1">【年货节特惠价349元+12期免息】</p> <p class="price1">¥499</p> </div> </a> </div> <div class=" box2"> <img src="images/6.png" alt=""> <div class="text2 "> <p class="name2">魅族 HD60 降噪耳机</p> <p class="desc2">【年货节特惠价799元+12期免息】</p> <p class="price2"><span>¥</span><span class="number">1099</span></p> </div> </a> </div> <div class=" box2"> <img src="images/7.png" alt=""> <div class="text2 "> <p class="name2">魅族 EP63NC 无线降噪耳机</p> <p class="desc2">【年货节特惠价249元+6期免息】</p> <p class="price2"><span>¥</span><span class="number">249</span><s>¥499</s></p> </div> </a> </div> <div class=" box2"> <img src="images/8.png" alt=""> <div class="text2 "> <p class="name2">魅族 POP Pro 主动降噪耳机</p> <p class="desc2">【年货节特惠价149元】</p> <p class="price2"><span>¥</span><span class="number">149</span><s>¥169</s></p> </div> </a> </div> </div> </body> </html>
老师,我想实现图片居中,该怎么弄,现在的效果图全部靠左,我想两边空白地方一样多
右边红色的地方太多了,如何左右均匀分布
<!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>Margin布局</title> <style> .box{ width: 100%; height: 1155px; background-color: aqua; } .wrap{ width: 1240px; height: 1150px; background-color: red; /* (父元素宽度-子元素宽度)/2 */ margin: 0 auto; } .wrap>div{ width: 303px; height: 375px; background-color: seagreen; float: left; margin-top: 10px; margin-right: 9px; } .four{ background-color: pink; } </style> </head> <body> <div class="box"> <div class="wrap"> <div></div> <div></div> <div></div> <div class="four"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> </html>
老师我想请问一下在这个布局下我想测试第四个测试是否被挤下一行的第一个,但是在内联样式设置第四个div背景为粉红色为什么没有显示出来呢?
微信图片_20221129182817.jpg
微信图片_20221129182755.jpg
小米官网项目.zip
为什么我的鼠标移动到标签上面下面出来的div会一直闪烁看不清还有我一直都不能把手机图标移动在盒子里排成一列
非常抱歉给您带来不好的体验!为了更深入的了解您的学习情况以及遇到的问题,您可以直接拨打投诉热线:
我们将在第一时间处理好您的问题!
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护:百战汇智(北京)科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证:京B2-20212637