品优购学习
时间：2023-05-18 17:07:00
优购项目学习
参考：黑马前端pink老师
文章目录
- 优购项目学习
- 前言
- 一、HTML
-
- index.html
- register.html
- list.html
- cart.html
- 二、一般风格css
-
- base.css
- common.css
- 三.页面样式的css
-
- index.css
- register.css
- list.css
- cart.css
- 静态页面效果
-
- 1-首页 index.html
- 2-注册页面-register.html
- 3-手机热卖页面-list.html
- 4-购物车页面 -cart.html
- 四、JS部分
- 五、总结
前言
随便记，代码写得很差
一、HTML
目前完成: index list shop-cart register。
index.html
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>优质购买-正品低价，质量保证，及时配送，购物方便！title> <meta name="description" content="优秀的购物中心——专业的综合在线购物中心，为您提供真正的低价购物选择，高质量和方便的服务体验。商品来自世界各地数十万品牌，包括家用电器、手机、电脑、服装、家居、母婴、美容、个人护理、食品、新鲜等丰富类别，以满足各种购物需求。专业的综合在线购物中心，为您提供真正的低价购物选择，高质量和方便的服务体验。"> <meta name="keywords" content="网购、网购、网购、家电、手机、电脑、服装、家居、母婴、美容、个人护理、食品"> <link rel="shortcut icon" href="bitbug_favicon.ico" /> <link rel="stylesheet" href="../css/base.css" />
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="../css/index.css" />
<script src="../js/animate.js">script>
<script src="../js/index.js">script>
head>
<body>
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您！ li>
<li>
<a href="#">请登录a> <a href="register.html" class="style_red">免费注册a>
li>
ul>
div>
<div class="fr">
<ul>
<li>我的订单li>
<li>li>
<li class="arro-ico">我的品优购li>
<li>li>
<li>品优购会员li>
<li>li>
<li>企业采购li>
<li>li>
<li class="arro-ico">关注品优购li>
<li>li>
<li class="arro-ico">客户服务li>
<li>li>
<li class="arro-ico">网站导航li>
ul>
div>
div>
section>
<header class="header w">
<div class="logo">
<h1>
<a href="index.html" title="品优购商城"> 品优购商城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减39a>
<a href="#">办公用品a>
<a href="#">电脑a>
<a href="#">通信a>
div>
<div class="shopcart">
<a href="cart.html">我的购物车a>
<i class="count">8i>
div>
header>
<div 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">手机a> <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> <a href="#">女装a> <a href="#">童装a> <a href="#">内衣a> li>
<li><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> 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> <a href="#">保健a> li>
<li><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 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>
div>
<div class="fixedtool">
<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>
div>
<div class="w">
<div class="main">
<div class="focus fl">
<a href="javascript:;" class="arrow-l">
<
a>
<a href="javascript:;" class="arrow-r">>a>
<ul>
<li>
<a href="#"><img src="../upload/focus1.png">a>
li>
<li>
<a href="#"><img src="../upload/focus2.png">a>
li>
<li>
<a href="#"><img src="../upload/focus3.png" alt="">a>
li>
<li>
<a href="#"><img src="../upload/focus4.png" alt="">a>
li>
ul>
<ol class="cricle">
ol>
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>
<strong>[重磅]strong> 稳稳的幸福
li>
<li>
<strong>[重磅]strong> 我要稳稳的幸福/能抵挡末日的残酷
li>
<li>
<strong>[重磅]strong> 在不安的深夜能有个归宿
li>
<li>
<strong>[重磅]strong> 我要稳稳的幸福/能用双手去碰触
li>
<li>
<strong>[重磅]strong> 每次伸手入怀中有你的温度
li>
ul>
div>
div>
<div class="lifservice">
<ul>
<li>
<a href="#"><i>i>a>
<p>话费p>
li>
<li>
<a href="#"><i>i>a>
<p>话费p>
li>
<li>
<a href="#"><i>i>a>
<p>话费p>
li>
<li>
<a href="#"><i>i>a>
<p>话费p>
li>
<li>
<a href="#"><i>i>a>
<p>话费p>
li>
<li>
<a href="#"><i>i>a>
<p>话费p>
li>
<li>
<a href="#"><i>i>a>
<p>话费p>
li>
<li>
<a href="#"><i>i>a>
<p>话费p>
li>
<li>
<a href="#"><i>i>a>
<p>话费p>
li>
<li>
<a href="#"><i>i>a>
<p>话费p>
li>
<li>
<a href="#"><i>i>a>
<p>话费p>
li>
<li>
<a href="#"><i>i>a>
<p>话费p>
li>
ul>
div>
<div class="bargain">
<i>
<a href="#"><img src="../upload/bargain.png" title="今日钜惠">a>
i>
div>
div>
div>
<div class="remore">
<div class="remore-hd">
<i>
<img src="../images/recom.png">
i>
div>
<div class="remore-bd">
<ul>
<li>
<a href="#">
<i><img src="../upload/recom1.png">i>
a>
li>
<li>
<a href="#">
<i><img src="../upload/recom2.png">i>
a>
li>
<li>
<a href="#">
<i><img src="../upload/recom3.png">i>
a>
li>
<li>
<a href="#">
<i><img src="../upload/recom4.png">i>