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

随机推荐

【Audiophobia UVA - 10048 】【Floyd算法】
题目大意:从a城市到b城市的路径中,尽可能让一路上的最大噪音最小. 题目思路:设d [ i ][ j ]表示 i 到 j 的最大噪音的最小值. 那么d [ i ][ j ] = min( d[ i ] ...
springboot 2.x整合redis，spring aop实现接口缓存
pox.xml: <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...
小白式Git使用教程，从0到1
Git是什么? Git是目前世界上最先进的分布式版本控制系统.工作原理 / 流程: Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remo ...
python代码安全扫描工具
python代码安全扫描工具:Coverity. Fortify.SecMissile(漏扫,对源代码提供基于语义的搜索和分析能力,实现已知安全漏洞的快速扫描)
poj3268 Silver Cow Party（最短路）
非常感谢kuangbin专题啊,这道题一开始模拟邻接表做的,反向边不好处理,邻接矩阵的话舒服多了. 题意:给n头牛和m条有向边,每头牛1~n编号,求所有牛中到x编号去的最短路+回来的最短路的最大值. ...
002-官网安装openstack之-安装基础服务
安装openstack基础服务 1.控制节点安装时间同步服务(chrony) (1)时间同步大体来说有两种方式: 一种是自己搭建时间同步服务器,各个需要同步时间的节点,与其同步时间另一种则是使用nt ...
Sql语句中Like嵌套用法
一般的Like用法: SELECT U_NAME FROM T_USER WHERE U_NAME LIKE '%A%' 但是,我此次like关键字后面的对应值是一个变量,需要用select语句来实现 ...
hdu3625
hdu3625 题意: 酒店发生一起谋杀案.作为镇上最好的侦探,您应该立即检查酒店的所有N个房间.但是,房间的所有门都是锁着的,钥匙刚锁在房间里,真是个陷阱!您知道每个房间里只有一把钥匙,并且所有可能 ...
实现：调用API函数ShowWindow()来隐藏窗口
只需要将相应代码复制即可. 代码如下: #include <iostream> #include <windows.h> int main() { HWND hDos; //声 ...
Clickhouse 性能瓶颈排查 IO过高
前几天公司clickhouse 有个查询很慢.经理一直追问为什么慢是cpu 不够还是IO 占用太高,还是其他的原因.于是有了以下的排查执行该条,在不考虑优化sql 的情况下进行性能排查 1.首 ...