HTML＆CSS：制作简易电商网站

最新推荐文章于 2024-06-20 14:45:51 发布
最新推荐文章于 2024-06-20 14:45:51 发布
阅读量1.5w 收藏 203
点赞数 22
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/he13733625052/article/details/104663670
版权

最近开始学习了写前端，HTML和CSS是前端的基础，所以用他们制作了一个简单的电商网站，目的在于细节学习和打牢基础。

先附上Code。 

链接：https://pan.baidu.com/s/1PkgHUghworqcus0LwAuFDw
提取码：b672

部分图：

 

 Code：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css-.CSS">
<title>淘宝网</title>

</head>

<body >
<div class="bjcolor  clearf ">

<div class="container">

<div class="fl col-5 ">
    <a class="item-1" href="">亲，请登录</a>
    <a class="item" href="">免费注册</a>
</div>

<div class="fr col-3">
    <a class="item" href="">购物车</a>
    <a class="item" href="">收藏夹</a>
    <a class="item" href="">卖家中心</a>
    <a class="item" href="">联系客服</a>
</div>
</div>
</div>

<div class="search clearf"> 
    <div class="container">
        <div class="col-2 giff fl">
            淘宝网
        </div>
        <div class="col-5 search-bk fl">
            <input type="text">
            <button>搜索</button>
        </div>
    </div>
</div>

<div class="advert clearf">
    <div class="container">
        <div class="col-2 advert-fl fl">
            <div class="item">item/item/item</div>
            <div class="item">item/item/item</div>
            <div class="item">item/item/item</div>
            <div class="item">item/item/item</div>
            <div class="item">item/item/item</div>
            <div class="item">item/item/item</div>
            <div class="item">item/item/item</div>
            <div class="item">item/item/item</div>
            <div class="item">item/item/item</div>
            <div class="item">item/item/item</div>
        </div>
        <div class="col-6 fl">
            <img src="C:\Users\M\Desktop\新建文件夹\timg.jpg" alt="">
            <div class="col-5 fl">
                <img src="C:\Users\M\Desktop\新建文件夹\1.jpg" alt="">
            </div>
            <div class="col-5 fl">
                <img src="C:\Users\M\Desktop\新建文件夹\2.jpg" alt="">
            </div>
        
        </div>
        <div class="col-2 advert-dl  fl">
            <div class="dl-hy">
                <div class="dl-tp"><img src="C:\Users\M\Desktop\新建文件夹\0.jpg" alt=""></div>
                Hi!你好
            </div>
            <div class="dl-butt">
                <a class="time" href="">注册</a> 
                <a class="time" href="">登录</a>
                <a class="time" href="">开店</a>
            </div>
            <div class="dl-gg">
            <div class="gg-g">公告</div>
                长亭外，古道边，芳草碧连天。晚风拂柳笛声残，夕阳山外山。
                天之涯，地之角，知交半零落。一壶浊酒尽余欢，今宵别梦寒。
                长亭外，古道边，芳草碧连天。问君此去几时还，来时莫徘徊。
                天之涯，地之角，知交半零落。人生难得是欢聚，惟有别离多
                长亭外，古道边，芳草碧连天。晚风拂柳笛声残，夕阳山外山。
                天之涯，地之角，知交半零落。一壶浊酒尽余欢，今宵别梦寒。
                长亭外，古道边，芳草碧连天。问君此去几时还，来时莫徘徊。
                天之涯，地之角，知交半零落。人生难得是欢聚，惟有别离多
        </div>
        </div>
     </div>
</div>
<div class="container itemize">
    <div class="clearf">
        <div class="title">女装</div>
        <div class="ize-giff">
            <div class="col-2  fl timee">
                <div class="card"></div>
            </div>
            <div class="col-3 fl timee" >
                <div class="card"></div>
            </div>
            <div class="col-2 fl timee">
                <div class="card"></div>
            </div>
            <div class="col-3 fl timee">
                <div class="card"></div>
            </div>
        </div>
    </div>
</div>
<div class="container itemize">
    <div class="clearf">
        <div class="title">男装</div>
        <div class="ize-giff">
            <div class="col-2  fl timee">
                <div class="card"></div>
            </div>
            <div class="col-3 fl timee" >
                <div class="card"></div>
            </div>
            <div class="col-2 fl timee">
                <div class="card"></div>
            </div>
            <div class="col-3 fl timee">
                <div class="card"></div>
            </div>
        </div>
    </div>
