品优购主体html

最新推荐文章于 2022-08-16 11:00:46 发布
最新推荐文章于 2022-08-16 11:00:46 发布
阅读量860 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69172270/article/details/124323291
版权 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>品优购</title>
    <!--    引入ico文件-->
    <link rel="shortcut icon" href="favicon.ico">
    <!--    引入初始化样式文件-->
    <link rel="stylesheet" href="css/base.css">
    <!--    引入公共样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--    引入index样式-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--快捷导航栏-->
<section class="shortcut">
    <div class="w">
        <div class="zuo">
            <ul>
                <li>品优购欢迎你!</li>
                <li>请登录</li>
                <li><a href="registerarea.html" class="style_red">免费注册</a></li>
            </ul>
        </div>
        <div class="you">
            <ul>
                <li class="arrow-icon"><a href="#">网站导航</a></li>
                <li></li>
                <li class="arrow-icon"><a href="#">客户服务</a></li>
                <li></li>
                <li class="arrow-icon"><a href="#">关注品优购</a></li>
                <li></li>
                <li><a href="#">企业采购</a></li>
                <li></li>
                <li><a href="#">品优购会员</a></li>
                <li></li>
                <li class="arrow-icon"><a href="#">我的品优购</a></li>
                <li></li>
                <li>我的订单</li>
            </ul>
        </div>
    </div>
</section>
<!--头部标签-->
<header class="w header">
    <!--    logo部分-->
    <logo class="logo">
        <h1>
            <a href="index.html" title="品优购商城">品优购商城</a>
        </h1>
    </logo>
    <!--    搜索框部分-->
    <div class="search ">
        <input type="search" placeholder="语言开发">
        <button>搜索</button>
    </div>
    <!--    热词部分-->
    <div class="hotwrods">
        <a href="#" class="style_red">优惠购首发</a>
        <a href="#">亿元优惠</a>
        <a href="#">9.9元团购</a>
        <a href="#">美满99减30</a>
        <a href="#">办公用品</a>
        <a href="#">电脑</a>
        <a href="#">通信</a>
    </div>
    <!--    购物车部分-->
    <div class="shopcar">
        我的购物车
        <div class="qq">
            8
        </div>
    </div>


</header>
<!--nav导航栏-->
<div class="nav clearfix">
    <div class="w">
        <div class="nav_z ">
            <div class="dt clearfix">全部商品分类</div>
            <div class="dd">
                <ul>
                    <li class="t"><a href="#">家用电器</a></li>
                    <li><a href="list.html">手机、数码、通信</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>
                    <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>
        <div class="nav_y">
            <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>
            </ul>
        </div>
    </div>
</div>
<!--首页部分-->
<div class="w">
    <div class="main">
        <!--        左侧图片部分-->
        <div class="focus">
            <ul>
                <li><img src="images/图层179.png" alt=""></li>
            </ul>
            <div class="foc_z"></div>
            <div class="foc_y"></div>
            <div class="foc_x">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <!--        右侧信息框-->
        <div class="newsflash">
            <!--            上部-->
            <div class="news">
                <div class="news-hd">
                    <h5>品优购快报</h5>
                    <a href="#">更多</a>
                </div>
                <div class="news-bd">
                    <ul>
                        <li><a href="#"><strong>[特惠]</strong>备战开学季，全民半折抢购</a></li>
                        <li><a href="#"><strong>[特惠]</strong>备战开学季，全民半折抢购</a></li>
                        <li><a href="#"><strong>[特惠]</strong>备战开学季，全民半折抢购</a></li>
                        <li><a href="#"><strong>[特惠]</strong>备战开学季，全民半折抢购</a></li>
                        <li><a href="#"><strong>[特惠]</strong>备战开学季，全民半折抢购，清仓大甩卖</a></li>
                    </ul>
                </div>
            </div>
            <!--            中部-->
            <div class="lifeservice">
                <ul>
                    <li>
                        <i></i>
                        <p>话费</p>
                    </li>
                    <li>
                        <i></i>
                        <p>话费</p>
                    </li>
                    <li>
                        <i></i>
                        <p>话费</p>
                    </li>
                    <li>
                        <i></i>
                        <p>话费</p>
                    </li>
                    <li>
                        <i></i>
                        <p>话费</p>
                    </li>
                    <li>
                        <i></i>
                        <p>话费</p>
                    </li>
                    <li>
                        <i></i>
                        <p>话费</p>
                    <li>
                        <i></i>
                        <p>话费</p>
                    </li>
                    <li>
                        <i></i>
                        <p>话费</p>
                    </li>
                    <li>
                        <i></i>
                        <p>话费</p>
                    </li>
                    <li>
                        <i></i>
                        <p>话费</p>
                    </li>
                    <li>
                        <i></i>
                        <p>话费</p>
                    </li>
                    </li>
                </ul>
            </div>
            <!--            下部-->
            <div class="bargain">
                <img src="upload/bargain(1).png" alt="">
            </div>
        </div>
    </div>
