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

随机推荐

Java自动化环境搭建笔记（1）
Java自动化环境搭建笔记(1) 自动化测试先搭建java接口测试的环境: 使用mvn命令构建项目测试集通过testNG.xml组织并运行测试数据解耦,通过Excel等文件提供基础依赖创建m ...
linux系统中如何查看最后一封mail
1. mail命令查看邮件列表 2.file 命令查看一共多少封邮件 3.直接键入278 查看最后一封邮件内容 4. 输入q 从邮件阅读模式退出
Kotlin反射操纵构造方法与伴生对象
反射操纵伴生对象: 先定义一个伴生对象: 然后咱们通过反射来调用一下它: 比较简单. 反射操纵构造方法: 先来定义一个类: 然后咱们通过反射来调用一个其中的方法,之前当然就得先来调用构造方法,由于我们 ...
51nod 2502 最多分成多少块
小b有个长度为n的数组a,她想将这个数组排序. 然而小b很懒,她觉得对整个数组排序太累了,因此她请你将a分成一些块,使得她只需要对每一块分别排序,就能将整个数组排序. 请问你最多能把a分成多少块. 保 ...
spring配置文件ApplicationContext.xml里面class等没有提示功能
实现效果: 解决方法: windows–>preference—>myeclipse—>files and editors–>xml—>xmlcatalog 点击add ...
CORS 跨域 node |XMLHttpRequest 跨域提交数据 node
node服务端 app.post('/getdata',function(req,res,next){ req.setEncoding('utf8'); res.setHeader('Access-C ...
[Javascript] Use requestIdleCallback to schedule JavaScript tasks at an optimal time
JavaScript is single-threaded, which can present some problems when creating an interactive user exp ...
tensorflow2.0 学习（二）
线性回归问题 # encoding: utf-8 import numpy as np import matplotlib.pyplot as plt data = [] for i in range ...
【转载】Visual Studio Code 构建 C/C++ 开发环境
https://www.cnblogs.com/XieSir/articles/8288051.html 1. 安装 MinGW Distro / MinGW / GNU GCC 中的任何一款,( W ...
hibernate工具类
因为hibernate的代码大部分都是固定的,为了将减少重复的代码的书写,可以将这些代码封装为一个工具类,获取hibernate的session对象. 1.工具类: package pers.zhb. ...