1.采用基础] html css 撰写
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
<meta name="description" content="华为商城选购智能生活设备。">
<meta name="keywords" content="华为">
<title>华为商城-智能生活</title>
</head>
<body>
<!-- <div class="header_top">
<img src="./images/4262DC977D01212CE8922BD22E469FE4 (1).webp" alt="">
</div> -->
<div class="header">
<div class="w header_content clear">
<ul class="header_left left">
<li >
<a href="">首页</a>
</li>
<li>
<a href="">华为官网</a>
</li>
<li>
<a href="">V码(优码购)</a>
</li>
<li>
<a href="">企业购</a>
</li>
<li>
<a href="">Select Region</a>
</li>
<li>
<a href="">更多精彩</a>
</li>
</ul>
<ul class="header_right right">
<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=""><span><img src="./images/购物车.png" alt=""></span> 购物车</a>
</li>
</ul>
</div>
<div class="header_nav">
<div class="w header_nav_content clear">
<h1>
<img src="./images/logo_app_apk.png" alt="">
</h1>
<ul>
<li>
<a href="">华为专区</a>
</li>
<li>
<a href="">鸿蒙智联</a>
</li>
<li>
<a href="">莫塞尔</a>
</li>
<li>
<a href="">华为智选</a>
</li>
<li>
<a href="">HarmonyOS</a>
</li>
<li>
<a href="">特惠企采</a>
</li>
<li>
<a href="">教育购</a>
</li>
</ul>
</div>
</div>
</div>
<div class="banner">
<div class="w banner_content">
<ul class="banner_nav">
<li>
<a href="">手机</a>
<span>></span>
</li>
<li>
<a href="">电脑</a>
<span>></span>
</li>
<li>
<a href="">平板</a>
<span>></span>
</li>
<li>
<a href="">智慧屏</a>
<span>></span>
</li>
<li>
<a href="">穿戴</a>
<span>></span>
</li>
<li>
<a href="">耳机音频</a>
<span>></span>
</li>
<li>
<a href="">门锁路由</a>
<span>></span>
</li>
<li>
<a href="">配件</a>
<span>></span>
</li>
<li>
<a href="">生态产品</a>
<span>></span>
</li>
<li>
<a href="">家用电器</a>
<span>></span>
</li>
<li>
<a href="">美食饮酒</a>
<span>></span>
</li>
<li>
<a href="">增值服务/企业商用
</a>
<span>></span>
</li>
</ul>
<div class="banner_left">
<img src="./images/turn_left.svg" alt="">
</div>
<div class="banner_right">
<img src="./images/turn_right.svg" alt="">
</div>
<div class="banner_bottom">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<!-- 正文 -->
<div class="hw_body clear">
<!-- 智能频道 -->
<div class="w hw_content clear">
<div class="hw_zn left">
<div class="hw_zn_p">
<div class="hw_zn_img1">
<!-- <img src="./智能频道/top-1.webp" alt=""> -->
</div>
<div class="hw_zn_desc">
<a href="">智慧家居</a>
</div>
</div>
</div>
<div class="hw_zn left">
<div class="hw_zn_p">
<div class="hw_zn_img2">
<!-- <img src="./智能频道/top-1.webp" alt=""> -->
</div>
<div class="hw_zn_desc">
<a href="">智慧家居</a>
</div>
</div>
</div>
<div class="hw_zn left">
<div class="hw_zn_p">
<div class="hw_zn_img3">
<!-- <img src="./智能频道/top-1.webp" alt=""> -->
</div>
<div class="hw_zn_desc">
<a href="">智慧家居</a>
</div>
</div>
</div>
<div class="hw_zn left">
<div class="hw_zn_p">
<div class="hw_zn_img4">
<!-- <img src="./智能频道/top-1.webp" alt=""> -->
</div>
<div class="hw_zn_desc">
<a href="">智慧家居</a>
</div>
</div>
</div>
<div class="hw_zn left">
<div class="hw_zn_p">
<div class="hw_zn_img5">
<!-- <img src="./智能频道/top-1.webp" alt=""> -->
</div>
<div class="hw_zn_desc">
<a href="">智慧家居</a>
</div>
</div>
</div>
<div class="hw_zn left">
<div class="hw_zn_p">
<div class="hw_zn_img6">
<!-- <img src="./智能频道/top-1.webp" alt=""> -->
</div>
<div class="hw_zn_desc">
<a href="">智慧家居</a>
</div>
</div>
</div>
</div>
<!-- 甄选推荐 -->
<div class="w hw_zx clear">
<div class="hw_zx_p">
<h2>
甄选推荐
</h2>
<a href="">更多
<span>></span>
</a>
</div>
<ul class="hx_zx_list left">
<li>
<div class="hx_zx_list_img">
<img src="./智能频道/content-1.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./智能频道/content-2.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./智能频道/content-3.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xpss">新品上市</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./智能频道/content-4.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
</ul>
</div>
<!-- 手机 -->
<div class="w hw_zx clear">
<div class="hw_zx_p">
<h2>
手机
</h2>
<a href="">更多
<span>></span>
</a>
</div>
<ul class="hx_zx_list left">
<li>
<div class="hx_zx_list_img">
<img src="./手机/content_1.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./手机/content_2.png" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./手机/content_3.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xpss">新品上市</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./手机/content_4.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./手机/content_5.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./手机/content_6.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./手机/content_7.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./手机/content_8.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
</ul>
</div>
<!-- 电脑 -->
<div class="w hw_zx clear">
<div class="hw_zx_p">
<h2>
电脑
</h2>
<a href="">更多
<span>></span>
</a>
</div>
<ul class="hx_zx_list left">
<li>
<div class="hx_zx_list_img">
<img src="./电脑/diannao_1.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./电脑/diannao_2.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./电脑/diannao_3.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xpss">新品上市</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./电脑/diannao_4.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./电脑/diannao_5.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./电脑/diannao_6.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./电脑/diannao_7.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./电脑/diannao_8.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
</ul>
</div>
<!-- 平板 -->
<div class="w hw_zx clear">
<div class="hw_zx_p">
<h2>
电脑
</h2>
<a href="">更多
<span>></span>
</a>
</div>
<ul class="hx_zx_list left">
<li>
<div class="hx_zx_list_img">
<img src="./平板/pingban_1.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./平板/pingban_2.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./平板/pingban_3.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xpss">新品上市</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./平板/pingban_4.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./平板/pingban_5.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./平板/pingban_6.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./平板/pingban_7.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./平板/pingban_8.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
</ul>
</div>
<!-- 穿戴 -->
<div class="w hw_zx clear">
<div class="hw_zx_p">
<h2>
电脑
</h2>
<a href="">更多
<span>></span>
</a>
</div>
<ul class="hx_zx_list left">
<li>
<div class="hx_zx_list_img">
<img src="./智能穿戴/shoubiao_1.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./智能穿戴/shoubiao_2.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./智能穿戴/shoubiao_3.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xpss">新品上市</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./智能穿戴/shoubiao_4.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./智能穿戴/shoubiao_5.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./智能穿戴/shoubiao_6.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./智能穿戴/shoubiao_7.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
<li>
<div class="hx_zx_list_img">
<img src="./智能穿戴/shoubiao_8.webp" alt="">
</div>
<div class="hx_zx_yh">
<a href="">新品预定享万元豪礼</a>
</div>
<div class="hx_zx_desc">
<a href="">
<div class="xp">
新品
</div>
华为P50 Pocket</a>
<p>折叠万象，将不可能么变为可能。</p>
<span>￥2999</span>
<div class="hx_zx_yh_d">
<a href="">新品预定享万元豪礼</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="w footer_content clear">
<div class="footer_top clear">
<ul>
<li>
<a href="">百强企业 品质保证</a>
</li>
<li>
<a href="">7天退货 15天换货</a>
</li>
<li>
<a href="">48元起免运费</a>
</li>
<li>
<a href="">2000家服务店 全国联保</a>
</li>
</ul>
</div>
<div class="footer_desc clear">
<ul>
<li>
<span>购物指南</span>
</li>
<li>
<a href="">免息分期</a>
</li>
<li>
<a href="">以旧换新</a>
</li>
<li>
<a href="">众测活动</a>
</li>
<li>
<a href="">企业购</a>
</li>
<li>
<a href="">O2O采购</a>
</li>
</ul>
<ul>
<li>
<span>售后服务</span>
</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>
<ul>
<li>
<span>维修与技术支持</span>
</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>
<ul>
<li>
<span>特色服务</span>
</li>
<li>
<a href="">防伪查询</a>
</li>
<li>
<a href="">补购不涨</a>
</li>
<li>
<a href="">以旧换新</a>
</li>
<li>
<a href="">礼品包装</a>
</li>
</ul>
<ul>
<li>
<span>关于我们</span>
</li>
<li>
<a href="">公司介绍</a>
</li>
<li>
<a href="">华为零售店</a>
</li>
<li>
<a href="">商家中心</a>
</li>
<li>
<a href="">意见反馈</a>
</li>
</ul>
<ul>
<li>
<span>友情链接</span>
</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 class="footer_s left">
<h1>
950805
</h1>
<p>
7×24小时客服热线（仅收市话费）
</p>
<div class="kf">
<span><img src="./images/客服.png" alt=""></span>
在线客服
</div>
<a href="">关注VMALL：
<span><img src="./网页底部/微信 (1).png" alt=""></span>
<span><img src="./网页底部/头条样式.png" alt=""></span>
<span><img src="./网页底部/新浪微博.png" alt=""></span>
<span><img src="./网页底部/百度.png" alt=""></span>
</a>
</div>
</div>
<div class="footer_bottom clear">
<div class="footer_logo left">
<img src="./images/logo_app_apk.png" alt="">
</div>
<div class="footer_ba_desc left">
<p>
<a href="">华为集团</a>
<a href="">华为CBG官网</a>
<a href="">华为应用市场</a>
<a href="">HarmonyOS</a>
<a href="">华为终端云空间</a>
<a href="">开发者联盟</a>
<a href="">华为商城手机版</a>
</p>
<p>
<a href="">隐私声明</a>
<a href="">服务协议</a>
<a href="">COOKIES</a>
<span>Copyright © 2012-2022 华为终端有限公司</span>
<a href="">经营资质</a>
<a href="">粤ICP备19015064号</a>
<a href="">粤公网安备 44190002003939号</a>
</p>
<p>
<a href="">增值电信业务经营许可证：粤B2-20190762</a>
<a href="">备案主体编号：44201919072182</a>
<a href="">粤新出网备（2021）2号</a>
<a href="">（粤）网械平台备字[2022]第00005号</a>
</p>
<p>
<a href="">互联网药品信息服务资格证（粤）-非经营性-2020-0102</a>
<a href="">粤东食药监械经营备20203930</a>
<a href="">广东省网络食品交易第三方平台备案：GDWS10168</a>
</p>
</div>
<div class="footer_ba right">
<img src="./images/备案.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>css
.header{
width: auto;
/* height: 36px; */
background-color: black;
}
.header_content{
/* background-color: aqua; */
height: 36px;
}
.header_left{
width:500px;
height: 36px;
}
.header_right{
width: 490px;
height: 36px;
}
.header_left li,.header_right li{
float: left;
padding:10px 0;
}
.header_left li a,.header_right li a{
float: left;
color: #989898;
line-height: 1;
padding:0 8px;
border-right: 1px solid #989898;
}
.header_left li:first-child a{
padding-left: 0;
}
.header_left li:last-child a{
border-right: none;
}
.header_right li:last-child a{
border-right: none;
}
.header_left li a:hover,.header_right li a:hover{
color: aquamarine;
}
.header_nav{
/* height: 75px; */
width: auto;
background-color:white;
}
.header_nav_content{
height: 75px;
background-color: white;
}
.header_nav_content h1{
float: left;
height: 34px;
width: 104px;
}
.header_nav_content h1 img{
width: 100%;
}
.header_nav_content ul{
float: left;
margin-left: 79px;
}
.header_nav_content ul li{
float: left;
}
.header_nav_content ul li a{
line-height: 75px;
font-size: 18px;
color: black;
margin-right: 44px;
}
.header_nav_content ul li a:hover{
color: aquamarine;
}
.header_top{
height: 65px;
}
.header_top img{
width: 100%;
}
.banner{
height: 550px;
background: url(../images/D3A0F50953EA132E839F6725F376AF67.webp) no-repeat center;
background-size: 127%;
}
.banner_content{
height: 550px;
position: relative;
}
.banner_nav{
position: absolute;
top: 26px;
height: 495px;
width: 200px;
background-color: white;
box-shadow: 0px 0px 10px #888888;
}
.banner_nav li a{
padding:10px 0;
padding-left: 24px;
display: inline-block;
color: #bcbdbe;
}
.banner_nav li a:hover{
color:black;
}
.banner_nav li span{
height: 40px;
line-height: 40px;
color: #bcbdbe;
float: right;
margin-right: 15px;
}
.banner_left,.banner_right{
height: 50px;
width: 50px;
border-radius: 50%;
background-color: rgb(0,0,0,.3);
position: absolute;
top:246px;
left: 215px;
line-height: 50px;
text-align: center;
}
.banner_left:hover,.banner_right:hover{
background-color: rgb(0,0,0,.6);
}
.banner_right{
left: 1135px;
}
.banner_left img,.banner_right img{
vertical-align: middle;
}
.banner_bottom{
width: auto;
/* background-color: aqua; */
position: absolute;
top: 510px;
left: calc(50%);
}
.banner_bottom span{
display: inline-block;
height: 8px;
width: 8px;
border-radius: 50%;
background-color:rgb(0, 0, 0,.3);
margin-right: 8px;
}
.banner_bottom span:hover{
background-color: #fff;
cursor: pointer;
}
.hw_body{
padding-bottom: 50px;
background-color: #f1f3f5;
}
.hw_content{
padding: 30px 72px;
height: 140px;
}
.hw_zn{
height: 110px;
width: 55px;
margin:0 auto;
margin-right: 145px;
}
.hw_zn_img1,.hw_zn_img2,.hw_zn_img3,.hw_zn_img4,.hw_zn_img5,.hw_zn_img6{
height: 50px;
width: 50px;
}
.hw_zn_img1{
background: url(../智能频道/top-1.webp) no-repeat center;
background-size: 45px;
}
.hw_zn_img2{
background: url(../智能频道/top-2.webp) no-repeat center;
background-size: 45px;
}
.hw_zn_img3{
background: url(../智能频道/top-3.webp) no-repeat center;
background-size: 45px;
}
.hw_zn_img4{
background: url(../智能频道/top-4.webp) no-repeat center;
background-size: 45px;
}
.hw_zn_img5{
background: url(../智能频道/top-5.webp) no-repeat center;
background-size: 45px;
}
.hw_zn_img6{
background: url(../智能频道/top-6.webp) no-repeat center;
background-size: 45px;
}
.hw_zn_p:hover .hw_zn_img1,
.hw_zn_p:hover .hw_zn_img2,
.hw_zn_p:hover .hw_zn_img3,
.hw_zn_p:hover .hw_zn_img4,
.hw_zn_p:hover .hw_zn_img5,
.hw_zn_p:hover .hw_zn_img6,
.hw_zn_p:hover .hw_zn_desc a{
color: black;
font-weight: 700;
background-size: 50px;
}
.hw_zn:last-child{
margin-right: 0;
}
.hw_zn_desc a{
font-size: 13px;
color:#989898;
}
.hw_zx_p{
padding-top: 40px;
}
.hw_zx_p h2{
float: left;
font-weight: 400;
height: 49px;
}
.hw_zx_p a{
float: right;
color: #989898;
margin-top: 5px;
}
/* .hw_zx_p a::after{
content: '';
display: block;
width: 10px;
height: 10px;
background: url(../images/turn_right.svg) no-repeat center;
} */
.hx_zx_list li{
padding-top: 40px;
float: left;
height: 410px;
width: 290px;
background-color: white;
margin-right: 12px;
}
.hx_zx_list li:last-child{
margin-right: 0;
}
.hx_zx_list_img{
height: 184px;
text-align: center;
}
.hx_zx_list_img img{
width: 67%;
}
.hx_zx_yh{
height: 20px;
width: 110px;
font-size: 10px;
background-color: #fbe7ea;
border-radius: 5px;
text-align: center;
margin: 0 auto;
margin-top: 10px;
}
.hx_zx_yh>a{
color: red;
line-height: 20px;
font-weight: 700;
}
.hx_zx_desc{
margin: 0 auto;
text-align: center;
padding: 13px 0;
}
.hx_zx_desc>a{
font-size: 14px;
display: block;
margin-bottom: 13px;
font-weight: 700;
color: black;
}
.hx_zx_desc p{
font-size: 14px;
color: #989898;
margin-bottom: 13px;
}
.hx_zx_desc span{
color: #cf0a2c;;
}
.hx_zx_yh_d{
height: 20px;
width: 110px;
font-size: 10px;
border: 1px solid #cf0a2c;
border-radius: 5px;
text-align: center;
margin: 0 auto;
margin-top: 10px;
}
.hx_zx_yh_d a{
color: #cf0a2c;
}
.xp{
font-size: 13px;
font-weight: 400;
display: inline-block;
color: white;
background-color: #f53c58;
border-radius: 5px;
line-height: 16px;
width: 35px;
height: 16px;
}
.xpss{
font-size: 13px;
font-weight: 400;
display: inline-block;
color: white;
background-color: #f53c58;
border-radius: 5px;
line-height: 16px;
width: 63px;
height: 16px;
}
.hx_zx_list li:nth-child(4n){
margin-right: 0;
}
.hx_zx_list li{
margin-bottom: 12px;
}
.footer{
/* height: 410px; */
background-color: white;
}
.footer_top ul{
padding: 50px 0;
height: 125px;
/* background-color: aqua; */
border-bottom: 1px solid #989898;
}
.footer_top ul li{
float: left;
margin: 0 90px;
position: relative;
}
.footer_top ul li a{
color: black;
font-size: 16px;
display: inline-block;
height: 15px;
}
.footer_top ul li:last-child{
margin-right: 0;
}
.footer_top ul li a::before{
position: absolute;
content: '';
display: inline-block;
width: 27px;
height: 27px;
top: -2px;
left: -42px;
margin-right: 10px;
vertical-align: middle;
line-height: 24px;
background: url(../网页底部/a1.png) no-repeat center;
background-size: 25px;
}
.footer_top ul li:last-child a::before{
background: url(../网页底部/a4.png) no-repeat center;
background-size: 25px;
}
.footer_top ul li:nth-child(2) a::before{
background: url(../网页底部/a2.png) no-repeat center;
background-size: 25px;
}
.footer_top ul li:nth-child(3) a::before{
background: url(../网页底部/a3.png) no-repeat center;
background-size: 25px;
}
.footer_desc ul li span{
font-weight: 700;
display: block;
margin-bottom: 32px;
}
.footer_desc ul li a{
color: #989898;
display: block;
margin-bottom: 15px;
}
.footer_desc {
padding: 60px 0;
border-bottom: 1px solid #989898;
/* height: 320px; */
}
.footer_desc ul{
float: left;
margin-right: 60px;
width: auto;
}
.footer_s{
width: 276px;
border-color: red;
border-left: 1px solid #dbdbdb;
}
.footer_s{
text-align: center;
}
.footer_s h1{
font-weight: 400;
}
.footer_s p{
margin-top: 10px;
}
.kf{
height: 35px;
width: 170px;
border-radius: 15px;
background-color: black;
color: white;
line-height: 35px;
text-align: center;
margin: 20px auto;
font-size: 16px;
}
.kf span{
display: inline-block;
height: 20px;
width: 20px;
}
.kf span img{
width: 100%;
vertical-align: middle;
}
.kf:hover{
background-color: #888888;
}
.footer_bottom{
padding: 30px 0;
}
.footer_logo{
width: 80px;
height: 24px;
}
.footer_ba img{
width: 100%;
}
.footer_logo img{
width: 78%;
}
.footer_ba{
width: 90px;
height: 30px;
}
.footer_ba_desc p a{
font-size: 13px;
color:#666666;
display: inline-block;
border-right: 1px solid #bcbdbe;
line-height: .8;
padding: 0 5px;
}
.footer_ba_desc p a:last-child{
border-right: 0;
}
.footer_ba_desc p a:hover{
color:red;
}
.footer_ba_desc p span{
font-size: 13px;
color:#666666;
}
.footer_s a{
color:black;
}
.footer_s a span{
height: 20px;
width: 20px;
display: inline-block;
margin-right: 15px;
}
.footer_s a span img{
width: 100%;
vertical-align: middle;
}
.header_right li span{
float: left;
margin-top: -2px;
margin-right: 5px;
height: 20px;
width: 20px;
}
.header_right li span img{
width: 100%;
}
.footer_desc ul li a:hover{
color: red;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left{
float: left;
}
.right{
float: right;
}
.clear::after,.clear::before{
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
ul{
list-style: none;
}
.w{
width: 1200px;
margin: 0 auto;
}
a{
text-decoration: none;
}源文件 图片我不会上传
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