</div>
<!--推荐部分-->
<div class="w recon">
    <div class="recon-hd">
        <img src="images/recom.png" alt="">
    </div>
    <div class="recon-bd">
        <ul>
            <li><a href="#"><img src="upload/new_07.png" alt=""></a></li>
            <li><a href="#"><img src="upload/new_07.png" alt=""></a></li>
            <li><a href="#"><img src="upload/new_07.png" alt=""></a></li>
            <li><a href="#"><img src="upload/new_07.png" alt=""></a></li>
        </ul>
    </div>
</div>
<!--猜你喜欢模块-->
<div class="w cai clearfix">
    <div class="cai_s">
        <h3>猜你喜欢</h3>
        <p>换一批</p>
    </div>
    <div class="cai_x">
        <ul>
            <li>
                <img src="upload/图层152.png" alt="">
                <p>阳光美包新款单肩包女<br>
                    包时尚子母包四件套女</p>
                <h2>¥116.00</h2>
            </li>
            <li>
                <img src="upload/图层152.png" alt="">
                <p>阳光美包新款单肩包女<br>
                    包时尚子母包四件套女</p>
                <h2>¥116.00</h2>
            </li>
            <li>
                <img src="upload/图层152.png" alt="">
                <p>阳光美包新款单肩包女<br>
                    包时尚子母包四件套女</p>
                <h2>¥116.00</h2>
            </li>
            <li>
                <img src="upload/图层152.png" alt="">
                <p>阳光美包新款单肩包女<br>
                    包时尚子母包四件套女</p>
                <h2>¥116.00</h2>
            </li>
            <li>
                <img src="upload/图层152.png" alt="">
                <p>阳光美包新款单肩包女<br>
                    包时尚子母包四件套女</p>
                <h2>¥116.00</h2>
            </li>
            <li>
                <img src="upload/图层152.png" alt="">
                <p>阳光美包新款单肩包女<br>
                    包时尚子母包四件套女</p>
                <h2>¥116.00</h2>
            </li>
        </ul>
    </div>
</div>
<!--楼层模块-->
<div class="floor">
<!--一楼-->
    <div class="w jidain">
        <div class="box_hd">
            <p>家用电器</p>
            <div class="tab_list">
                <ul>
                    <li><a href="#" class="style_red">热门</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>
        <div class="box_bd">
            <div class="tab_content">
                <div class="tab_list_item">
                    <div class="col_210">
                        <ul>
                            <li><a href="#">节能补贴</a></li>
                            <li><a href="#">4K电视</a></li>
                            <li><a href="#">节能补贴</a></li>
                            <li><a href="#">4K电视</a></li>
                            <li><a href="#">节能补贴</a></li>
                            <li><a href="#">4K电视</a></li>
                        </ul>
                        <a href="#">
                            <img src="upload/floor-1-1.png" alt="">
                        </a>
                    </div>
                    <div class="col_329">
                        <a href="#">
                            <img src="upload/floor-1-b01.png" alt="">
                        </a>
                    </div>
                    <div class="col_221">
                        <a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a>
                        <a href="#"><img src="upload/floor-1-3.png" alt=""></a>
                    </div>
                    <div class="col_221">
                        <a href="#"><img src="upload/floor-1-4.png" alt=""></a>
                    </div>
                    <div class="col_219">
                        <a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a>
                        <a href="#"><img src="upload/floor-1-6.png" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="w"><img src="images/图层119.png" alt=""></div>
