电商网页设计(html+css)

已于 2024-04-02 19:03:13 修改
阅读量885 收藏 3
点赞数 1
文章标签： html css 前端
于 2024-02-19 14:55:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L221304/article/details/136170421
版权

 html+css基础阶段

图中图标自行搜索。 

代码如下： 

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

  <link rel="stylesheet" href="./font_4430436_bm4n39ogusv/iconfont.css">

  <link rel="stylesheet" href="./demo.css ">

</head>

<style>

    @font-face {

  font-family: "iconfont"; /* Project id 4430436 */

  src: url('iconfont.woff2?t=1708307539808') format('woff2'),

       url('iconfont.woff?t=1708307539808') format('woff'),

       url('iconfont.ttf?t=1708307539808') format('truetype');

}

.iconfont {

  font-family: "iconfont" !important;

  font-size: 16px;

  font-style: normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

.icon-dianhua:before {

  content: "\e602";

}

.icon-lieri:before {

  content: "\e600";

}

.icon-fangzi:before {

  content: "\e60f";

}

.icon-fangkuai:before {

  content: "\e6de";

}

.icon-weibiaoti1:before {

  content: "\e60c";

}

.icon-paihang:before {

  content: "\e736";

}

.icon-benyuedingdanshuliang:before {

  content: "\e631";

}

.icon-chanpinguanli:before {

  content: "\e703";

}

.icon-shixinwujiaoxing:before {

  content: "\e626";

}

.icon-Leaves:before {

  content: "\e6a3";

}

.icon-a-tupianyihuifu-53:before {

  content: "\e610";

}

.icon-arrdown1:before {

  content: "\e601";

}

*{

    margin: 0;

    padding: 0;

}

li{

    list-style: none;

    box-sizing: border-box;

}

.div{

    box-sizing: border-box;

}

.a{

    width: 1200px;

    height: 90px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

}

.aleft div:nth-child(1){

    font-size: 36px;

    font-weight: bold;

}

.aleft div:nth-child(2){

    color:gray;

}

.aright{

    display: flex;

    width: 810px;

    justify-content: space-between;

}

.aright>ul{

    display: flex;

    width: 490px;

    justify-content: space-between;

    align-items: center;

    color:#565656;

    font-size: 22px;

}

.a11{

    font-size: 34px;

    text-align: right;

    color:#d5ded5;

}

.a1{

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.a1 div:nth-child(1){

    font-size: 18px;

    color: red;

}

.a1 div:nth-child(2){

    width: 285px;

    border:1px none gray;

    border-radius: 15px;

    font-size: 22px;

    color: red;

    text-align: center;

}

.b{

    width: 100%;

    height: 780px;

}

.again{

    text-align: center;

}

.again div:nth-child(1){

    font-size: 36px;

    margin-bottom: 28px;

}

.again div:nth-child(2){

    font-size: 18px;

    margin-bottom: 48px;

}

.again div:nth-child(3){

    width: 74px;

    height: 6px;

    background-color: red;

    margin: 0 auto;

}

.c{

    height: 864px;

    padding-top: 70px;

    background-color: #f7f7f7;

}

.c_t{

    font-size: 26px;

    text-align: center;

    margin-top: 45px;

    margin-bottom: 190px;

}

.c>ul{

    width: 1045px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

}

.c>ul>li{

    width: 224px;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.c>ul>li div:nth-child(1){

    width: 100px;

    height: 100px;

    border: 1px solid;

    border-radius: 50%;

    text-align: center;

    line-height: 100px;

    margin-bottom: 44px;

}

.c>ul>li div:nth-child(2){

    font-size: 20px;

    margin-bottom: 32px;

}

.c>ul>li div:nth-child(3){

    font-size: 30px;

}

.c>ul>li:hover{

    color: red;

}

.c11{

    font-size: 40px;

}

.d{

    height: 830px;

    padding-top: 60px;

}

.d>.again{

    margin-bottom: 166px;

}

.d>ul{

    width: 983px;

    display: flex;

    justify-content: space-between;

    margin: 0 auto;

}

.d>ul>li{

    text-align: center;

}

.d>ul>li div:nth-child(1){

    margin-bottom: 38px;

}

.d>ul>li div:nth-child(2){

    font-size: 30px;

}

.d11{

    font-size: 60px;

}

.d>.d1{

    margin-bottom: 100px;

}

.d>ul>li:hover span{

    color:red;

}

.e{

    height: 818px;

    background-color: #f2f6f9;

    padding-top: 70px;

}

.e>.again{

    margin-bottom: 45px;

}

.e1{

    width: 400px;

    font-size: 28px;

    display: flex;

    margin: 0 auto;

    margin-bottom: 112px;

}

.e1>div{

    width: 200px;

    height: 62px;

    border: 2px solid red;

    text-align: center;

    line-height: 62px;

}

.e1 div:nth-child(1){

    background-color: red;

    color: #fff;

}

.e2{

    width: 895px;

    display: flex;

    justify-content: space-between;

    margin: 0 auto;

}

.e2>li{

    width: 248px;

    display: flex;

    flex-direction: column;

    text-align: center;

    align-items: center;

}

.e2>li div:nth-child(1){

    width: 102px;

    height: 145px;

    margin-bottom: 30px;

}

.e2>li div:nth-child(2){

    font-size: 30px;

    margin-bottom: 20px;

}

.e2>li div:nth-child(3){

    font-size: 20px;

}

.e3{

    width: 1100px;

    height: 554px;

    margin: 0 auto;

}

.f{

    background-color: #fff;

    height: 1674px;

}

.f>ul{

    width: 1147px;

    height: 500px;

    display: flex;

    margin: 0 auto;

    flex-wrap: wrap;

    justify-content: space-between;

    margin-bottom: 166px;

}

.f>ul>li{

    width: 208px;

    height: 84px;

    border: 2px solid #d5ded5;

    margin-bottom: 40px;

}

.g{

    height: 343px;

    background-color: red;

    color: #fff;

    text-align: center;

    padding-top: 116px;

}

.g div:nth-child(1){

    font-size: 46px;

    margin-bottom: 20px;

}

.g div:nth-child(2){

    font-size: 20px;

    margin-bottom: 20px;

}

</style>

<body>

    <div class="a">

        <div class="aleft">

            <div>LOGO</div>

            <div>一站式电商解决方案</div>

        </div>

        <div class="aright">

            <ul>

                <li>网站首页</li>

                <li>核心服务</li>

                <li>合作商家</li>

                <li>联系我们</li>

            </ul>

            <div class="a1">

                <div>24小时热线</div>

                <div><span class="iconfont icon-dianhua a11"></span>028-XXXXXXXX</div>

            </div>

        </div>

    </div>

    <div class="b">

        <img src="./1.png" alt="">

    </div>

    <div class="c">

        <div class="again">

            <div>我&nbsp;们 &nbsp;能&nbsp;为&nbsp;你&nbsp;做&nbsp;什&nbsp;么</div>

            <div>WHAT&nbsp;CAN&nbsp;I&nbsp;DO&nbsp;FOR&nbsp;YOU</div>

            <div></div>

        </div>

        <div class="c_t">6年全渠道电商运营经验,核心服务于食品、药品、保健品、家电、冲调饮料、个护等类目的众多线上线下大牌。</div>

        <ul>

            <li>

                <div><span class="iconfont icon-Leaves c11"></span></div>

                <div>DATA</div>

                <div>全面的数据分析</div>

            </li>

            <li>

                <div><span class="iconfont icon-shixinwujiaoxing c11"></span></div>

                <div>OPERATION</div>

                <div>优秀的运营能力</div>

            </li>

            <li>

                <div><span class="iconfont icon-fangkuai c11"></span></div>

                <div>PLATFORM</div>

                <div>优质的平台资源</div>

            </li>

        </ul>

    </div>

    <div class="d">

        <div class="again">

            <div>您&nbsp;还&nbsp;在&nbsp;烦&nbsp;恼&nbsp;这&nbsp;些</div>

            <div>DON'T&nbsp;WORRY&nbsp;ABOUT&nbsp;THIS</div>

            <div></div>

        </div>

        <ul class="d1">

            <li>

                <div><span class="iconfont icon-benyuedingdanshuliang d11"></span></div>

                <div>订单数量</div>

            </li>

            <li>

                <div><span class="iconfont icon-chanpinguanli d11"></span></div>

                <div>产品管理</div>

            </li>

            <li>

                <div><span class="iconfont icon-arrdown1 d11"></span></div>

                <div>爆款打造</div>

            </li>

            <li>

                <div><span class="iconfont icon-fangzi d11"></span></div>

                <div>全网推广</div>

            </li>

        </ul>

        <ul>

            <li>

                <div><span class="iconfont icon-paihang d11"></span></div>

                <div>成本控制</div>

            </li>

            <li>

                <div><span class="iconfont icon-a-tupianyihuifu-53 d11"></span></div>

                <div>大促活动</div>

            </li>

            <li>

                <div><span class="iconfont icon-lieri d11"></span></div>

                <div>店铺运营</div>

            </li>

            <li>

                <div><span class="iconfont icon-weibiaoti1 d11"></span></div>

                <div>视觉聚焦</div>

            </li>

        </ul>

    </div>

    <div class="e">

        <div class="again">

            <div>我&nbsp;们&nbsp;的&nbsp;精&nbsp;英&nbsp;团&nbsp;队</div>

            <div>OUR&nbsp;SERVERS</div>

            <div></div>

        </div>

        <div class="e1">

            <div>团队实力</div>

            <div>MORE</div>

        </div>

        <ul class="e2">

            <li>

                <div><img src="./2.png" alt=""></div>

                <div>运营经验</div>

                <div>6年电商运营经验专业的团队,积累了丰富的平台运作经验和电商营销策略</div>

            </li>

            <li>

                <div><img src="./3.png" alt=""></div>

                <div>团队技术</div>

                <div>核心团队均有淘宝、天猫、天猫超市京东、京东自营网店营销培训从业经历</div>

            </li>

            <li>

                <div><img src="./4.png" alt=""></div>

                <div>优化推广</div>

                <div>我们绝不胡乱推广、开车,浪费客户资金，以核心技术为客户铸造高收益低成本的好店铺</div>

            </li>

        </ul>

    </div>

    <div class="e f">

        <div class="again">

            <div>我&nbsp;们&nbsp;的&nbsp;合&nbsp;作&nbsp;客&nbsp;户</div>

            <div>COOPERATION&nbsp; CUSTOMERS</div>

            <div></div>

        </div>

        <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

        <div class="again">

            <div>我&nbsp;们&nbsp;的&nbsp;合&nbsp;作&nbsp;案&nbsp;例</div>

            <div>COOPERATION&nbsp;CASE</div>

            <div></div>

        </div>

        <div class="e1">

            <div>更多案例</div>

            <div>MORE</div>

        </div>

       <div class="e3">

        <img src="./5.png" alt="">

       </div>

    </div>

    <div class="g">

        <div>LOGO</div>

        <div>一站式电商解决方案</div>

        <div>TEL:028-XXXXxxx&nbsp;/&nbsp;XXXXxXXxxxx</div>

    </div>

</body>

</html>

 压缩包如下：

代码仅供参考。 

月亮上的垂耳兔lg
关注
网页设计与制作（HTML+CSS）
T_personality的博客
12-12 2961
2.3 图像标记 1.图像的标记分为 2.相对路径和绝对路径 相对路径分为三种：图像文件和HTML文件在同一文件夹，只输入文件名字就可以。 图像文件在HTML文件下一级文件夹，输入文件夹名和文件名。 图像文件在HTML文件上一级文件夹，在文件名前面加入“…/”如果是上两级的话就要加“…/…/”。 3.1CSS核心基础 1.css的样式规则： 选择器样式：{属性1：属性1；属性2：属性2；…；} 2...
静态网页设计HTML+CSS的电商网站的静态网页设计.zip
12-17
静态网页设计HTML+CSS的电商网站的静态网页设计.zip 95分以上高分项目，下载即用无需修改。 静态网页设计HTML+CSS的电商网站的静态网页设计.zip 95分以上高分项目，下载即用无需修改。静态网页设计HTML+CSS的电商网站的静态网页设计.zip 95分以上高分项目，下载即用无需修改。静态网页设计HTML+CSS的电商网站的静态网页设计.zip 95分以上高分项目，下载即用无需修改。静态网页设计HTML+CSS的电商网站的静态网页设计.zip 95分以上高分项目，下载即用无需修改。静态网页设计HTML+CSS的电商网站的静态网页设计.zip 95分以上高分项目，下载即用无需修改。静态网页设计HTML+CSS的电商网站的静态网页设计.zip 95分以上高分项目，下载即用无需修改。静态网页设计HTML+CSS的电商网站的静态网页设计.zip 95分以上高分项目，下载即用无需修改。静态网页设计HTML+CSS的电商网站的静态网页设计.zip 95分以上高分项目，下载即用无需修改。静态网页设计HTML+CSS的电商网站的静态网页设计.zip 95分以上高分项目，下载即用无需修改
通用型HTML5电商网站模板
11-30
通用型HTML5电商网站模板是一款适合电子商务购物商城框架模板下载。
《响应式 Web 设计：纯 HTML 和 CSS 的实现技巧》
最新发布
asd4353012的博客
09-06 1894
响应式 Web 设计是现代网页设计的重要趋势，它可以确保网页在不同设备上都能提供良好的用户体验。在实现响应式 Web 设计时，需要掌握媒体查询、弹性布局、流式布局等技术，同时还需要遵循一些最佳实践，如优先考虑移动设备、保持简洁的布局、优化图像和媒体资源、使用响应式字体和提供良好的用户体验等。响应式 Web 设计可以确保网页在不同设备上都能呈现出最佳的布局和样式，满足用户的需求。在实现响应式 Web 设计后，需要在不同的设备上进行测试，确保网页在各种设备上都能正常显示和交互。可以使用响应式字体技术，如。
电商网站完整代码(前端+后端)
06-29
本资源仅供参考学习，侵权必究！。。。。。。。。。。。。。。
简易的电商HTML
12-08
简易的电商HTML
html+css-实战电商品优购网页制作_源码.zip
03-12
前端入门学习 HTML+CSS 实战-电商网页制作 index、list、detail、register四个页面的制作 对应css样式文件 重要截图xmind逻辑导图-对应核心代码
电商网站HTML
05-27
HTML电商湾站设计对于普通游客而言，他们只能够浏览天赐购物站中的商品，还能够查看商品的具体信息，但由于没有注册的和登录的原因，从而会失去本网站的一些服务。故我们提供了登录注册的功能，让游客可以花费一点点的时间就可以享受到这些服务。
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
电商类HTML界面
03-28
很简单的一款，适合基础学习，对于行业真实应用不是很好，但是可以参考思路
HTML5期末大作业：电商网站设计——仿淘宝电商网站管理系统21页(含毕业设计论文7500字) HTML+CSS+JavaScript
VX_WJ88950106的博客
07-18 3603
：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，整套电子商城静态模板，包含等等…非常精美的一整套静态网站模板总共21个页面。：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如： 等任意HTML软件编辑修改网页）。：网页布局整体为响应式布局、LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。：使用DIV+CSS制作网页, 背景图、音乐、
14种主页电商HTML模板
09-19
14种主页电商HTML模板
基于html5的电商网页设计.rar
12-29
关于电商网站的网页设计。 1. 制作一个电商网站，主题自定。 2. 使用HTML5+CSS3+JavaScript进行设计。 3. 站点结构清楚、完整，页面至少要有10个页面，三级链接，每个页面都要有返回主页的链接。其中，“站点说明”页面简要说明“站点说明”页面简要说明本站点的功能、画出站点结构图。 4. 网站中的所有页面宽度设置一致，宽度不小于1024px，首页高度不少于1屏。 5. 使用CSS 样式文件设置外观，各网页中的文字要求正文使用字体为“微软雅黑”，字号大小为 12px~14px ，其余文字字体、字号自定，各链接正确。 6. 网站有一定的静态表单内容页，如留言板页、注册页等。 7. 代码规范，命名合理。 8.页面内容丰富、主题明确、色彩协调、结构清晰，图片、音、视频等对象符合主题，其它各页的设计和制作要和首页保持相同的风格。
基于HTML5的电商网站的设计与开发
03-09
基于HTML5的电商网站的开发与设计，在此设计中用到了HTML，CSS，JS, jquery,
jsp简单电商网站设计源代码
07-02
简单的电商网站系统设计，实现功能、登陆、注册、购物车增删改、动态主页等等
电商网站前端源码
09-24
电商网站源码 功能挺全的 适合当作模板进行修改开发。
HTML+CSS+JS构建的电商网站页面（源码）
07-14
在本项目中，"HTML+CSS+JS构建的电商网站页面（源码）"是一个针对初学者和学生设计的Web前端开发实践项目。这个项目利用HTML、CSS和JavaScript这三种核心技术来创建一个基本的电商网站界面，是学习前端开发的重要...
一个简单的HTML网页 个人网站设计与实现 HTML+CSS+JavaScript自适应个人相册展示留言博客模板
08-10
这个项目的完成不仅有助于学生掌握 HTML、CSS 和 JavaScript 的基础知识和实际应用技巧，还能让他们了解现代网页设计的最佳实践。此外，由于项目中的模板具有广泛的适用性，它们也可以成为未来开发个人或商业网站的...
学生家乡网页设计作品静态HTML网页—— HTML+CSS+JavaScript制作辽宁沈阳家乡主题网页源码(11页)
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
静态html电商界面
08-15
静态HTML电商界面是指在网页设计中，使用静态HTML语言进行布局和设计的电商界面。静态HTML是一种没有动态效果和交互功能的网页设计方式，主要以静态文字、静态图片和静态布局展示内容。 静态HTML电商界面的特点是简洁、快速加载和易于开发。由于没有复杂的交互和动画效果，页面加载速度较快，用户可以快速浏览并获取所需信息。而且由于不需要服务器运算和数据库支持，开发和维护成本较低。 在静态HTML电商界面中，通常会包含主页、产品列表页、产品详情页、购物车和结算页面等。这些页面通过静态的文字和图片展示商品信息，并通过简单的链接和按钮实现页面跳转。用户可以浏览商品信息、加入购物车和下单购买。 然而，静态HTML电商界面也存在一些局限性。由于缺乏动态效果和交互功能，用户体验可能不如动态网页。而且，静态HTML页面无法实时更新数据，商品价格和库存等信息需要手动更新。此外，静态HTML页面也不支持个性化推荐和购物车记忆功能。 总的来说，静态HTML电商界面适用于产品信息相对稳定、功能简单的电商网站。它以简洁、快速和易于开发为特点，能够提供基本的浏览和购买功能。但在面对复杂的交互和个性化需求时，静态HTML电商界面可能无法满足用户的需求。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值