品优购静态页面，前端初学一个半月，努力

最新推荐文章于 2022-11-26 18:40:41 发布
最新推荐文章于 2022-11-26 18:40:41 发布
阅读量1.3k 收藏
点赞数
文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52413587/article/details/119802003
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

入门前端 初学HTML和CSS基础，通过psd文件完成品优购静态网站，新手还需要不断练习网页布局，努力学习加深记忆！

一、html

1.首页index

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购商城-正品低价、品质保障、配送及时、轻松购物</title>
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<!-- 
    logo SEO优化 1.放一个h1 2.h1里放一个链接，logo背景图片给链接 3.文字不显示，text-indent overflowhidden/ font-size0 4.title
 -->

<body>
    <!-- 快捷导航 start-->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您!&nbsp;</li>
                    <li><a href="#">请登录&nbsp;</a></li>
                    <li><a href="register.html" class="style_red" target="_blank">免费注册</a></li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow_icon">我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow_icon">关注品优购</li>
                    <li></li>
                    <li class="arrow_icon">客户服务</li>
                    <li></li>
                    <li class="arrow_icon">网站导航</li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 快捷导航 end-->

    <!-- header头部制作 start -->
    <header class="header w">
        <!-- logo部分 -->
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城" target="_blank">品优购商城</a>
            </h1>
        </div>
        <!-- 搜索框部分 -->
        <div class="search">
            <input type="search" name="" id="" placeholder="语言开发">
            <button>搜索</button>
        </div>
        <!-- 热词部分 -->
        <div class="hotwords">
            <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">
            我的购物车
            <!-- 统计部分 -->
            <i class="count">8</i>
        </div>
    </header>
    <!-- header头部制作 end -->

    <!-- nav导航 start -->
    <nav class="nav">
        <div class="w">
            <div class="dropdown">
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a></li>
                        <li><a href="list.html" target="_blank">手机</a>、<a href="#">数码</a></a>、<a href="#">通信</a></li>
                        <li><a href="#">电脑</a>、<a href="#">办公</a></li>
                        <li><a href="#">家居</a>、<a href="#">家具</a>、<a href="#">家装</a>、<a href="#">厨具</a></li>
                        <li><a href="#">男装</a>、<a href="#">女装</a>、<a href="#">童装</a>、<a href="#">内衣</a></li>
                        <li><a href="#">个户化妆</a>、<a href="#">清洁用品</a></a>、<a href="#">宠物</a></li>
                        <li><a href="#">鞋靴</a>、<a href="#">箱包</a>、<a href="#">珠宝</a>、<a href="#">奢侈品</a></li>
                        <li><a href="#">运动户外</a>、<a href="#">钟表</a></li>
                        <li><a href="#">汽车</a>、<a href="#">汽车用品</a></li>
                        <li><a href="#">母婴</a>、<a href="#">玩具乐器</a></li>
                        <li><a href="#">食品</a>、<a href="#">酒类</a>、<a href="#">生鲜</a>、<a href="#">特产</a></li>
                        <li><a href="#">医药保健</a></li>
                        <li><a href="#">图书</a>、<a href="#">音像</a></a>、<a href="#">电子书</a></li>
                        <li><a href="#">彩票</a>、<a href="#">旅行</a>、<a href="#">充值</a>、<a href="#">票务</a></li>
                        <li><a href="#">理财</a>、<a href="#">众筹</a>、<a href="#">白条</a>、<a href="#">保险</a></li>
                    </ul>
                </div>
            </div>
            <div class="navitems">
                <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>
    </nav>
    <!-- nav导航 end -->

    <!-- main start -->
    <div class="w">
        <div class="main">
            <div class="forcus">
                <ul>
                    <li><img src="upload/foucs.png" alt=""></li>
                    <a href="#" class="prev">&lt;</a>
                    <a href="#" class="next">&gt;</a>
                    <ul class="forcus-nav">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </ul>
            </div>
            <div class="newsflash">
                <div class="news">
                    <div class="news_hd">
                        <h5>品优购快报</h5>
                        <a href="#" class="more">更多</a>
                    </div>
                    <div class="news_bd">
                        <ul>
                            <li><a href="#"><strong>[特惠]</strong>&nbsp;备战开学季&nbsp;全民半价购数码</a></li>
                            <li><a href="#"><strong>[公告]</strong>&nbsp;品优稳占家电网购六成份额</a></li>
                            <li><a href="#"><strong>[特惠]</strong>&nbsp;百元中秋全品类礼券限量领&nbsp;享受中秋佳节团园礼包</a></li>
                            <li><a href="#"><strong>[公告]</strong>&nbsp;上品优生鲜&nbsp;享阳澄湖大闸蟹</a></li>
                            <li><a href="#"><strong>[特惠]</strong>&nbsp;每日享折扣品优品质游</a></li>
                        </ul>
                    </div>
                </div>
                <div class="lifemodule">
                    <ul>
                        <li>
                            <i></i>
                            <p><a href="#">话费</a></p>
                        </li>
                        <li>
                            <i></i>
                            <img src="images/jian.png" alt="">
                            <p><a href="#">机票</a></p>
                        </li>
                        <li>
                            <i></i>
                            <p><a href="#">电影票</a></p>
                        </li>
                        <li>
                            <i></i>
                            <p><a href="#">游戏</a></p>
                        </li>
                        <li>
                            <i></i>
                            <p><a href="#">彩票</a></p>
                        </li>
                        <li>
                            <i></i>
                            <p><a href="#">加油卡</a></p>
                        </li>
                        <li>
                            <i></i>
                            <img src="images/jian.png" alt="">
                            <p><a href="#">酒店</a></p>
                        </li>
                        <li>
                            <i></i>
                            <p><a href="#">火车票</a></p>
                        </li>
                        <li>
                            <i></i>
                            <img src="images/jian.png" alt="">
                            <p><a href="#">众筹</a></p>
                        </li>
                        <li>
                            <i></i>
                            <p><a href="#">理财</a></p>
                        </li>
                        <li>
                            <i></i>
                            <p><a href="#">礼品卡</a></p>
                        </li>
                        <li>
                            <i></i>
                            <p><a href="#">白条</a></p>
                        </li>
                    </ul>
                </div>
                <div class="bargain">
                    <img src="upload/bargain.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- main end -->

    <!-- 推荐模块 start -->
    <div class="w recom">
        <div class="recom_hd">
            <img src="images/今日推荐.png" alt="">
        </div>
        <div class="recom_bd">
            <ul>
                <li><a href="#"><img src="upload/images/li1_03.png" alt=""></a></li>
                <li><a href="#"><img src="upload/images/li2_04.png" alt=""></a></li>
                <li><a href="#"><img src="upload/images/li3_05.png" alt=""></a></li>
                <li><a href="#"><img src="upload/images/li4_06.png" alt=""></a></li>
            </ul>
        </div>
    </div>
    <!-- 推荐模块 end -->

    <!-- 猜你喜欢 start -->
    <div class="w">
        <div class="fav_hd">
            <div class="fav_hd_l">猜你喜欢</div>
            <div class="fav_hd_r">换一批</div>
        </div>
        <div class="fav_bd">
            <ul>
                <li><a href="#">
                        <i><img src="upload/图层 152.png" alt=""></i>
                        <p>阳光美包新款单肩包女
                            包时尚子母包四件套女<h4>¥116.00</h4>
                        </p>
                    </a></li>
                <li><a href="#"><i><img src="upload/图层 153.png" alt=""></i>
                        <p>爱仕达 30CM炒锅不粘
                            锅NWG8330E电磁炉炒<h4>¥99.00</h4>
                        </p>
                    </a></li>
                <li><a href="#"><i><img src="upload/图层 154.png" alt=""></i>
                        <p>捷波朗
                            （jabra）BOOSI劲步<h4>¥245.00</h4>
                        </p>
                    </a></li>
                <li><a href="#"><i><img src="upload/图层 156.png" alt=""></i>
                        <p>欧普
                            JYLZ08面板灯平板灯铝<h4>¥238.00</h4>
                        </p>
                    </a></li>
                <li><a href="#"><i><img src="upload/图层 158.png" alt=""></i>
                        <p>三星
                            （G5500）移动联通<h4>¥649.00</h4>
                        </p>
                    </a></li>
                <li><a href="#"><i><img src="upload/图层 159.png" alt=""></i>
                        <p>韩国所望
                            紧致湿润精华露400ml<h4&
