简易商城 [ 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-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%;

}

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:;

    outline:;

}

.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优化出来。

简易商城 [ html + css ] 练习的更多相关文章

.NETCore 快速开发做一个简易商城
介绍上一篇介绍 <.NETCore 基于 dbfirst 体验快速开发项目>,讲得不太清楚有些多人没看懂.这次吸取教训,将一个简易商城做为案例,现实快速开发. 本案例用于演示或学习,不具 ...
LayoutSimple简易响应式CSS布局框架
开发这个css布局的目的是为了少做一些重复的工作,一是前端或多或少会开发一些很小的响应式项目, 二是UI设计的出来的界面总是各种布局各种样式,这个时候如果前端去使用Bootstrap或者Foundat ...
javaweb和数据库的简易商城系统
这是一个基于Javaweb和数据库的简易商城系统.为大二夏季小学期完成. 目录结构主要功能截图为: 一.购买用户 1.首页(除此界面其余界面访问需要登录才能进入) 查看商品添加购物车查看购物车 ...
商城常用css分类代码
如图: 原代码如下: <div class="allMerchan bgnone"> <h2 class="ttlm_category"> ...
[转帖]2019 简易Web开发指南
2019 简易Web开发指南 2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术 ...
day113:MoFang:种植园商城页面&充值集成Alipay完成支付的准备工作
目录 1.种植园商城页面初始化 2.规划商品种类并且构建关于商品的模型类 3.解决APP打包编译之后的跨域限制 4.商品列表后端接口实现 5.前端获取商品列表并显示 6.种植园点击充值允许用户选择充值 ...
ECMall模板开发文档
ECMall 模板开发文档前言欢迎阅读 ECMall 模板制作教程,通过阅读本教程可快速上手 ECMall 模板的使用和制作. ECMall 模板制作要求用户具备 XML . XHTML 和 ...
mysql数据库-初始化sql建库建表-关联查询投影问题
下面是一个简易商城的几张表的创建方式 drop database if exists shop ; create database shop CHARACTER SET 'utf8' COLLATE ...
Metronic4.7.5 下载 HTML5 UI后台管理框架
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 3.3.4 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,7 ...

随机推荐

oracle获取时间段之间的所有日期
SELECT TO_CHAR(ADD_MONTHS(TO_DATE('2014-10', 'yyyy-MM'), ROWNUM - 1), 'yyyy-MM') as monthlist FROM D ...
Ubuntu 14.04.2配置rsync
ubuntu系统自带rsync,首先配置/etc/default/rsync,启用daemon模式修改/etc/rsyncd.conf配置文件 cat /etc/rsyncd.conf # samp ...
Python 3的 bytes 数据类型
"""b'\xe6\x88\x91\xe7\x88\xb1Python\xe7\xbc\x96\xe7\xa8\x8b'代表这是一个字节窜,\x代表十六进制表示 e6是十 ...
使用Quasar设计Material和IOS风格的响应式网站
使用Quasar设计Material和IOS风格的响应式网站栏目: CSS · 发布时间: 8个月前来源: segmentfault.com 本文转载自:https://segmentfaul ...
Impala 介绍（转载）
一.简介 1.概述 Impala是Cloudera公司推出,提供对HDFS.Hbase数据的高性能.低延迟的交互式SQL查询功能. •基于Hive使用内存计算,兼顾数据仓库.具有实时.批处理.多并发等 ...
Eclipse 打包运行maven项目
https://www.cnblogs.com/tangshengwei/p/6341462.html
有效的minidump(一）
简介在过去的几年中,崩溃转储成为我们调试活动的一个重要部分.当我们的软件在客户的机器出现故障时,创建应用程序状态的快照并使用在开发人员机器上运行的传统调试器对其进行分析的可能性是非常宝贵的.第一代崩 ...
Python 09 安装torch、torchvision
这个也是弄了我很久,百度了好多文章,其实像下面那样挺简单的,没那么复杂 1.进入torch的官网的下载页面,选择一下参数信息地址:https://pytorch.org/get-started/lo ...
原生 ajax 请求
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
C语言第一篇博客
你对网络专业或者计算机专业了解是怎样? 进行网络安全,防止信息泄露. 你了解C语言么?C语言主要应用有哪些? C语言简言之就是一门计算机的编程语言. C语言主要应用于应用软件,服务器端开发,系统软件和 ...