</div>
<div class="container itemize">
    <div class="clearf">
        <div class="title">童装</div>
        <div class="ize-giff">
            <div class="col-2  fl timee">
                <div class="card"></div>
            </div>
            <div class="col-3 fl timee" >
                <div class="card"></div>
            </div>
            <div class="col-2 fl timee">
                <div class="card"></div>
            </div>
            <div class="col-3 fl timee">
                <div class="card"></div>
            </div>
        </div>
    </div>
</div>
<div class="container itemize">
    <div class="clearf">
        <div class="title">潮牌</div>
        <div class="ize-giff">
            <div class="col-2  fl timee">
                <div class="card"></div>
            </div>
            <div class="col-3 fl timee" >
                <div class="card"></div>
            </div>
            <div class="col-2 fl timee">
                <div class="card"></div>
            </div>
            <div class="col-3 fl timee">
                <div class="card"></div>
            </div>
        </div>
    </div>
</div>
<div class="container itemize">
    <div class="clearf">
        <div class="title">促销</div>
        <div class="ize-giff">
            <div class="col-2  fl timee">
                <div class="card"></div>
            </div>
            <div class="col-3 fl timee" >
                <div class="card"></div>
            </div>
            <div class="col-2 fl timee">
                <div class="card"></div>
            </div>
            <div class="col-3 fl timee">
                <div class="card"></div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="foot">
       <div> text text text</div>
       <div>Whatever is worth doing is worth doing well.</div>
    </div>
</div>
</body>
</html>

 

* {
    -webkit-box-sizing: border-box;
box-sizing:border-box;
}
body
{
    font-size: 14px;
    color: #444444;
    background: #f9f9f9;
  
}
.container{
   display: block;   /*  显示 */
    max-width: 1080px;
     margin: 0 auto;  /*外边距 */
}
a{
    text-decoration: none;  /*  消除链接下划线  */
}
img {
    display: block;
    max-width: 100%;
}
.clearf:after,
.clearf:before
{
    content: "";
    display: block;
    clear: both;
}
.fl{
    float: left;
}
.fr{
    float: right;
}

.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%;
}
.col-10{

    display: block;
    position: relative;
    min-height: 1px;
}
.bjcolor{
    background: #eee;
}
.bjcolor .item{
    display: inline-block;   
   padding: 6px 10px;     /*  填充 */
    color: #666;
}
.bjcolor .item-1{
    display: inline-block;   
    padding: 6px 10px;     /*  填充 */
     color: #dd182b;
}
 .bjcolor .item:hover{    /*鼠标触摸颜色加重 */
    color:#444;  
}
.search{
    display:block;
   padding: 20px 0;
}
.search .giff{
    font-size: 30px;
}
.search .search-bk {
    border:2px solid #dd182b;
}
.search .search-bk input,
.search .search-bk button{
    display: block;
    float: left;    
      border: 0; /*  边框 */
    padding: 10px;
    font-size: 20px;
}
.search .search-bk input {
    width: 80%;
}
.search .search-bk button {
    width: 20%;
    background: #dd182b;
}
.advert{
    background: #cccccc;
}
.advert .advert-fl{
    background:#6e6568;
    color: #ffffff;
}
.advert .advert-fl .item{
    padding: 17px 17px;
    
}
.advert .advert-fl .item:hover{
    color: #555555;
}
.advert .advert-dl .dl-hy{
    background: #6e6568;
   line-height: 100px; 
   color: #ffffff;
}
.advert .advert-dl .dl-hy .dl-tp{
    float: left;
    margin-right: 20px;
    
}
.advert .advert-dl .dl-butt{
    float: left;
    padding: 20px;
    background: #6e6568;
}
.advert .advert-dl .dl-butt .time{
    padding: 8px;
    color: #dd182b;
    font-size: 20px;
}
.advert .advert-dl .dl-gg 
{
    padding: 10px;
    background: #6e6568;
    color: #ffffff;
}
.advert .advert-dl .dl-gg .gg-g
{
    margin-left: 70px;
    padding: 13px;
    color: #dd182b;
}
.itemize{
    display:block;
}
.itemize .title::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 5px;
    height: 25px;
    background: #dd182b;
    padding-right: 5px;
    margin-right: 10px;
}
.itemize .title{
    font-size: 22px;
    margin-top: 20px;
}
.itemize .ize-giff{

}
.itemize  .timee
{
    padding: 10px;

}
.itemize .card{
    height: 300px;
    background: #cccccc;
    border-radius: 10px;

}
.foot{
    color: #999999;
    margin-top: 20px;
    padding: 10px;
     text-align: center; /* 字体居中 */
    background: #eee;
}

 box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。

