<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米首页</title> <link rel="icon" href="image/favicon.ico"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/index.css"> </head> <body> <!--头部--> <div class="header"> <img src="image/bb3c06a430689ba2357dd7d1fbfa6bab.jpg" alt=""> </div> <!--黑色导航条--> <div class="header-wrapper"> <div class="topbar-wrapper"> <ul class="topbar-nav"> <li><a href="#">小米商城</a></li> <li><a href="#">MUI</a></li> <li><a href="#">LOT</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> <li><a href="#">下载app</a></li> <li><a href="#">智能生活</a></li> <li><a href="#">Select Location</a></li> </ul> <ul class="inf"> <li><a href="#">登录</a></li> <li><a href="#">注册</a></li> <li><a href="#">消息通知</a></li> </ul> </div> </div> </body> </html> /*头部样式*/ .header{ width:100%; height:120px; background-color:red; overflow:hidden; position:relative; } .header img{ height:120px; position: absolute; left:50%; transform:translateX(-50%); } /*黑色导航条*/ .header-wrapper{ width:100%; height:40px; background-color: #333333; } .topbar-wrapper{ margin:0 auto; } .top-bar{ width:794.13px; height:40px; background-color: #cc0000; float:left; } .topbar-nav li { float: left; } .topbar-nav a{ color:#b0b0b0; font-size:12px ; line-height:40px; margin:10px; } .inf{ width:142.48px; height:40px; background-color: blue; float:left; } .inf li{ float:left; } .inf a{ color:#b0b0b0; font-size:12px ; line-height:40px; }
截图
两个ul是兄弟元素，给他们设置浮动后应该水平排列，这里蓝色部分为什么是这样能呢？
老师，为什么“技术·共享·娱乐”这张图片的高度变高了呢？
<!--第一块开始--> <div class="one box"> <video src="images/201702241034284066.mp4" autoplay loop muted> 您的浏览器不支持视频，请升级！ </video> <div class="text"> <img src="images/video_txt.png" alt=""> <a href="#">下载迅雷产品</a> <i class="iconfont"></i> </div> </div> <!--第一块结束-->
/*第一块样式开始*/ .one{ /*垂直方向溢出部分隐藏 不出现滚动条*/ overflow: hidden; position: relative; } .one>video{ width: 100%; } .text{ width: 716px; height: 193px; position: absolute; /*相对于父元素one往下走50%*/ top: 50%; /*相对于父元素one往右走50%*/ left: 50%; /*往左上走自己宽高的一半*/ transform: translate(-50%,-50%); } .text>img{ width: 100%; } .text>a{ width: 180px; height: 50px; margin: 30px auto 20px; color: #fff; /*z转换为块级元素 样式才会生效*/ display: block; border: 1px solid #fff; /*水平居中 行高等于高*/ line-height: 50px; } .text>a:hover{ background-color: rgba(255,255,255,.5); } .text>i{ font-size: 40px; color: #fff; animation: updown 1s linear infinite; /*转换为块级元素 实现动画*/ display: block; } @keyframes updown{ 0%{ transform: translateY(0); } 33%{ transform: translateY(-3px); } 66%{ transform: translateY(0); } 100%{ transform: translateY(3px); } } /*第一块样式结束*/
f58837161090e2e04bf687088b2ffe77.gif
老师，为什么我的图片在设置“小米手机”这行字的时候就居中了，然后跟着视频中再设置margin-top的时候，就成下图这样了，这是什么问题
小米.rar
.{: %;: ;: ; } .{: ;: ;: ;:} .>{: ;: ;: ;: ;: ;: ;} .>:(){: ;} .{: ;: } {: ;: } 1111
第四个：空Div法清除浮动，为什么能找到父级高度，只是在浮动元素后面加了一个空盒子而已，为什么还要给这个空盒子加clear属性，是为了清除浮动元素的影响吗？这个空盒子是和父级并列的吗？还是在父盒子里面？
第五个：css法清除浮动影响疑问同上，另如果使用：：before清除浮动可以吗？
问题 ：表单的不完美
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、理想图：
问题一：
a、描述：表单之间不能套表单，那么表格里面是否可以套用表单 或者说表单里面是否可以套一个表格？
b、如果可以套用那么 表单的重置按钮是否可以达到清除表格里面已经填写的内容？是否有效？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ weight:1000px; height:600px; /*第一种写法*/ background-color: crimson; background-image: url("images/小新.jpg"); background: no-repeat center; /*第二种写法*/ /*background: crimson url("images/小新.jpg") no-repeat center;*/ } </style> </head> <body> <div class="box"></div> </body> </html>
程序中第一种写法运行不成功，这是为什么?
单个属性写在简写属性前面了
问题：自己做了一个个人简历的表格 请老师帮忙看看是否有问题
a、周末对表格的练习和巩固知识
b、代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格练习</title> </head> <body> <table cellspacing="0" border="1px" align="center" > <caption>个人简历表格</caption> <tr> <td colspan="11" align="center">个人简历</td> </tr> <tr> <td colspan="11" align="right" valign="top">流水号：###</td> </tr> <tr align="center"> <td>*姓名</td> <td>hello</td> <td>*性别</td> <td>hello</td> <td>*生日</td> <td>hello</td> <td>*民族</td> <td>hello</td> <td colspan="3" rowspan="2" valign="top">照片</td> </tr> <tr align="center"> <td>*籍贯</td> <td>hello</td> <td>*身高</td> <td>hello</td> <td>*政治面貌</td> <td>hello</td> <td>*职位</td> <td>hello</td> </tr> <tr> </tr> <tr align="center"> <td>联系电话</td> <td colspan="3"></td> <td>昵称</td> <td colspan="2"></td> <td>个人爱好</td> <td colspan="3"></td> </tr> <tr align="center"> <td>学校地址</td> <td colspan="3"></td> <td>*QQ</td> <td colspan="2"></td> <td>E-mail</td> <td colspan="3"></td> </tr> <tr> <td>什么方式了解？</td> <td colspan="10"> 朋友介绍？ 网络？ 传单？  官网？ ？ 传单？ </td> </tr> <tr> <td rowspan="3" align="center">社会经历</td> <td colspan="10" rowspan="3"></td> </tr> <tr> </tr> <tr> </tr> <tr> <td rowspan="3" align="center">个人经历</td> <td colspan="10" rowspan="3"></td> </tr> <tr> </tr> <tr> </tr> <tr> <td rowspan="3" align="center">证书</td> <td colspan="10" rowspan="3"></td> </tr> <tr> </tr> <tr> </tr> <tr> <td rowspan="3" align="center">奖项</td> <td colspan="10" rowspan="3"></td> </tr> <tr> </tr> <tr> </tr> </table> </body> </html>
c、效果图：
问题：关于图片的居中问题
a、为什么图片不可以使用align标签进行居中？除了套用另外的标签的办法使图片居中还有其它的办法嘛？
问题： 表格相关问题
a、在给表格或者单个单元格设置背景图片的时候 需不要给定宽度或者高度？来达到照片的正常显示？
我想让网页整出三个一行排列的图加字。用那些代码呀
无法解析。这是下一级的输入/115.jpg无法解析 文件夹是另行创建的都存在里边
软件的安装包和插件可以发下吗
非常抱歉给您带来不好的体验！为了更深入的了解您的学习情况以及遇到的问题，您可以直接拨打投诉热线：
我们将在第一时间处理好您的问题！
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护：百战汇智（北京）科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证：京B2-20212637
无法解析。这是下一级的输入/115.jpg无法解析 文件夹是另行创建的都存在里边
京公网安备 11011402011233号