感觉效果出不来,我已经跟老师改的差不多了,但是还是没变化,一直这样。
04.商城官网_banner.zip
background-position :这个属性会导致图片裁剪
问题:background-position 这个属性会导致图片比例变化吗?图片变形吗?
......WIFI.
我想询问下该怎样放进去酒店飞机下面图标的背景图片同时能让图片居中且背景颜色不会被图片颜色替换,纠结好久也没完成这个效果
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*transform转换 1)translate转换*/ .box{ width: 100%; height: 500px; border: green solid 5px; } .box1{ width: 100px; height: 100px; background-color: purple; transform: translate3d(50px,50px,50px); } /*2)rotate转换*/ .box2{ width: 100px; height: 100px; background-color: yellow; transform: translateX(200px) rotate(45deg); } /*3.scale转换*/ .box3{ width: 100px; height: 100px; background-color:rgba(0,0,255,.5); transform: scale(1.5) translateX(50px); /*transform: translateX(50px) scale(1.5);*/ /*为什么这里两种变换的顺序调换,div的位置会不一样?*/ } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
2.效果图
我的问题有两个:
1)为什么一个transform里面,两种属性值顺序调换,div的位置不一样?(例如Box3,把translateX或是scale放前面,div3的X向位置会不一样)
2)为什么这三个div同为行内元素,做了transform变换以后,位置就不在不同的三行里面?
老师,麻烦问下,添加那个大图白色导航右边的搜索框就下来了怎么回事?(图在附件)
代码.zip
<table border="1" width="300px" height="300px" align="center"> <tr> <td colspan="2"></td> <!-- <td></td> --> <td rowspan="2"></td> </tr> <tr> <td rowspan="2"></td> <td></td> <!-- <td></td> --> </tr> <tr> <!-- <td></td> --> <td colspan="2"></td> <!-- <td></td> --> </tr> </table> <table align="center" width="500px" height="400px"> <tr bgcolor="pink"> <th rowspan="2">酒店</th> <th>海外酒店</th> <th>团购</th> </tr> <tr bgcolor="pink"> <!-- <th></th> --> <th>特价酒店</th> <th>民宿.客栈</th> </tr> <tr bgcolor="blue"> <th rowspan="2">机票</th> <th>火车票</th> <th>抢票</th> </tr> <tr bgcolor="blue"> <!-- <th></th> --> <th>特价机票</th> <th>专车</th> </tr> <tr bgcolor="green"> <th rowspan="2">旅游</th> <th>目的地攻略</th> <th>邮轮旅游</th> </tr> <tr bgcolor="green"> <!-- <th></th> --> <th>周边游</th> <th>定制旅游</th> </tr> <tr bgcolor="yellow"> <th>景点玩乐</th> <th>美食林</th> <th>购物外汇</th> </tr> <tr bgcolor="yellow"> <th>礼品卡</th> <th>WiFi电话</th> <th>保险签证</th> </tr> </table>
表格实操.png
<style>
.root{
width: 500px;
height: 500px;
}
.left{
float: left;
width: 250px;
background-color: firebrick;
.right{
background-color: cyan;
.top{
height: 250px;
background-color: pink;
.bottom{
background-color: darkblue;
</style>
</head>
<body>
<div class="root">
<div class="left">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="right"></div>
</body>
老师,left那个颜色为什么被覆盖了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
*{
margin: 0;
padding: 0;
.items{
height: 450px;
background-color: blueviolet;
padding: 10px;
box-sizing: border-box;
.items>div{
width: 100%;
height: 100%;
background-color: coral;
/* 移动端 */
@media screen and(max-width:768px){
width: 50%;
/* ipad端 */
@media screen and(max-width:768px)and(max-width:992px)
{.items{
width: 33%;
/* pc端*/
width: 25%;
<div class="box" >
<div class="items">
</html>
老师为什么我这个显示不出来呀
<!--页脚开始--> <div class="footer"> <div class="wrap"> <div class="footer-seriver"> <ul> <li> <a href="#"> <i class="iconfont"></i> <span>预约维修服务</span> </a> </li> <li> <a href="#"> <i class="iconfont"></i> <span>7天无理由退货</span> </a> </li> <li> <a href="#"> <i class="iconfont"></i> <span>15天免费换货</span> </a> </li> <li> <a href="#"> <i class="iconfont"></i> <span>满99元包邮</span> </a> </li> <li> <a href="#"> <i class="iconfont"></i> <span>520余家售后网点</span> </a> </li> </ul> </div> <div class="footer-link"> <ul> <li>帮助中心</li> <li><a href="">账户管理</a></li> <li><a href="">购物指南</a></li> <li><a href="">订单操作</a></li> </ul> <ul> <li>帮助中心</li> <li><a href="">账户管理</a></li> <li><a href="">购物指南</a></li> <li><a href="">订单操作</a></li> </ul> <ul> <li>帮助中心</li> <li><a href="">账户管理</a></li> <li><a href="">购物指南</a></li> <li><a href="">订单操作</a></li> </ul> <ul> <li>帮助中心</li> <li><a href="">账户管理</a></li> <li><a href="">购物指南</a></li> <li><a href="">订单操作</a></li> </ul> <ul> <li>帮助中心</li> <li><a href="">账户管理</a></li> <li><a href="">购物指南</a></li> <li><a href="">订单操作</a></li> </ul> <ul> <li>帮助中心</li> <li><a href="">账户管理</a></li> <li><a href="">购物指南</a></li> <li><a href="">订单操作</a></li> </ul> <div class="footer-aside"> <p class="tel">400-100-5678</p> <p class="time">8:00-18:00(仅收市话费</p> <a href="#" class="kefu">人工客服</a> <div class="follow"> 关注小米: <img src="image/wb.png" alt=""/> <img src="image/wx.png" alt=""/> </div> </div> </div> </div> </div>
老师我就想问下,在页脚最后右边的最后一排字“关注小米”这点本来我自己想的是用p标签,然后给嵌套两个a标签,然后在在a标签里给两个img
后面看到视频中老师用的div,我就想问下,最后一排为什么要用div上面三排出了有个用的a标签,其他都是用的p标签来写的,为什么最后这一点要用div
.main{ width: 100%; height: 170px; } .main-center{ width: 1240px; height: 170px; top: 0; left: 50%; margin-left: -620px; } .main-aside{ width: 234px; height: 100%; padding: 3px; box-sizing: border-box; background-color: #5f5750; float: left; }
<div class="main"> <div class="main-center"> <div class="main-aside"></div> <div class="img"></div> <div class="img"></div> <div class="img"></div> </div> </div>
div main的高度设置不了,不显示
老师,可不可以把img设为背景图片,通过指向ul里面的li,来改变ul的父级元素的相邻兄弟的背景图片呢?!我实验了怎么不行
为什么我的shift+alt+up/down用不了
alt的作用是当图片显示不出来的时候给用户一个提示这是什么的意思么?
为啥老师输入<a按回车能自动生成<a href='''></a>
你好,表格属性里的表格边框border属性table,td{border:1px solid black }里面的solid black 什么意思啊,视频中直接就书写也不对其进行解释
非常抱歉给您带来不好的体验!为了更深入的了解您的学习情况以及遇到的问题,您可以直接拨打投诉热线:
我们将在第一时间处理好您的问题!
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护:百战汇智(北京)科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证:京B2-20212637