移动端的html+css

最新推荐文章于 2022-08-06 22:52:23 发布

ZOEylchen

最新推荐文章于 2022-08-06 22:52:23 发布

阅读量784

点赞数

分类专栏：配置移动页面文章标签： html css

本文链接：https://blog.csdn.net/ZOEylchen/article/details/53510627

版权

配置同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

移动页面

2 篇文章 0 订阅

订阅专栏

每次都要上网找寻资料。
花点时间来写这篇博客。
首先在学习制作之前，应该有对基础html和css有了了解。
之前你可以看html4.0
这个以html5为例
开头是不再是你所见到的冗长的打头。
然后便是

   <html>
      <head>
         <meta charset="utf-8">
         <meta name ="viewport" content="width = device-width,initial-scale=1">
         <title>移动端</title>
         此处还可以有<style>
         当然你也可以引用外部css样式<link href="xxx.css" type="text/css" rel="stylesheet">
      </head>
      <body>
         ...
      </body>
   </html>

css文件：
*{
margin:0px;
padding: 0px; /统一最后有着一部/
}
.heading,
.container,
.footing{
margin: 10px auto; /居中/
}

.heading{
height: 100px;
background-color: red;
}
.left,
.right,
.main{
height: 300px;
background-color: yellow;
}
.footing{
height: 100px;
background-color: gray;
}

@media screen and (min-width: 960px){
.heading,
.container,
.footing{
width:960px;

}
.left,
.main,
.right{
    float: left;
    height: 500px;
}
.left,
.right{
    width:200px;

}
.main{
    margin: 0px 5px;
    width:550px;
}
.container{
    height: 500px;
@media screen and (min-width: 600px) and (max-width: 960px){
.heading,
.container,
.footing{
    width: 600px;

}
.left,
.main{
    float: left;
    height:400px;

}
.right{
    display: none;
}
.left{
    width: 160px;

}
.main{
    width: 435px;
    margin-left: 5px;
}
.container{
    height: 400px;
}

}

    .heading,
    .container,
    .footing{
        width: 400px;
    }
    .left,
    .right{
        width: 400px;
        height: 100px;
    }

    .main{
        margin-top: 10px;
        width:400px;
        height:200px;
    }
    .right{
        margin-top: 10px;

    }
    .container{
        height: 420px;
    }
}

ZOEylchen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端的html+css

每次都要上网找寻资料。花点时间来写这篇博客。首先在学习制作之前，应该有对基础html和css有了了解。之前你可以看html4.0 这个以html5为例开头是不再是你所见到的冗长的打头。然后便是 <html> <head> <meta charset="utf-8"> <meta name ="viewport" content
复制链接

扫一扫