HTML＆CSS：制作简易电商网站
2024-04-30 15:36:21
最近开始学习了写前端，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盒子模型规范的游览器行为。
HTML＆CSS：制作简易电商网站相关推荐
- 电商html轮播动效,制作一个电商网站的轮播图效果
各位亲爱的伙伴们 大家周末愉快 上次给大家写了 给猫猫制作简单的轮播图 收到了,小伙伴们一致吐槽,娜娜制作出来的这个轮播图不能动呀~.好吧说实话,那个本来就动不了.但是伙伴们的建议,我都收到了,那么今 ...
- html在线商城购物网站制作——基于HTML+CSS+JavaScript鲜花礼品电商网站
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- HTML5期末大作业：仿淘宝电商网站设计——仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业
HTML5期末大作业:仿淘宝电商网站设计--仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业 常见网页设计作业题材有 个人. ...
- HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript...
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 h ...
- HTML5期末大作业：电商网站设计——仿淘宝电商网站管理系统21页(含毕业设计论文7500字) HTML+CSS+JavaScript
HTML5期末大作业:电商网站设计--仿淘宝电商网站管理系统21页(含毕业设计论文7500字) HTML+CSS+JavaScript 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. ...
- HTML5响应式手机模板：电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板...
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 ht ...
- 使用jq实现电商网站“楼梯”效果制作（左侧显示楼层号、显示对应楼层信息）
使用jq实现电商网站"楼梯"效果制作 思路 : 1.点击左侧的楼层号 显示对应的楼层信息 操作当前点击的楼层号的高亮显示 点击不同楼层号 设置页面滚走的距离 为当前楼层距离内容窗口 ...
- HTML5响应式手机模板：电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 ht ...
- HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 h ...
- HTML+CSS 轮播图 电商网站注册界面 抽屉主页头部界面
[练习]HTML+CSS 作业要求1 京东首页轮播图,效果如下 jd轮播图 <!DOCTYPE html> <html lang="en"> <he ...
最新文章
- ASSERT(断言)的用法
- apk解密工具_手机端操作| Auto.js一键解密/一键加密工具免费分享
- vfast-全新的开始——荣新的第一天
- 前端使用 Nginx 反向代理彻底解决跨域问题
- Swift - 类型属性（类静态属性）和类方法（类静态方法）
- linux下的bc计算器设置scale精度
- 【SPFA】桐人的约会
- android 怎么自定义任务栈,Android中的Activity详解--启动模式与任务栈
- C++primer第九章 顺序容器 9.6 容器适配器
- Android 线程池对象-ThreadPoolExecutor浅析
- 信息安全工程师笔记-网络安全风险评估技术原理与应用
- Python进阶(十四) logging标准库
- 用正则表达式验证联系电话（及区号）
- meta-data介绍
- 江宁地区吃喝玩乐全攻略！
- Halcon之图像采集II
- 软件测试面试题【变态逻辑题】，盘点那些大厂面试必出变态逻辑题
- 2023年，如何管理你的绩效目标？
- cocos2dx-lua制作新手引导
- 一个投资者想要的真正的DAO-Revolution DAO