移动端--（流式布局京东首页）

最新推荐文章于 2024-02-05 21:36:57 发布

白的夜gxw

最新推荐文章于 2024-02-05 21:36:57 发布

阅读量290

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_63228975/article/details/126914255

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

技术：主要采用流式布局，实现页面的百分比自适应。

HTML程序

<!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,minimun-scale=1.0
    ,maximum-scale=1.0,user-scalable=0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>京东</title>
</head>

<body>
    <!-- 头部 -->
    <header class="app">
        <ul>
            <li>
                <img src="../../images/jd-err.png" alt="">
            </li>
            <li>
                <img src="../../images/jd-logo.png" alt="">
            </li>
            <li>
                <span>打开京东App，购物更轻松</span>
            </li>
            <li>
                <b>立即打开</b>
            </li>
        </ul>
    </header>
    <!-- 搜索框 -->
    <div class="search">
        <div class="search-btn"></div>
        <div class="search-content">
            <div class="jd-icon"></div>
            <div class="sou"></div>
            <input type="search" placeholder="好奇 伴你同游，随你所想">
        </div>
        <div class="search-login">登录</div>
    </div>
    <!-- 主体内容部分 -->
    <div class="main-Content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="../../images/banner.dpg">
        </div>

        <!-- 蔡康永品牌日 -->
        <div class="brand">
            <div>
                <a href="#"><img src="../../images/pic1.dpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="../../images/pic2.dpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="../../images/pic3.dpg" alt=""></a>
            </div>
        </div>

        <!-- 中间导航栏 -->
        <nav>
            <a href="#"><img src="../../images/nav1.webp" alt=""><span>京东超市</span></a>
            <a href="#"><img src="../../images/nav2.webp" alt=""><span>京东超市</span></a>
            <a href="#"><img src="../../images/nav3.webp" alt=""><span>京东超市</span></a>
            <a href="#"><img src="../../images/nav1.webp" alt=""><span>京东超市</span></a>
            <a href="#"><img src="../../images/nav2.webp" alt=""><span>京东超市</span></a>
            <a href="#"><img src="../../images/nav1.webp" alt=""><span>京东超市</span></a>
            <a href="#"><img src="../../images/nav3.webp" alt=""><span>京东超市</span></a>
            <a href="#"><img src="../../images/nav1.webp" alt=""><span>京东超市</span></a>
            <a href="#"><img src="../../images/nav2.webp" alt=""><span>京东超市</span></a>
            <a href="#"><img src="../../images/nav3.webp" alt=""><span>京东超市</span></a>
        </nav>

        <!-- 新闻模块 -->
        <div class="news">
            <a href="#">
                <img src="../../images/new1.dpg" alt="">
            </a>
            <a href="#">
                <img src="../../images/new2.dpg" alt="">
            </a>
            <a href="#">
                <img src="../../images/new3.dpg" alt="">
            </a>
        </div>
    </div>
</body>

</html>

css 程序

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    background-color: #ccc;
    font-size: 14px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #666;
}

* {
    padding: 0;
    margin: 0;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

img {
    vertical-align: middle;
}

/* 头部 */
.app {
    height: 45px;
}

.app ul li {
    height: 45px;
    float: left;
    background-color: #333333;
    text-align: center;
    line-height: 45px;
    color: blanchedalmond;
}

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

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

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

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

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

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

/* 搜索框 */
.search {
    position: fixed;
    height: 44px;
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    line-height: 44px;
    text-align: center;
    overflow: hidden;
}

.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
    /* background-color: #666; */
}

.search-btn::before {
    display: block;
    content: '';
    width: 20px;
    height: 18px;
    background: url(../../../images/jd-btn.png) no-repeat;
    background-size: 20px auto;
    margin: 14px 0 0 15px;
}

.search-content {
    /* 坑：默认宽度是640，继承父亲，在640的基础上再margin 
        但是如果指定100%，就是宽度直接给640，margin再另算*/
    /* width: 100%; */
    margin: 0 50px;
    position: relative;
    height: 30px;
    /* 椭圆框 ：高度的一半 */
    border-radius: 15px;
    margin-top: 7px;
    overflow: hidden;
    background-color: #fff;
    /* background-color: #696; */
}

.jd-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
    height: 15px;
    background: url(../../../images/jd-jd.png) no-repeat;
    background-size: 20px auto;
}

.jd-icon::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ddd;
}

.search-content .sou {
    position: absolute;
    top: 10px;
    left: 50px;
    width: 18px;
    height: 15px;
    /* background-color: #669; */
    background: url(../../../images/jd-sprites.png) -81px 0;
    background-size: 200px;
}

.search-content input {
    position: absolute;
    top: 0;
    right: 0;
    outline: none;
    height: 30px;
    border: 0;
    width: 80%;
    padding: 0 10px;
    line-height: 30px;
    /* vertical-align: top; */
}

.search-login {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    color: #cb1623;
    /* background-color: #996; */
}

/* 焦点图 */
.slider img {
    width: 100%;
}

/* 品牌日 */
.brand {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.brand div {
    float: left;
    width: 33.33%;
}

.brand div img {
    width: 100%;
}

/* 中间导航 */
nav {
    overflow: hidden;
    text-align: center;
}

nav a {
    float: right;
    width: 20%;
}

nav a img {
    width: 40px;
    margin: 10px 0;
}

nav a span {
    display: block;
}

/* 新闻 */
.news {
    margin-top: 20px;
}

.news a {
    float: left;
}

.news a img {
    width: 100%;
}

.news a:nth-child(1) {
    width: 50%;
}

.news a:nth-child(n+2) {
    width: 25%;
    box-sizing: border-box;
    border-left: 1px solid #ccc;
}
```在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/46913dda4b5b431bb221df50615e1622.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/885e348d8d2c48428f965d0f02a47a3b.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/8371e0bf78ca49cdad27cb7abafd4285.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/d9e9b52099d6471c94eee90f9bedb575.webp#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/66ad86da37484035be9f73cc73936a77.webp#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/b90a33010e7449bc8fe8dc2005d6287e.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/e7601c7b6fba4a2996898c2d44524ca1.jpeg#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/f4c07f24e5b74c60ab13438a53e08cfa.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/cc8244e10606437588ef51ddf9a5245b.webp#


总结：以下是我通过这个案例总结出来的知识点：
1.父盒子有宽度，比如说100px,子盒子使用width:100%,那么子盒子的宽度变为100px,但是如果如果再给子盒子添加margin值，就会在100px的基础上再加子盒子的宽度。比如margin-right:50px;那么子盒子的宽度就是150px.
2.子盒子都会撑开父盒子，如果发现父盒子的高度为0，大概率就是子盒子添加了浮动。
3.表单外面嵌套一个div时，会发现表单不能和div对齐，使用vertical-align:top;