<!--二楼-->
    <div class="w shouji">
        <div class="box_hd">
            <p>家用电器</p>
            <div class="tab_list">
                <ul>
                    <li><a href="#" class="style_red">热门</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>
        <div class="box_bd">
            <div class="tab_content">
                <div class="tab_list_item">
                    <div class="col_210">
                        <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>
                        </ul>
                        <a href="#">
                            <img src="upload/floor-1-1.png" alt="">
                        </a>
                    </div>
                    <div class="col_329">
                        <a href="#">
                            <img src="upload/floor-1-b01.png" alt="">
                        </a>
                    </div>
                    <div class="col_221">
                        <a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a>
                        <a href="#"><img src="upload/floor-1-3.png" alt=""></a>
                    </div>
                    <div class="col_221">
                        <a href="#"><img src="upload/floor-1-4.png" alt=""></a>
                    </div>
                    <div class="col_219">
                        <a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a>
                        <a href="#"><img src="upload/floor-1-6.png" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="w"><img src="images/图层119.png" alt=""></div>
</div>
<!--底部部分-->
<footer class="footer">
    <div class="w">
        <div class="mod_service">
            <ul>
                <li>
                    <h5></h5>
                    <div class="foot_s_o">
                        <h4>正品保障</h4>
                        <p>正品保障，提供发票</p>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="foot_s_o">
                        <h4>正品保障</h4>
                        <p>正品保障，提供发票</p>
                    </div>
                </li>
                <li><h5></h5>
                    <div class="foot_so">
                        <h4>正品保障</h4>
                        <p>正品保障，提供发票</p>
                    </div>
                </li>
                <li><h5></h5>
                    <div class="foot_s_o">
                        <h4>正品保障</h4>
                        <p>正品保障，提供发票</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="mod_help">
            <dl>
                <dt><a href="">购物指南</a></dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href="">会员介绍</a></dd>
                <dd><a href="">生活旅行/团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
                <dd><a href="">联系客服</a></dd>
            </dl>
            <dl>
                <dt><a href="">购物指南</a></dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href="">会员介绍</a></dd>
                <dd><a href="">生活旅行/团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
            </dl>
            <dl>
                <dt><a href="">购物指南</a></dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href="">会员介绍</a></dd>
                <dd><a href="">生活旅行/团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
            </dl>
            <dl>
                <dt><a href="">购物指南</a></dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href="">会员介绍</a></dd>
                <dd><a href="">生活旅行/团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
            </dl>
            <dl>
                <dt><a href="">购物指南</a></dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href="">会员介绍</a></dd>
                <dd><a href="">生活旅行/团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
            </dl>
            <dl>
                <dt><a href="">购物指南</a></dt>
                <dd><img src="images/wx_cz.jpg" alt=""></dd>
                <dd>品优购客户端</dd>
            </dl>
        </div>
        <div class="mod_copyright">
            <div class="links">
                <a href="#">关于我们</a>|
                <a href="#">联系我们</a>|
                <a href="#">联系客服</a>|
                <a href="#">商家入驻</a>|
                <a href="#"> 营销中心</a>|
                <a href="#">手机品优购</a>|
                <a href="#">友情链接</a>|
                <a href="#">销售联盟</a>|
                <a href="#">品优购社区</a>|
                <a href="#">品优购公益</a>|
                <a href="#">English Site</a>|
                <a href="#">Contact U</a>
            </div>
            <div class="copyright">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>
                京ICP备08001421号京公网安备110108007702
            </div>
        </div>
    </div>
