移动web开发项目1:京东首页(移动端、流式布局也称百分比布局)

最新推荐文章于 2022-06-09 16:45:15 发布

小黄呀呀呀

最新推荐文章于 2022-06-09 16:45:15 发布

阅读量451

点赞数

分类专栏：移动端

本文链接：https://blog.csdn.net/qq_42129553/article/details/113811778

版权

本文介绍了移动Web开发中京东首页的流式布局，通过设置理想视口、导入初始化样式，详细讲解了头部、搜索栏与滑动图、导航栏的实现方法。特别强调了百分比布局的运用，以及在垂直居中、绝对定位和精灵图应用上的技巧，旨在帮助开发者更好地理解和应用移动端布局。

摘要由CSDN通过智能技术生成

1、先设置理想视口、导入样式(将body居中，设置字体大小)

初始化样式链接:http://necolas.github.io/normalize.css/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 理想型视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0">
    <title>Document</title>
    <!-- 引入初始化样式 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入自己写的首页的样式 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    123
</body>

</html>

2、编写头部

京东的布局百分比是8-10-57-25

里面最重要的就是图片垂直居中的时候，是与文字的基线对齐，我们需要将其设置为 vertical-align: middle;

<body>
    <header class="app">
        <ul>
            <li>
                <img src="images/delete.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
</body>

css样式

body {
   
    width: 100%;
    min-width: 320px;
    max-width: 980px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
}

.app {
   
    width: 100%;
    height: 45px;
    background-color: #333333;
}

.app ul {
   
    margin: 0;
    padding: 0;
}

.app ul li {
   
    float: left;
    list-style: none;
    height: 45px;
    text-align: center;
    line-height: 45px;
    color: #fff;
}

.app ul li:nth-child(1) {
   
    width: 8%;
}

.app ul li:nth-child(1) img {
   
    width: 10px;
}

.app ul li:nth-child(2) {
   
    width: 10%;
}

.app ul li:nth-child(2) img {
   
    width: 30px;
    vertical-align: middle;
}

.app ul li:nth-child(3) {
   
    width: 57%;
}

.app ul li:nth-child(4) {
   
    width: 25%;
    background-color: #F63515;