最低0.47元/天 解锁文章
颓废web
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
超详细前端开发案例：品优购商场项目(三)
←か淡定☆ ヾ 的博客
10-20 370
目录1. 首页制作1.1 楼层区 floor1.2 家用电器模块1.3. box-hd 模块1.4 box-bd 模块1.5 侧边栏 fixedtool 制作1.6 知识点 -过渡(CSS3)2. 列表页制作2.1 列表页准备工作2.2 列表页 header 和 nav 修改2.3 列表页主体盒子 sk _container2.4 sk_goods 布局2.5 分页制作 page2.6 知识点 -获得焦点元素 1. 首页制作 1.1 楼层区 floor 注意这个floor 一个大盒子 包含，
品优购静态页资源psd
08-05
品优购
前端打印样式乱了_前端面试每日 3+1 —— 第486天
weixin_39655085的博客
12-06 42
今天的知识点 (2020.08.14) —— 第486天 (我也要出题)[html] 写一个三栏布局，两边固定，中间自适应[css] 如何优化打印样式？[js] 在多个页面之间需要传递参数，你是如何传递这些参数的？[软技能] URL和URI有什么区别？学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，...
品优购首页_html5_css3
weixin_45344430的博客
01-31 1777
效果图 index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>品优购</title> <link rel="styleshee
HTML5期末大作业：品优购网站设计——品优购 (3页) HTML+CSS+JavaScript 大学生网购网页作品商城网页设计作业模板 学生网页制作源代码下载
11-25 751
HTML5期末大作业：品优购网站设计——品优购 (3页) HTML+CSS+JavaScript 大学生网购网页作品商城网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网
品优购静态页面结果，内含psd文件。
07-20
在本项目中，"品优购静态页面结果"是一个基于HTML和CSS技术实现的网页设计作品，用于展示在学习了基础的HTML和CSS知识后，开发者如何将理论转化为实际操作，构建一个完整的线上购物平台模拟页面。这个项目不仅检验了...
html+css品优购静态页面项目
最新发布
03-23
"html+css品优购静态页面项目"是一个典型的前端网页开发实践，主要涉及HTML和CSS两种核心技术。HTML（HyperText Markup Language）是用于创建网页的标准标记语言，而CSS（Cascading Style Sheets）则用于控制网页的...
品优购项目静态页面开发.rar
08-16
本资源"品优购项目静态页面开发.rar"显然是一个专注于电商网站前端设计的项目，其目标在于为开发者提供可复用的代码片段，提升开发效率并促进团队协作。 首先，我们来深入理解HTML（HyperText Markup Language）。...
黑马-前端-品优购项目-静态页面搭建
03-18
在本项目中，“黑马-前端-品优购项目-静态页面搭建”，我们主要关注的是使用HTML和CSS技术来构建一个电商网站的静态首页。这个任务是前端开发的基础，旨在通过实践提升开发者对网页布局和样式设计的理解。接下来，...
品优购静态网页练习（HTML+CSS）
08-22
在本实践项目“品优购静态网页练习”中，我们将深入学习和应用HTML与CSS的基础知识，这包括HTML5和CSS3的最新特性。...在完成这个练习后，你将有能力独立创建一个具有专业外观和良好用户体验的静态网站。
免费！ 品优购psd文档，电商主页、分类列表、产品详情、登录界面、购物车结算、订单提交、注册界面。
02-19
免费！ 品优购psd文档，电商主页、分类列表、产品详情、登录界面、购物车结算、订单提交、注册界面。
品优购下载地址
12-08
最新品优购下载地址，分享链接。 群主会分享自己做过的一些经典项目，免费分享各种学习资源。 github: https://github.com/codingZhangxin csdn: https://blog.csdn.net/qq_35180973?t=1
品优购全部资料及教程
06-01
里面是最新黑马第49期培训班的项目教学视频，及其所需的所有的资源文件，老师讲的很好。
购买流程.psd
03-01
NULL 博文链接：https://zongyukai20070419095606.iteye.com/blog/266146
网页设计大作业-品优购商城
07-26
网页设计大作业-品优购商城（免积分下载），详细情况请看我的文章介绍。
品优购psd文档分享
祝先森的博客
03-22 2157
免费！ 品优购psd文档，电商主页、分类列表、产品详情、登录界面、购物车结算、订单提交、注册界面。 上链接： 需要自提哈 ==>> https://download.csdn.net/download/qq_45718618/81480807
品优购的界面设计要求_品优购项目
weixin_28697921的博客
12-23 145
项目技能:1.使用AngularJS前端框架完成前后端交互2.完成品牌的基本管理功能的开发AngularJS四大特性:1.MVC2.双向绑定3.依赖注入4.模块化设计指令:显示变量的值得表达式: {{ }}ng-app 在angularJS的作用范围ng-model: 绑定变量ng-init: 初始化ng-click: 点击事件ng-repeat:循环{ }: 对象[ ]: 集合控制器:控制...
品优购项目详细分析
m0_51495354的博客
11-26 2255
前端项目品优购分析
【前端项目实战—品优购】网站favicon图标制作
林见鹿鸣
09-30 441
favicon.ico一般用于作为缩略图的网站标志，它显示在浏览器的地址栏或者标签上，如下图所示。目前主要的浏览器都支持favicon.ico图标。 一、制作favicon图标 把品优购图标切成png图片。（具体切图过程请见之前的文章，PSD文件需要可以在评论留言） 把png图片转换成ico图标，这需要借助于第三方转换网站，例如比特虫：https://www.bitbug.net/。 二、favicon图标放到网站根目录下 保存到网站根目录下后，改名。 三、HTML页面引入favicon图
html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascr
07-07
品优购电商购物网站是一个非常流行的电商网站，为了设计和实现该网站的静态页面，我们可以分为三个页面：主页、商品列表页和商品详情页。 在设计主页时，我们需要包含品优购网站的logo、导航栏、搜索栏、轮播图、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值