品优购首页布局与logo优化

最新推荐文章于 2023-04-16 15:57:40 发布

辰逸博客

最新推荐文章于 2023-04-16 15:57:40 发布

阅读量1.1k

点赞数 2

分类专栏： css 文章标签：品优购首页布局 logo优化

本文链接：https://blog.csdn.net/chenyiboke/article/details/103041361

版权

品优购首页布局

命名集合：

Document


名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	horwrods
导航	nav
导航左侧	dorpdown 包含 .dd .dt
导航右侧	navitems

1. shortcut制作

在这里插入图片描述

    1.通栏的盒子 命名为shortcut快捷导航的意思，注意，这里给行高，可以继承给里面的子盒子。
    2. 里面包含版心的盒子。
    3. 版心盒子里面包含1号左侧盒子左浮动。
    4. 版心盒子里面包含2号右侧盒子右浮动。

2. header制作

在这里插入图片描述

	1. header盒子必须要有高度
    2. 1号盒子是logo标志  定位
    3. 2号盒子是search 搜索模块  定位
    4. 3号盒子是hotwrods 热词模块  定位
    5. 4号盒子是shopcar 购车车模块

3. nav制作

在这里插入图片描述

	1. nav 盒子通栏有高度 而且有个下边框
    2. 1号盒子左侧浮动 dorpdown 下拉导航 里面包含 dt  dd 
    3. 2号盒子右侧浮动 navitems 导航栏组

案例命令（1）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> 品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="品优购JD.COM- 专业的综合网上购物商城，销售家，数码通讯
         ，电脑，家居百货，服装服饰，母婴，图书，食品等数万个品牌优质商品，
         便捷、诚信的服务，为您提供愉悦的网上购物体验！"/>
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <!-- 引入css初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css"> 
</head>
<body>
    <!-- 顶部快捷导航start -->
    <div class="shortcut"> 
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！</li>
                    <li>
                      <a href="#"> 请登录 </a>
                    <a href="#" class="style-red"> 免费注册 </a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li class="spacer"></li>
                    <li>我的品优购
                        <i class="icomoon"></i>
                    </li>
                    <li class="spacer"></li>
                    <li>品优购会员</li>
                    <li class="spacer"></li>
                    <li>企业采购</li>
                    <li class="spacer"></li>
                    <li>关注品优购
                        <i class="icomoon"></i>
                    </li>
                    <li class="spacer"></li>
                    <li>客户服务