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

随机推荐

002-官网安装openstack之-安装基础服务
安装openstack基础服务 1.控制节点安装时间同步服务(chrony) (1)时间同步大体来说有两种方式: 一种是自己搭建时间同步服务器,各个需要同步时间的节点,与其同步时间另一种则是使用nt ...
LightOJ - 1333 - Grid Coloring
链接: https://vjudge.net/problem/LightOJ-1333 题意: You have to color an M x N two dimensional grid. You ...
SpringBoot学习（五）RSocket和Security
一.RSocket RSocket是一个用于字节流传输的二进制协议.它通过在单个连接上传递异步消息来支持对称交互模型,主要支持的通讯层包括 TCP, WebSockets和Aeron(UDP). RS ...
13-Flutter移动电商实战-ADBanner组件的编写
1.AdBanner组件的编写我们还是把这部分单独出来,需要说明的是,这个Class你也是可以完全独立成一个dart文件的.代码如下: 广告图片class AdBanner extends Stat ...
全局异常捕获处理-@ControllerAdvice+@HandleException
涂涂影院管理系统这个demo中有个异常管理的标签,用于捕获涂涂影院APP用户异常信息 ,有小伙伴好奇,排除APP,后台端的是如何处理全局异常的,故项目中的实际应用已记之. 关于目前的异常处理在使用 ...
learning java FileInputStream
public class FileInputStreamTest { public static void main(String[] args) throws IOException { var f ...
hibernate的持久化类、主键生成策略
一.hibernate的持久化类 1.什么是持久化类: 持久化:将数据存储到关系型数据库. 持久化类:与数据库中的数据表建立了某种关系的java类.(持久化类=javabean+映射配置文件) 2.持 ...
tomcat 配置域名证书
tomcat 配置域名证书示例: <!--" protocol="HTTP/1.1" connectionTimeout=" redirectPort= ...
Cocos Creator打包发布
若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理. 请点赞!因为你们的赞同/鼓励是我写作的最大动力! 欢迎关注达叔小生的简书! 这是一个有质量 ...
YoTube 视频如何下载
因我学习自动化测试 ,国内的C# selenium 搭建的环境的资料甚少,然后去国外网站找资料, 曹鼠给我的gogle安装一个下载YoTube视频插件,特此非常感谢他. 前提条件需要一个服务器:Sha ...