*{padding: 0;
margin: 0;}
.header{background-color: #FFFFFF;
margin-top: 0;
width: 100%;
height:120px ;
display: flow-root;
padding: 20px;
border: 1px solid#F8F8F8 ;}
.logobox{height: 81px;
width:248px ;
margin-right:428px ;
margin-top:13px;
margin-bottom: 35px;
}
#righthead{width: 607px;
height: 67px;
margin: 13px 324px;
float: right;}
#righthead>li img{width:59px ;
height: 51px;}
#righthead>li{display:inline}
#right::after{content: '';
display: block;
clear: both;}
.middle{width: 100%;
height: 100%;
background-color:#F8F8F8 ;
}
.middle
.chart{height: 282px;
width: 492px;
margin: 247px 247px 241px 315px;
}
.loginform{height: 391px;width: 435px;
margin:135px 314px 209px 247px;
border: 2px solid rgb(138, 136, 136);
text-align: center;
}
.loc{width: 339px; height: 58px; background-color: red;}
.font{font-size: x-small;
color: gray;}
```html
<body >
<div class="header">
<div class="logobox">
<img src="C:\Users\杨云飞飞\Desktop\yyf\image\考拉logo.png" alt="考拉">
<a href="#"></a>
</div><!--第二层-->
<div>
<ul id="righthead">
<li> <img src="C:\Users\杨云飞飞\Desktop\yyf\image\tuihuo.png" >30天无忧退货</li>
<li><img src="C:\Users\杨云飞飞\Desktop\yyf\image\feiji.png"> 100%全球优选</li>
<li> <img src="C:\Users\杨云飞飞\Desktop\yyf\image\zheng.png" >正品保证</li>
</ul>
</div><!--第二层-->
</div><!--第一层-->
<div class="middle">
<div>
<div class="chart">
<img src="C:\Users\杨云飞飞\Desktop\yyf\image\正品图.png" alt="">
</div><!--第三层-->
<div class="loginform">
<form name="loginform" action="" method="post" >
<h2 class="title">手机号登录</h2>
<h6 class="otherlogin">使用密码验证登录</h6>
<div class="tell">
<input type="tel" maxlength="11" autofocus placeholder="请输入手机号" required ></div>
<div class="test">
<input type="text" placeholder="请输入验证码" required name="test"><br/>
<input class="logc" type="submit" name="login" value="登录" ><br/>
<div class="font" >注册/登录代表同一隐私政策和服务条款</div>
</form>
<div><img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-tao.png" >
<img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-zhi.png" >
<img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-wei.png" >
<img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-xin.png" >
<img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-wang.png" >
</div>
<div class="regist">
<!-- a标签表示链接 ,用于页面跳转-->
<a href="password.html">找回密码</a>
</div>
</div><!--第三层登录表单-->
</div><!--第二层-->
<div></div><!--第二层-->
</div><!--第一层-->
```
不改css的情况下,这2块交换下位置,变成下面这样
dom位置不变,改css,给logobox加float及去掉 margin-right或者调小一点,要不分辨率小会掉行
.logobox{height: 81px;
width:248px ;
/* margin-right:428px ;*/
margin-top:13px;
margin-bottom: 35px;float:left
}
效果如下
有帮助麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~
具体是什么HTML编码,以及需要实现什么效果图,需要详细说明一下
只给这么一个css样式,也没html代码,不知道效果,看不出啥问题
你要实现什么样的效果呀
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!