</footer>
</body>
</html>
不会前端的前端猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
项目实战——项目名称：品优购
qq_58791266的博客
05-19 1094
1. 品优购项目整体介绍 （制作首页、列表页、注册页三个页面）2. 品优购项目学习目的 （里面包含技术较多，能极大锻炼我们布局技术）3. 开发工具以及技术栈 （切图用ps， 代码用Vscode，测试用chrome， 大量使用HTML5+CSS3）
品优购全套资源
06-29
视频，源码,讲义，配套资源和配套软件应有尽有，童叟无欺
品优购
qq_32534441的博客
02-25 983
https://blog.csdn.net/weixin_42333583/article/category/7989787
前端与移动开发----购物商城案例（品优购PC项目下）
東三城的博客
10-27 925
品优购项目-下 目标 能够写出列表页 能够写出注册页 能够把品优购网站部署到本地服务器 能够把品优购网站上传到远程服务器 品优购项目 首页制作 main 主体模块制作 以前书写的就是模块化中的公共部分。 main 主体模块是 index 里面专有的，注意需要新的样式文件 index.css main 盒子宽度为 980 像素，高度是455像素，位置距离左边 220px (margin-left ) ，给高度就不用清除浮动 main 里面包含左侧盒子，宽度为 721像素，左浮动，focus 焦点
品优购购物商城
weixin_42378409的博客
04-16 803
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="description" content="品优购JD.COM-专...
品优购index.html
12-27
品优购index.html
js黑马品优购项目案例
06-16
通过对js的学习和html搭建品优购项目，有素材
品优购网页设计 期末作业 质量保证
03-20
仅完成首页、分类列表页、产品详情页 使用到html、css、js web网络开发作业（满分级） 代码布局合理，编写优美，质量有保证
品优购简单html+css.zip
05-25
电子商务品优购作业，只有首页，比较初级。
黑马品优购系统开发
01-28
该系统为黑马学院的品优购开发系统，保证真实有效
品优购全部资料及教程
06-01
里面是最新黑马第49期培训班的项目教学视频，及其所需的所有的资源文件，老师讲的很好。
品优购全套讲义
02-09
1.品优购电商系统开发讲义，2.品优购电商系统部署讲义
html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例 企业网站制作
QQ_____365392777的博客
08-16 298
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
品优购-注册页
weixin_46126804的博客
08-12 739
1.注意：注册页面比较隐私，为了保护用户信息，不需要SEO优化 2. 遇到上面情况，先给一个父盒子设置宽度，水平居中显示 里面用ul li 布局，包含 label， input ，span 注意： 给label 设置宽度，采用右对齐方式 3. ...
品优购(angular前端分页)
龚道松
03-19 333
品优购项目学习---基本概述(简略)
IDApprentice的博客
01-25 2307
(一)总学习目标 1.能够独自完成品优购首页制作 2.能够独立完成品优购列表页制作 3.能够独立完成品优购注册页制作 4.能够把品优购网站部署上线 一: 学习点 1.品优购项目规划 2.品优购首页制作 3.品优购列表页制作 4.品优购注册页制作 5.域名注册与网站上传 1.品优购项目规划 注:一个占较大篇幅或占据重要位置的广告，往往称其为Banner Psd: 即Photoshop Documen 的文件是一种图形文件格式 1.1网站制作流程(一般有项目...
品优购学习
m0_51622088的博客
05-07 735
品优购项目学习 参考：黑马前端pink老师 文章目录品优购项目学习前言一、HTMLindex.htmlregister.htmllist.htmlcart.html二、通用样式的cssbase.csscommon.css三.页面样式的cssindex.cssregister.csslist.csscart.css静态页面效果1-首页 index.html2-注册页面-register.html3-手机热卖页面-list.html4-购物车页面 -cart.html四、JS部分五、总结 前言 随便记记，代
企业级实战——品优购电商系统开发- 75 76 77 .商品分类-列表-前后端 表结构
aming小老弟
02-04 261
QQ 1274510382 Wechat JNZ_aming 商业联盟 QQ群538250800 技术搞事 QQ群599020441 解决方案 QQ群152889761 加入我们 QQ群649347320 共享学习 QQ群674240731 纪年科技aming 网络安全 ,深度学习,嵌入式,机器强化,生物智能,生命科学。 叮叮叮：产品已上线 —>关注 官方-微信公众号——济南纪年信息科技有限公司 民生项目：商城加盟/娱乐交友/创业商圈/外包兼职开发-项目发布/ 安全项目：态势感..
品优购项目
qq_40501188的博客
12-16 906
品优购项目规划 网站制作流程 项目整体介绍 项目名称：品优购 项目描述：品优购是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作 品优购项目的学习目的 电商类网站比较综合，里面需要大量的布局技术，包括布局方式，常见效果以及周边技术。 品优购项目能复习、总结、提高基础班所学布局技术 写完品优购项目，能对实际开发中制作PC端页面流程有一个整体的感知 为后期学习移动端项目做铺垫 开发工具以及技术线 开发工具 Hbuilder、Photoshop（fw）、主流浏览器（以Chrome浏览器
品优购快报html代码
最新发布
12-15
</html>品优购快报，这是一个简单的HTML代码，用于展示品优购快报的信息。首先是标题，然后是一段简短的欢迎语，接着是一个无序列表，列出了最新的优惠信息和新品推荐。每一条信息都有日期和具体的优惠内容。这个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值