zoukankan html css js c++ java

简易商城 [ html + css ] 练习

1. 前言

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

2. 布局思路

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

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

<!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 将页面布局基本定义下来，接下来还是先定义页面详细的布局内容：

页面布局基本完成了，接下来就是补充 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

* {
    background-color: rgba(0,0,0,.1);
}

body {
    line-height: 1.7;
    font-size: 14px;
}

.left {
    float: left;
}

.right {
    float: right;
}

.container {
    max- 1080px;
    margin: 0 auto;
}

.clearf:before,
.clearf:after {
    display: block;
    content: '';
    clear: both;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 {
    display: block;
    float: left;
}

.col-1 {
     10%;
}
.col-2 {
     20%;
}
.col-3 {
     30%;
}
.col-4 {
     40%;
}
.col-5 {
     50%;
}
.col-6 {
     60%;
}
.col-7 {
     70%;
}
.col-8 {
     80%;
}
.col-9 {
     90%;
}

main.css

3. 添加 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">首页</a>
            </div>
            <div class="right">
                <a href="" class="item">我的订单</a>
                <a href="" class="item">收藏夹</a>
                <a href="" class="item">注册</a>
                <a href="" class="item">登录</a>
            </div>
        </div>
    </div>
    <div class="header">
        <div class="container clearf">
            <div class="col-2 logo">蘑菇街</div>
            <div class="col-5 search-bar">
                <input type="text">
                <button>搜索</button>
            </div>
            <div class="col-3 cart">
                <a href="" class="item">我的购物车</a>
            </div>
        </div>
    </div>
    <div class="main-promote">
        <div class="container clearf">
            <div class="col-2 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>
            <div class="col-6">
                <div class="slider">
                    <img src="img/slider_01.png" alt="">
                </div>
                <div class="cat-promote">
                    <div class="col-5">
                        <img src="img/001.png" alt="">
                    </div>
                    <div class="col-5">
                        <img src="img/002.png" alt="">
                    </div>
                </div>
            </div>
            <div class="col-2 info">
                <div class="auth clearf">
                    <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?
                        reprehenderit sint voluptatem? Cum dolorem illum laboriosam omnis reiciendis, ut. Asperiores deserunt laudantium nam repudiandae tempore?
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container clearf">
        <div class="cat-promote">
            <div class="title">男装</div>
            <div class="content">
                <div class="col-2 item">
                    <div class="card"></div>
                </div>
                <div class="col-3 item">
                    <div class="card"></div>
                </div>
                <div class="col-2 item">
                    <div class="card"></div>
                </div>
                <div class="col-3 item">
                    <div class="card"></div>
                </div>
            </div>
        </div>
        <div class="cat-promote">
            <div class="title">女装</div>
            <div class="content">
                <div class="col-3 item">
                    <div class="card"></div>
                </div>
                <div class="col-2 item">
                    <div class="card"></div>
                </div>
                <div class="col-3 item">
                    <div class="card"></div>
                </div>
                <div class="col-2 item">
                    <div class="card"></div>
                </div>
            </div>
        </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

* {
    /*background-color: rgba(0,0,0,.1);*/
    box-sizing: border-box;
    transition: background-color 200ms;
}

body {
    line-height: 1.7;
    font-size: 14px;
    background-color: #f9f9f9;
}

a {
    text-decoration: none;
}

img {
    float: left;
    width: 100%;
}

.left {
    float: left;
}

.right {
    float: right;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
}

.clearf:before,
.clearf:after {
    display: block;
    content: '';
    clear: both;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 {
    display: block;
    float: left;
}

.col-1 {
    width: 10%;
}
.col-2 {
    width: 20%;
}
.col-3 {
    width: 30%;
}
.col-4 {
    width: 40%;
}
.col-5 {
    width: 50%;
}
.col-6 {
    width: 60%;
}
.col-7 {
    width: 70%;
}
.col-8 {
    width: 80%;
}
.col-9 {
    width: 90%;
}

.top-nav {
    background-color: #eeeeee;
}

.top-nav .item {
    display: inline-block;
    color: #666;
    padding: 6px 10px;
}

.header {
    padding: 20px;
}

.header .logo {
    font-size: 30px;
}

.header .search-bar {
    border: 2px solid #dd182b;
    background-color: #dd182b;
}


.header .search-bar input,
.header .search-bar button {
    float: left;
    padding: 10px;
    border: 0;
    outline: 0;
}

.header .search-bar input {
    width: 80%;
}

.header .search-bar button {
    width: 20%;
    background-color: #dd182b;
    color: #fff;
}

.header .search-bar input:focus {
    box-shadow: inset 0 0 2px 2px rgba(0,0,0,.2);
}

.header .search-bar button:hover {
    background-color: #ce1829;
}

.header .cart {
    text-align: center;
}

.header .cart .item {
    float: right;
    width: 80%;
    padding: 10px;
    border: 2px solid #eee;
    color: #dd182b;

}

.main-promote {
    background-color: #dedede;
}

.main-promote .cat {
    background-color: #6e6568;
}

.main-promote .cat .item {
    padding: 14px 20px;
    color: #fff;
}

.main-promote .cat .item:hover {
    background-color: rgba(0,0,0,.2);
}

.main-promote .info {
    padding: 10px;
    background-color: #fff;
    color: #888;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

.main-promote .info .avatar {
    float: left;
    display: inline-block;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: #aaa;
    margin-right: 10px;
    margin-bottom: 10px;
}

.cat-promote .title:before {
    display: inline-block;
    content: '';
    height: 22px;
    width: 5px;
    background-color: #dd182b;
    margin-right: 10px;
    vertical-align: middle;
}

.cat-promote .title {
    font-size: 22px;
}
.cat-promote .content .item {
    padding: 5px;
}
.cat-promote .content .card {
    height: 300px;
    background-color: #ccc;
    border-radius: 4px;

}

.footer {
    margin-top: 30px;
    padding: 30px 0;
    background-color: #eee;
    text-align: center;
    color: #999;
}

.footer a {
    color: #999;
}

main.css

4. 总结

　　在编写 HTML 页面时，首先将页面整体的框架构建出来，不要一上来就写CSS，将整体的框架确定好了后，在进行小模块的编写。最后在通过css优化出来。

查看全文

相关阅读:
Python爬虫入门之Urllib库的高级用法
 Python爬虫入门之Urllib库的基本使用
 Python中对字符串的操作
 Python2.x爬虫入门之URLError异常处理
 Python编写的记事本小程序
 Python2.X和Python3.X中Tkinter模块的文件对话框、下拉列表的不同
 记录面试龙腾简合-java开发工程师经历
 解决npm ERR! Please try running this command again as root/Administrator. 问题
 ionic3/4 使用NavController 返回两层的方式
 点击iframe窗口里的超链接，打开新页面的方式

原文地址：https://www.cnblogs.com/hukey/p/10930422.html