风不会停息_H
关注
  • 22
    点赞
  • 踩
  • 203
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML5期末大作业：仿淘宝电商网站设计——仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业
11-25 1306
HTML5期末大作业：仿淘宝电商网站设计——仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网
div+css静态网页设计 电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
qq_524614081的博客
06-16 2051
HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求,
简易的电商HTML
12-08
简易的电商HTML
制作电商页面（Html）
jjlkjjlk的博客
10-05 2092
HTML制作电商网页
基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城
有问必答，欢迎打扰，项目开发，网页设计
06-20 263
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
html在线商城购物网站制作——基于HTML+CSS+JavaScript鲜花礼品电商网站
qq_365392777
11-13 2489
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作...
HTML+CSS商城网站
weixin_64537406的博客
01-23 1168
具体内容结构，包括头部导航栏、搜索栏、主要内容区域、产品展示和页脚等部分。通过这段代码，可以看出页面包括了导航栏、搜索框、主要内容展示区域和产品展示区域，同时也指定了页面的样式表和图标。这是一个简单的 HTML 页面代码，描述了一个网站的结构。其中包括了网站的标题、导航栏、搜索栏、主要内容区域、产品展示和页脚等部分。
html+css+js实现一个简单的电商商城首页
热门推荐
小文跟你拼了
06-15 6万+
ps：慕课网学习过程中的实践小积累，用html+css+js实现了一个简单的商城首页
HTML+CSS简单应用实例——购物网站的制作（一）
m0_67393593的博客
03-11 2193
HTML+CSS简单应用实例——购物网站的制作（一） 这是一个用CSS、HTML、JS制作的简单的购物网站，这篇文章是主页，在后面文章中依次有登录页、商品页、客服页面等。有很多不足之处，希望大家能给我指出来。 先看一下效果图。 （所有图片都是从淘宝、京东、唯品会搜的） 分析：最上方是DIV+列表，注册可以点进去进入注册页面。下面服饰区、美妆区部分是列表，其中又嵌套了列表。今日推荐部分是一个大表格，导航栏部分是一个小表格，位置设为固定。最下方是一个脚本，用DIV做成。 下面是具体代码： <!DO
一篇文章教你使用html+css开发商业网站
烛照@123的博客
11-19 1337
html和css是学习前端开发很重要的一点
HTML+CSS+JS构建的电商网站页面（源码）
07-14
在本项目中，"HTML+CSS+JS构建的电商网站页面（源码）"是一个针对初学者和学生设计的Web前端开发实践项目。这个项目利用HTML、CSS和JavaScript这三种核心技术来创建一个基本的电商网站界面，是学习前端开发的重要...
用HTML+CSS+JS构建的电商网站页面平台（完整代码），web前端CSS入门项目 简易读懂，适合学生以及课程报告参考用
06-11
2. 所有页面中包含的 CSS3 效果种类总数至少为3，包含变形和过渡效果等。 3. 不使用网络上的 css,文件、js,文件，纯手写。...5. 网站从零开始制作，使用原生代码完成。不允许使用任何 CSS 库和 JavaScript 库。
制作一个简单HTML电影网页设计（HTML+CSS）
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现面.md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
简易电子商务网站
06-25
6. **前端开发**：使用HTML、CSS和JavaScript构建用户界面，使网站具有良好的用户体验。响应式设计可以确保网站在不同设备上正常显示。同时，前端需要与后端通过API接口进行交互，如获取商品列表、处理购物车操作、...
HTML+CSS实现淘宝首页
道阻且长，行则将至。
01-03 3万+
一、HTML+CSS实现淘宝首页 仿写淘宝页面，趁着元旦假期终于把这个淘宝页面给做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦，我会不定期的跟大家分享文章。 二、页面结构如下： ...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
最新发布
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
精通HTML&CSS：构建专业网站设计
"HTML&CSS Design and Build Websites...通过阅读这本书，读者不仅可以学习到HTML和CSS的基础知识，还能了解如何结合这些技术来创建美观、功能完善的网站。此外，精美的排版设计也能提升阅读体验，使学习过程更加愉快。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值