前端基础 - 案例二：酱品购电商网站首页（精简版）
2024-05-11 07:00:34
酱品购电商网页–精简版
HTML ：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="main.css">
</head><body><div class="nav"><div class="photo"><img src="data:images//logo.png" alt="英莱特"></div><div class="word"><span><a href="#"><strong>首页</strong></a></span><span><a href="#"><strong>课程</strong></a></span><span><a href="#"><strong>职业规划</strong></a></span></div><div class="button"><input type="text"><div class="button1"><button><img src="data:images/btn.png" alt=""></button></div></div><div class="photo1"><img src="data:images/user.png" alt="user"><span>qq-lilei</span></div></div><div class="inf"><div class="inf1"><div class="nav1"><ul><li><a href="#">前端设计 ></a></li><li><a href="#">前端设计 ></a></li><li><a href="#">前端设计 ></a></li><li><a href="#">前端设计 ></a></li><li><a href="#">前端设计 ></a></li><li><a href="#">前端设计 ></a></li><li><a href="#">前端设计 ></a></li><li><a href="#">前端设计 ></a></li><li><a href="#">前端设计 ></a></li></ul></div><div class="nav2"><div class="nav3"><h3>我的课程表</h3></div><ul><li class="word1"><strong>继续学习 程序语言设计</strong></li><li><p>正在学习使用对象</p></li><hr><li class="word1"><strong>继续学习 程序语言设计</strong></li><li><p>正在学习使用对象</p></li><hr><li class="word1"><strong>继续学习 程序语言设计</strong></li><li><p>正在学习使用对象</p></li><hr><button><strong>全部课程</strong></button></ul></div></div></div><div class="inf_one"><a href="#" class="name"><strong> 精品推荐</strong></a><span>|</span><a href="#">jQuery</a><span>|</span><a href="#">jQuery</a><span>|</span><a href="#">jQuery</a><span>|</span><a href="#">jQuery</a></div><div class="sub"><h3>精品推荐</h3></div><div class="cont"><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div></div><div class="bottom"><div class="bottom3"><div class="bottom1"><div class="images3"><img src="data:images/logo.png" alt=""></div><p>英莱特在线教育致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</p><p>© 2017年XTCG Inc.保留所有权利。-陕ICP备15025210号</p><button>下载APP</button></div><div class="bottom2"><div class="li1"><ul><p>关于英莱特</p><li>关于</li><li>管理团队</li><li>工作机会</li><li>客户服务</li><li>帮助</li></ul></div><div class="li1"><ul><p>关于英莱特</p><li>关于</li><li>管理团队</li><li>工作机会</li><li>客户服务</li><li>帮助</li></ul></div><div class="li1"><ul><p>关于英莱特</p><li>关于</li><li>管理团队</li><li>工作机会</li><li>客户服务</li><li>帮助</li></ul></div></div></div></div>
</body></html>
CSS ：
* {margin: 0;padding: 0;
}body {background-color: #ffffff;/* overflow: hidden; */
}.top {height: 34px;background-color: #f1f1f1;overflow: hidden;
}.top_1 {width: 1200px;height: 37px;margin: 0 auto;/* background-color: blue; */
}.top_word {height: 31px;float: left;
}.top_word span {font-size: 11px;color: #666666;
}.top_word .user {font-size: 13px;color: #c81623;
}.top_list {height: 31px;float: left;float: right;/* background-color: red; */margin-top: 6px;
}.top_list li {float: left;list-style: none;
}.top_list li a,
li {font-size: 11px;margin-left: 14px;color: #666666;text-decoration: none;
}.nav {width: 1201px;height: 106px;margin: 25px auto 0;overflow: hidden;
}.nav_logo {width: 219px;height: 57px;float: left;
}.nav_sousuo {width: 753px;height: 60px;float: left;
}.nav_sousuokuang {width: 547px;height: 35px;margin: 0 auto;background-color: blue;
}.nav_sousuokuang input {width: 460px;height: 35px;margin: 0 auto;float: left;
}.nav_sousuokuang button {width: 83px;height: 39px;margin: 0 auto;float: left;
}.nav_list {height: 25px;width: 547px;margin: 0 auto;/* background-color: blue; */overflow: hidden;
}.nav_list ul li {list-style: none;float: left;margin-left: 26px;
}.nav_list ul li a {text-decoration: none;font-size: 11px;color: #666666;
}.nav_list ul .one a {color: #c81623;
}.nav_shop {width: 180px;height: 55px;float: left;margin: 0 0px 0 27px;
}.nav_shop button {width: 140px;height: 34px;background-color: #f7f7f7;border: 1px solid #dfdfdf;
}.fenlei {width: 1201px;height: 47px;margin: 0 auto;overflow: hidden;
}.fenlei_one {width: 210px;height: 47px;background-color: #b1191a;text-align: center;float: left;
}.fenlei_one span {color: #f1dfdf;line-height: 42px;
}.fenlei_two {width: 730px;height: 47px;float: left;margin-left: 10px;
}.fenlei_two ul li {list-style: none;float: left;
}.fenlei_two ul li a {text-decoration: none;color: #5d5d5d;font-size: 18px;margin-left: 25px;line-height: 42px;
}hr {border: 2px solid #b1191a;background-color: #b1191a;
}.xinxi {width: 1201px;height: 467px;margin: 0 auto;overflow: hidden;
}.xinxi_one {width: 210px;height: 467px;background-color: #c81623;float: left;
}.xinxi_one ul li {list-style: none;margin-top: 5px;
}.xinxi_one ul li a {font-size: 14px;color: #f1dfdf;text-decoration: none;line-height: 26px;
}.xinxi_two {width: 720px;height: 467px;float: left;margin-left: 10px;margin-top: 11px;
}.xinxi_list {width: 251px;height: 164px;margin-top: 10px;float: left;margin-left: 10px;
}.xinxi_list ul li {list-style: none;
}.xinxi_list p {font-size: 14px;border-bottom: 1px dashed #e8e8e7;line-height: 30px;margin-left: 20px;
}.xinxi_list ul li {font-size: 12px;line-height: 25px;
}.xinxi_list ul li span {font-weight: 600;
}.xinxi_img {width: 251px;height: 290px;float: left;margin-left: 10px;margin-top: 2px;
}.tuijian {width: 1201px;height: 163px;margin: 10px auto 0;background-color: #ebebeb;
}.tuijian_one {width: 240px;height: 163px;float: left;
}.tuijian_two {width: 240px;height: 163px;float: left;
}.tuijian_three {width: 130px;height: 163px;float: left;
}.tuijian_three p {font-size: 17px;
}.tuijian_three .one {line-height: 50px;
}.tuijian_three .two {background-color: #00a0e8;color: white;float: left;
}.tuijian_three .three {font-size: 14px;color: #878787;text-align: left;display: inline-block;
}.tuijian_four {width: 110px;height: 163px;float: left;margin-top: 25px;
}.tuijian_four img {width: 110px;
}.biaoti {width: 1201px;height: 60px;margin: 0 auto;text-align: left;overflow: hidden;
}.biaoti span {font-size: 22px;font-weight: 600px;
}.biaoti p {font-size: 17px;margin-left: 10px;
}.biaoti div {float: left;float: right;
}.shangpin {width: 1201px;height: 235px;margin: 10px auto 0;/* background-color: burlywood; */border: 1px solid #ededed;overflow: hidden;
}.shangpin_one {width: 200px;height: 235px;float: left;/* background-color: blue; */
}.one_img {width: 200px;height: 162px;text-align: center;
}.one_img img {margin-top: 15px;
}.two_img {width: 164px;height: 45px;margin-left: 36px;/* background-color: chartreuse; */border-right: 1px solid #ededed;
}.two_img span,
p {/* margin-left: 36px; */font-size: 12px;color: #666666;
}.two_img span {width: 113px;
}.two_img p {font-size: 17px;color: #df3033;
}.one_img .three_img {margin-top: 60px;
}.biaoti_two {width: 1201px;height: 60px;margin: 0 auto;text-align: left;overflow: hidden;
}.biaoti_two span {font-size: 22px;font-weight: 600px;
}.wupin {width: 1201px;height: 405px;margin: 0px auto;
}.wupin_one {width: 404px;height: 405px;float: left;
}.wupin_two {width: 797px;height: 405px;float: left;
}.buttom {width: 100%;height: 421px;margin-top: 15px;background-color: #f5f5f5;overflow: hidden;
}.buttom-1 {width: 1201px;height: 421px;margin: 0 auto;overflow: hidden;
}.img1 {width: 240px;height: 120px;float: left;margin: 10px auto 0;/* background-color: violet; */overflow: hidden;
}.img12 {width: 88px;height: 120px;/* background-color: red; */float: left;
}.img12 img {margin: 30px 0 0 40px;
}.img13 {width: 110px;height: 40px;float: left;/* background-color: royalblue; */margin-top: 36px;margin-left: 5px;
}.wenzi-1 {width: 100px;height: 184px;float: left;/* background-color: royalblue; */margin-left: 100px;overflow: hidden;
}.wenzi-1 dt {font-size: 19px;font-weight: 600;line-height: 40px;
}.wenzi-1 dd {font-size: 15px;
}.buttom-10 {width: 1201px;height: 47px;margin: 300px auto 0px 0px;padding-left: 60px;border-top: 1px solid #878787;/* background-color: black; */
}.buttom-10 ul li {list-style: none;float: left;margin-left: 15px;
}.buttom-1 p {text-align: center;
}.clear {clear: both;
}
前端基础 - 案例二：酱品购电商网站首页（精简版）相关推荐
- 项目二《品优购电商网站》
项目二 <品优购电商项目开发> 文章目录 项目二 <品优购电商项目开发> 前言 一.网站 favicon 图标 制作favicon图标 二.TDK三大标签SEO优化 SEO T ...
- 【愚公系列】2022年11月 微信小程序-优购电商项目-首页设计
文章目录 前言 一.首页设计 1.首页的业务逻辑 2.涉及的接口数据 3.关键技术 二.首页相关代码 1.⾃定义组件搜索框 2.wx.request封装 3.首页页面 4.效果 前言 对于小程序电商首 ...
- CSS综合案例-品优购电商04
目录 1. 品优购项目(四) 1). 详情页 detail.html 常用单词 2). 面包屑导航 3). 产品介绍 模块 4). 预览区域制作 3.1 preview_list 制作 5). 产品详 ...
- 【仿淘宝首页】前端网页模板，大学生前端作业分享，html5+css电商网站模板，包含js动效
直接上代码 <!doctype html> <html lang="en"><head><meta charset="UTF-8 ...
- 电商网站 首页三级分类的分类检索 vue前端关键代码
goSearch(event){//event.target:获取到的是发出事件的元素(div,h3,a,em,dt,dl)let node=event.target;//给 a 标签添加自定义属性d ...
- java实现商品的分类_电商网站首页商品分类列表功能实现
首先我们看下这个功能实现的效果: 后期理解补充: 其实这个功能的关键点就是分析这个模块的数据格式怎么样的? 对于这种商品列表展示的功能: 我们思路如下: 第一:开始展示的都是顶级列表,即parentI ...
- react基础06--react综合案例-电商网站导航
react基础06--react综合案例-电商网站导航 1 介绍 2 案例设计模块 2.1 分类导航数据模型设计 2.2 一级分类导航切换高亮效果 2.3 显示二级分类导航 2.4 路由跳转到二级导航 ...
- Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
- 项目案例——电商网站
初学程序结构写的一个简单网站,使用了大量的循环语句,代码重复较多,因此参考度不大. 下面是完整代码: """ 用户登录的电商网站 """ # ...
最新文章
- 简单点赞效果html,js实现点赞效果
- Lyft无人车战略揭秘：两个团队并行，用百度Apollo，想定行业标准
- The summary of Interview
- selenium-绕过登录
- linux全盘备份命令,Linux系统磁盘分区备份的操作
- 基于spring boot的Java开源商城系统（附完整版源码）
- 六爻预测，前沿科学？伪科学？
- 元禾谷风创投：如何避开Magic Leap这种深度科技投资的大坑
- 前辈们的面试经验总结——对于BAT等企业如何面试之面试流程及问题解析、以及面试时的基本礼仪及着装
- 计算机安全凭据,4776 (S、F) 计算机尝试验证帐户的凭据。 (Windows 10) - Windows security | Microsoft Docs...
- 【C语言】交换函数（swap）
- 红轴和茶轴哪个适合游戏 红轴和茶轴哪个手感好
- 物种多样性学习之Beta多样性
- 从优秀到卓越---刺猬理论
- Java架构师视频+授课资料
- 硬件设计【1】——光耦的基本原理及TLP521使用
- 学计算机要Ghz,ghz是什么意思,电脑ghz是什么意思？
- 详细介绍Android中Parcelable的原理和使用方法
- vs2013 + QT: release时 提示“无法找到.exe的调试信息 或者调试信息不匹配 未使用调试信息生成二进制文，是否继续调试”
- 纯手写F3飞控的直升机固件(2.直升机倾斜盘混控了解)