简易商城 [ html + css ] 练习

1. 前言

　　通过使用 HTML + CSS 编写一个简易商城首页。如图：

2. 布局思路

　　通过页面分析，大致可以决定页面的布局分为 5 大板块。

简易商城 [ html + css ] 练习

接下来，可以先定义页面的布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/main.css">
    <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <title>蘑菇街 - 你的剁手街</title>
</head>
<body>
    <div class="top-nav"></div>
    <div class="header"></div>
    <div class="main-promote"></div>
    <div class="cat-promote"></div>
    <div class="footer"></div>

</body>
</html>

通过定义 5 个 div 将页面布局基本定义下来，接下来还是先定义页面详细的布局内容：

简易商城 [ html + css ] 练习

页面布局基本完成了，接下来就是补充 css 样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/main.css">
    <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <title>蘑菇街 - 你的剁手街</title>
</head>
<body>
    <div class="top-nav">
        <div class="container clearf">
            <div class="left">
                <a href="" class="item">item</a>
            </div>
            <div class="right">
                <a href="" class="item">item</a>
                <a href="" class="item">item</a>
                <a href="" class="item">item</a>
                <a href="" class="item">item</a>
            </div>
        </div>
    </div>
    <div class="header">
        <div class="container clearf">
            <div class="col-2">蘑菇街</div>
            <div class="col-5">
                <input type="text">
                <button>搜索</button>
            </div>
            <div class="col-3">
                <a href="" class="item">我的购物车</a>
            </div>
        </div>
    </div>
    <div class="main-promote">
        <div class="container clearf">
            <div class="col-2">
                <div class="cat">
                    <div class="item">item / item</div>
                    <div class="item">item / item</div>
                    <div class="item">item / item</div>
                    <div class="item">item / item</div>
                    <div class="item">item / item</div>
                    <div class="item">item / item</div>
                    <div class="item">item / item</div>
                    <div class="item">item / item</div>
                    <div class="item">item / item</div>
                    <div class="item">item / item</div>
                    <div class="item">item / item</div>
                </div>
            </div>
            <div class="col-6">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium aliquid asperiores culpa cupiditate delectus, deserunt dolore eaque magnam maiores minima minus molestiae nihil placeat quae quaerat quos velit voluptas.
            </div>
            <div class="col-2">
                <div class="auth">
                    <div class="avatar"></div>
                    你好，欢迎剁手.
                </div>
                <div class="anno">
                    <div class="title">公告</div>
                    <div class="content">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolor dolore maxime numquam quia, reprehenderit sint voluptatem? Cum dolorem illum laboriosam omnis reiciendis, ut. Asperiores deserunt laudantium nam repudiandae tempore?
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="cat-promote">
        <div class="container clearf">
            <div class="title">男装</div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem natus quam quos. Consectetur consequatur deserunt iusto nostrum quidem! Cupiditate dolor est facere illo, ipsam nobis quibusdam vel! Amet, hic, repudiandae.
        </div>
    </div>
    <div class="footer">
        <div class="container clearf">
        <a href="" class="item">item</a>
        <a href="" class="item">item</a>
        <a href="" class="item">item</a>
        <a href="" class="item">item</a>
        <div class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid at atque, explicabo fugiat harum in odit sapiente. A blanditiis cum, delectus, esse hic odit porro quasi quisquam quos sunt, unde.</div>
        </div>
    </div>

</body>
</html>

index.html