61,115
社区成员
发帖
与我相关
我的任务
分享电脑网页到手机端布局混乱
具体如下 很小的网页 查看了@media 但是还是混乱 
才入门不到一星期 所以很小白 希望懂的帮我看一下 谢谢谢谢
pc端显示：
CSS 代码
my.css
才入门不到一星期 所以很小白 希望懂的帮我看一下 谢谢谢谢pc端显示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<!--
使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果
width = device-width：宽度等于当前设备的宽度
height = device-height：高度等于当前设备的高度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面） -->
<title>Document</title>
<link rel="stylesheet" href="media-100.css"type="text/css">
<link rel="stylesheet" href="my.css"type="text/css">
<style>
*{
margin: 0;
padding: 0;
box-sizing:border-box;
text-decoration: none;
list-style: none;
}
body{
padding-bottom:0.98rem;
font-size: 14px;
}
/* .fuc{
width: 800px;
margin:0 auto ;
}
.list{
width: 25%;
height: 200px;
float: left;
background: #666;
}*/
/* @media screen and (max-width: 1200px) and (min-width: 600px){
div{
width: 300px;
height: 300px;
background: #ccc;
border-radius: 50%;
}
.list{
width:50%;
}
}
*/
/*第三部分*/
/*最后底部*/
.footer{
width: 100%;
height: 0.98rem;
border-top: 1px solid #dbd6d6;
background:#ffffff;
position: fixed;
left:0;
bottom: 0;
}
.footer li{
width: 25%;
height: 0.98rem;
float: left;
}
.footer li a{
display: block;
height: 0.98rem;
width: 100%;
color: #757575;
text-align:center;
font-size: 0.22rem;
padding-top:37%;
}
.footer li:nth-of-type(1){
background-image: url(images/home.png);
background-repeat: no-repeat;
background-size: 30% ;
background-position:center 0.1rem;
}
.footer li:nth-of-type(2){
background-image: url(images/activity.png);
background-repeat: no-repeat;
background-size:30% ;
background-position:center 0.1rem;
}
.footer li:nth-of-type(3){
background-image: url(images/shopping.png);
background-repeat: no-repeat;
background-size:30%;
background-position:center 0.1rem;
}
.footer li:nth-of-type(4){
background-image: url(images/owner.png);
background-repeat: no-repeat;
background-size:30% ;
background-position:center 0.1rem;
}
.footer a:hover{
/*background: #c53336;*/
color: red;
}
</style>
</head>
<body>
<div class="fu">
<img src="images/back.png" alt="" id="l">
<img src="images/ok.png" alt="" id="r" >
<!-- <div class="list">1</div>
<div class="list">2</div>
<div class="list">3</div>
<div class="list">4</div> -->
Zara旗舰店
</div>
<div class="sec">
<div class="sec1">
<a href="">夏日</a>
<a href="">折扣</a>
<a href="">上新</a>
<a href="">更多</a>
</div>
</div>
<div class="third1">
<a href="">
<img src="images/1.jpg" alt="">
夏季轻薄透气外套 ￥299.00
</a>
</div>
<div class="third1">
<a href="">
<img src="images/2.jpg" alt="">
夏季流行阔腿裤潮 ￥199.00
</a>
</div>
<div class="third1">
<a href="">
<img src="images/3.jpg" alt="">
夏季可爱背带裤学生 ￥399.00
</a>
</div>
<div class="third1">
<a href="">
<img src="images/4.jpg" alt="">
夏季白色套装知性 ￥599.00
</a>
</div>
<div class="third1">
<a href="">
<img src="images/5.jpg" alt="">
夏季简约百搭T恤 ￥99.00
</a>
</div>
<br>
<div class="third1">
<a href="">
<img src="images/6.jpg" alt="">
夏季优雅粉色外套 ￥499.00
</a>
</div>
<div class="main">
<button><a href="">Zara互动区</a></button>
<div class="mian2">
<img src="images/ff.jpg" alt="">
<p id="P1"><span>许你一个夏天</span>向你推荐了一个商品</p>
<p id="P2"><span>￥299.00</span>巧克力甜心蛋糕</p>
<p id="P3">商品详情如下</p>
<img src="images/01.jpg" alt="">
<img src="images/02.jpg" alt="">
<img src="images/03.jpg" alt="">
<img src="images/04.jpg" alt="">
<img src="images/05.jpg" alt="">
<img src="images/06.jpg" alt="">
<div class="mian3">
<span style="font-size: 20px;color:blue;font-style: italic;">-----1分钟前-----</span>
<div class="mian4">
<img src="images/喜欢.png" alt=""><a href="">9999赞</a></div>
<div class="mian5">
<img src="images/评论 .png" alt=""><a href="">3377评论</a></div>
</div>
<p id="nina"><a href="">Nina：</a>看起来很好吃的样子！！</p>
<p id="nina"><a href="">咖啡的沫沫：</a>大家最近都喜欢怎么搭配衣服啊？？</p>
</div>
</div>
<div class="footer"><!--尾部-->
<ul><!--无序列表-->
<li><a href="">首页</a></li>
<li><a href="">活动中心</a></li>
<li><a href="">购物车</a></li>
<li><a href="">我的</a></li>
</ul>
</div>
</body>
</html>
CSS 代码
my.css
*{
margin: 0;
padding: 0;
box-sizing:border-box;
text-decoration: none;
list-style: none;
}
body{
font-size: 10px;
}
@font-face{
font-family: myfont;
src:url(iconfont.ttf);
}
header{
width: 100%;
height: 1.3rem;
background:#313131;
}
header p{
text-align: center;
line-height: 1.3rem;
font-family: myfont;
color: #ffffff; font-size: 1.4rem;
}
.fu{
width: 100%;
height: 0.88rem;
background-color:#F0F8FF;
border-bottom: 0.05rem solid #dbd6d6;
line-height: 0.8rem;
text-align: center;
font-size: 0.36rem;
text-shadow: 3px 3px 3px pink;
font-weight: bold;
color: #000;
}
.fu img{
width:0.5rem;/*rem是相对于HTML根元素*/
height:0.5rem;
margin: 0.2rem;
}
#l{
float: left;
}
#r{
float: right;
}
.fu p{
position:absolute;
left:30%;
}
.sec{
width: 100%;
height: 0.88rem;
padding: 0.2rem;
/*background: pink;*/
}
.sec1 a{
width: 25%;
height: 0.6rem;
text-align: center;
line-height: 0.6rem;
color: #808080;
font-size: 0.28rem;
font-weight: bold;
float: left;
border: 2px solid #c53336;
}
.sec1 a:nth-of-type(1){
/*background: ;*/
border-right : none;
border-top-left-radius: 0.1rem;
border-bottom-left-radius: 0.1rem;
}
.sec1 a:nth-of-type(4){
border-left: none;
border-top-right-radius: 0.1rem;
border-bottom-right-radius: 0.1rem;
}
.sec1 a:nth-of-type(3){
border-left: none;
}
.sec1 a:hover{
background:#c53336;
color:#ffffff;
}
/*第三部分*/
.third1{
position:relative;
left:40px;
width:45%;
height:300px;
border: 3px solid;
border-color: pink;
border-radius: 25%;
float:left;
margin-right: 50px;
}
.third1 a{
/*width: 50%;*/
height: 1.2rem;
/*display: block;*//*属性规定元素应该生成的框的类型*/
padding-bottom: 1rem;
/*text-align: center;*/
line-height: 1.2rem;
font-size: 0.15rem;
font-weight: bolder;
}
.third1:hover{
background:pink;
}
}
.third1 a{
color:;
}
.third1 img{
width: 1rem;
height: 1.2rem;
border-radius: 20%;
float: left;/*两个div可以显示在同一行中，一般来说块级元素会单独占一行*/
margin:0.2rem;
}
.main>button{
/*width: 100px;
height: 30px;
/*text-align: center;*/
/*color: white;
font-size: 0.22rem;
background: #c53336;
margin:0.2rem ;
border-radius: 0.05rem; */
width: 15%;
height: 50px;
border:2px solid black;
border-radius: 30%;
font-size: 30px;
background: pink;
color:white;
float:right;
}
}
}
.mian2{
width: 100%;
margin-left: 20%;
float: left;
margin: 30px;
}
.mian2 img{
width: 10rem;
height: 10rem;
border:2px solid black;
border-radius: 50%;
/*margin:0 0.2rem;*/
float：left；
}
#P1{
font-size:30px;
/*background: pink;*/
margin-bottom: 0.1rem;
float:left;
}
#P1 span{
margin-right: 0.2rem;
margin-top: 0.8rem;
}
#P2 {
font-size: 30px;
font-weight: bolder;
text-align: center;
}
#P2 span{
font-size: 30px;
margin: 0.2rem;
color:green;
}
/*#P2 i{
display: block;
float: left;
font-weight: normal;
font-style: normal;
font-size: 30px;
margin-top: 7px;
}*/
#P3{
text-align: center;
font-size:30px;
margin-bottom: 0.2rem;
}
.mian2 img{
width: 25%;
height:25%;
}
.mian2 img:nth-of-type(1){
margin:0 8px 8px 0;
}
.mian2 img:nth-of-type(2){
margin:0 8px 8px 0;
}
.mian2 img:nth-of-type(3){
margin:0 0px 8px 0;
}
.mian2 img:nth-of-type(5){
margin:0 8px 0 8px;
}
.mian3{
margin-top: 0.2rem;
overflow: hidden;
}
.mian3 img{
width: 0.4rem;
height: 0.4rem;
float: left;
margin-right: 0.1rem;
}
.mian3 span{
width: 33.33%;
height: ;
display: block;
float: left;
font-size: 0.22rem;
line-height: 0.5rem;
/*overflow: hidden;*/
}
.mian5{
width: 20%;
float: left;
}
.mian4{
width: 20%;
float: left;
}
.mian5 a{
display: block;
margin-top: 0.2rem;
margin-left: 0.2rem;
}
.mian4 a{
display: block;
margin-top: 0.2rem;
margin-left: 0.2rem;
}
#nina{
font-size: 25px;
border:2px solid pink;
border-radius: 10%;
margin:10px;
padding: 5px;
}
...全文
请发表友善的回复…
发表回复
还没想到好名字 2017-07-14
- 打赏
- 举报
一般来说手机独立的样式表还是少不了的，可以按屏幕宽度导入css（<link rel="stylesheet" media="screen and (max-width: 一般手机宽px)" href="${ctxPath}/mobile/css/mobile.css" />）
或者可以考虑用mui布局试试
半途流浪 2017-07-13
- 打赏
- 举报
给手机版做一个独立的样式表
浪子回头8 2017-07-13
- 打赏
- 举报
最好就是单独做一个手机版的，宽度多用百分比，高度自适应。
你那些边框太难看了，可以用border-radius:5px;
字体大小也不一样，统一用14px
