关于css:品优购项目divcss的静态页面

48次阅读

共计 5334 个字符，预计需要花费 14 分钟才能阅读完成。

我的项目代码
小结：对于 DIV+CSS 的盒子模型的布局练习
对于 favicon.ico，网页的 seo，CSS 精灵图，浮动和定位，表单，无序列表和自定义列表等设置更加纯熟

1. 首页布局

引入 ico 图标

favicon.ico 的制作和插入

SEO 三元素

<head>
    <meta charset="UTF-8">
    <title> 品优购 - 综合网购首选 - 副品高价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="品优购 JD.COM- 业余的综合网上购物商城, 销售家电、数码通信、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品. 便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物, 网上商城, 手机, 笔记本, 电脑,MP3,CD,VCD,DV, 相机, 数码, 配件, 手表, 存储卡, 品优购" />
    <!-- 引入 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>

网站的 SEO

font-icon

字体图标

命名汇合：

名称 阐明
快捷导航栏 shortcut
头部 header
标记 logo
购物车 shopcar
搜寻 search
热点词 hotwrods
导航 nav
导航左侧 dorpdown 蕴含 .dd .dt
导航右侧 navitems

1). shortcut 制作

  • 通栏的盒子 命名为 shortcut 快捷导航的意思，留神，这里给行高，能够继承给外面的子盒子。
  • 外面蕴含 版心的盒子
  • 版心盒子外面蕴含 1 号左侧盒子左浮动

  • 版心盒子外面蕴含 2 号右侧盒子右浮动

    两头的竖线

2). header 制作

  • header 盒子必须要有高度

  • 1 号盒子是 logo 标记 定位

    LOGO 区域

    留神写成利于 SEO 的写法

    <!-- header 制作 -->
  <div class="header w">
      <!-- logo -->
      <h1 class="logo">
              <a href="index.html" title="品优购"> 品优购 </a>
          </h1>
      </div>

    将超链接作为 logo 的布局，外面放入文字，（文字能够被 SEO）

    /*header 区域 */
.header {
  position: relative;
  height: 105px;
}
.logo {
  position: absolute;
  top: 25px;
  left: 0;
  width: 175px;
  height: 56px;
}
.logo a {
  display: block;
  /*overflow: hidden;*/
  width: 175px;
  height: 56px;
  background: url(../img/logo.png) no-repeat;
  /*text-indent: -999px;*/
  font-size: 0;
}

    而后将 logo 设置为背景图：而后通过 text-indent 缩进的属性把文字赶走到眼帘以外的中央。

  • 2 号盒子是 search 搜寻模块 定位
  • 3 号盒子是 hotwrods 热词模块 定位

  • 4 号盒子是 shopcar 购车车模块

    • count 统计局部 用相对定位做
    • count 统计局部 不要给宽度，因为可能买的件数比拟多，让件数撑开就好了 给一个高度
    • 肯定留神左下角 不是圆角 其余三个是圆角
.count {
    position: absolute;
    top: -5px;
    /* 应该是左侧对齐 文字能力往右走显示 */
    left: 100px;
    background-color: #e60012;
    height: 14px;
    padding: 0 3px;
    line-height: 14px;
    color: #fff;
    /*border-radius: 左上角 右上角  右下角  左下角;*/
    border-radius: 7px 7px 7px 0;
}

3). nav 制作

  • nav 盒子通栏有高度 而且有个下边框
  • 1 号盒子 左侧浮动 dorpdown 下拉导航 外面蕴含 dt dd

  • 2 号盒子右侧浮动 navitems 导航栏组

    2). footer 底部制作

  • footer 页面底部盒子 通栏 给一个高度 灰色的背景
  • footer 外面 首先一个 大 的版心
  • 版心外面蕴含 1 号盒子 mod_service 服务模块 module 模块的意思
  • 版心外面蕴含 2 号盒子 mod_help 帮忙模块
  • 版心外面蕴含 3 号盒子 mod_copyright 版权模块

3). mod_service 服务模块制作


仍然是 ul>li 的构造
在 li 里再左右分两个盒子，一个装图一个装字
不赘述

4). main 主体模块制作

这部分是 index 外面 专有的，留神 须要新的款式文件 index.css

  • main 盒子 宽度 为 980 像素，间隔 右边 220 给一个 margin-left 就好了，给高度就不必革除浮动。
  • main 外面蕴含 左侧盒子 左浮动 focus 焦点图 模块

  • main 外面蕴含 右侧盒子 右浮动 newsflash 新闻快报模块

    5). newsflash 新闻快报模块

  • 1 号盒子 为 news 新闻模块
  • 2 号盒子 为 lifeservice 生存服务模块
  • 3 号盒子为 bargain 特价商品

6). news 新闻模块

  • 留神，这里咱们 分为 高低两个模块，然而 两个模块 都用 div
  • 1 号 盒子 news-hd 新闻头部模块 给一个 高度 和 下边框 dotted
  • 2 号 盒子 news-bd 新闻主题局部 外面 蕴含 ul 和 li 还有 链接

7). lifeservice 生存服务模块

此中央有个小技巧，

  • lifeservice 盒子 宽度为 250 然而装不开 外面的 4 个 小 li
  • 能够让 lifeservice 外面的 ul 宽度为 252 就能够 装的下 4 个 小 li

  • lifeservice 盒子 overflow 暗藏多余的局部就能够了。
    这里的图用到了 CSS 精灵技术

    8). recommend 举荐模块

  • 外面蕴含 2 个盒子，浮动即可
  • 1 号盒子 recom-hd

  • 2 号盒子 recom-bd 留神外面的 小竖线

    1). 楼层区 floor

留神这个 floor 一个大盒子 蕴含，不要给高度，内容有多少，算多少

2). 家用电器模块

  • 这个模块 jiadian 不须要写款式
  • 版心居中对齐 因为这些模块 基本相同，上面的 模块根本用这些款式 所以 咱们上面两个盒子的命名是：
  • 1 号盒子 box-hd 给一个高度，有个下边框 外面分为左右 2 个盒子
  • 2 号盒子 box-bd 不要给高度。

3). box-hd 模块

  • 有高度
  • 右边 h3 盒子
  • 左边 div 命名为 tab-list 因为用到 tab 切换成果，所以 外面 要用 ul 和 li 来做。

4). box-bd 模块

  • 依据 tab 切换的原理，应该还须要一个 tab-content 的 内容来包装 外面的 5 个 盒子
  • 分为 5 个大列 列的宽度 不统一
    总体还是 ul>li 的布局
    图片的过渡成果
.box-bd img {
    /* 过渡写到自身上，谁做动画，给谁加 */
    transition: all .2s;
}
/* 咱们鼠标通过图片 往右走 8px*/
.box-bd img:hover {margin-left: 8px;}

5). 侧边栏 fixedtool 制作

此模块用固定定位 外面蕴含 li

2. 列表页制作

1). 列表页筹备工作

  • 列表页面是新的页面，咱们须要新建 list.html
  • 因为 列表页的 头部 和 底部 基本一致，咱们须要 把首页中的 头部 和 底部的 构造复制过来
  • 头部和底部的 款式，列表也须要，因而 list.html 也须要 引入 common.css

  • 同时 须要新的 list.css 文件 这个 款式文件，外面只写 list.html 构造外面的内容就好了

    2). 列表页 header 和 nav 批改

  • 秒杀盒子 sk 定位 即可 second kill
  • 1 号 盒子 左侧浮动 sk_list 外面蕴含 ul 和 li

  • 2 号盒子 左侧浮动 sk_con 外面 蕴含 ul 和 li

    3). 列表页主体盒子 sk _container

这个盒子外面蕴含了 所有的 列表页的所有主体内容

  • 1 号盒子 sk _container 给宽度 1200 不要给高度
  • 2 号盒子 sk_hd 插入图片即可
  • 3 号盒子 sk_bd 外面蕴含 很多的 ul 和 li

4). sk_goods 布局

  • 此 li 咱们命名为 sk_goods
  • 1 号地位 有 a 蕴含 本图片 和上面的 题目 插入 图片即可 seckill_mod_goods_img 能够做一个 鼠标放入 图片 上滑动的成果
  • 2 号地位 题目 H5 命名为 sk_goods_title
  • 3 号 地位 为 价格 div 命名为 sk_goods_price
  • 4 号地位 为 div 命名为 sk_goods_progress 此处，咱们 采取 代码的模式 写出 这个 导航条

  • 5 号地位 为 a 链接 命名为 sk_goods_buy 此处留神，因为父盒子曾经有左右 padding 咱们这里用定位适合。

    5). 分页制作 page

  • 最大的盒子 咱们 div 命名为 page 留神外面的盒子 全副用 行内块

  • 1 号盒子 用 span 命名为 page_num (页码的意思) 外面 放 a 把 a 转换为 行内块 设置款式

    • pn_prev 上一页 pn_next 下一页

  • 2 号盒子 用 span 命名为 page_skip (skip 跳转 转移的意思) 外面留神 有 input 和 button

    1). 详情页 detail.html 罕用单词

名称 阐明
主体 de_container
面包屑导航 crumb_wrap
产品介绍 product_intro（introduction 介绍）
预览包 preview_wrap（左侧局部）
预览缩略图 preview_img
预览列表 preview_list
左按钮 arrow_prev
右按钮 arrow_next
小图列表 preview_items
产品详细信息区域 itemInfo_wrap（右侧局部）
头部名称 sku_name skull 头骨
新闻 news
摘要 summary
评估 remark
价格摘要 summary_price
配送至 summary_stock
反对 summary_support
抉择 choose
抉择按钮组 choose_btns
抉择数量 choose_amount
减去 reduce
退出购物车 addshopcar
产品细节 product_detail（detail 形容）
左侧边 aside
详细描述 detail

2). 面包屑导航

  • crumb_wrap 面包屑导航
  • 对于面包屑导航的由来是源于一则童话故事的一个词语：汉泽尔和格蕾特尔两个人在穿过森林是，为了防止找不到回家的路，他们在沿途走过的中央都会撒下面包屑以便于依据这些面包屑找到回家的路。

3). 产品介绍 模块

  • 1 号盒子 本模块 命名为产品模块 product_intro（introduction 介绍）
  • 此模块不要给高度 因为右侧的模块内容高度不固定
  • 外面有 2 个盒子 分为是 2 号盒子 和 3 号盒子
  • 2 号盒子为 预览区域 preview_wrap 给宽度，给高度，左浮动
  • 3 号盒子为 产品详细信息区域 itemInfo_wrap 给宽度，不要给高度 左侧浮动

  • 4). 预览区域制作

  • 1 号盒子 为 图片预览 命名为 preview_img 留神外面的图片，咱们切图的时候是 398*398 像素的

  • 2 号盒子 为 预览列表 命名为 preview_list

    3.1 preview_list 制作

  • 盒子 有左右按钮 arrow_prev arrow_next 用定位即可

  • 两头 用 ul 命名为 list-item 给宽度和高度 而后 margin: 0 auto; 程度居中对齐即可

    5). 产品详细信息区域制作 itemInfo_wrap

  • 此盒子命名为 itemInfo
  • 1 号盒子 为 头部 sku_name
  • 2 号盒子 为 最新新闻 news
  • 3 号盒子 为 产品具体摘要 咱们命名为 summary（摘要的意思）之所以上面都是摘要局部，因为外面格局基本相同。

  • 上面为具体命名

    名称 阐明
    头部名称 sku_name skull 头骨
    新闻 news
    摘要 summary
    评估 remark
    价格摘要 summary_price
    促销摘要 summary_promotion
    配送至 summary_stock
    反对 summary_support
    抉择 choose
    抉择版本 choose_version
    抉择类型 choose_type
    抉择按钮组 choose_btns
    抉择数量 choose_amount add 是加的意思
    减去 reduce cursor: not-allowed; 禁止符号
    退出购物车 addshopcar

按 dl dt dd 来写

6). 产品细节模块 product_detail

  • 大盒子为 product_detail 模块 不要给高度，别忘记革除浮动
  • 1 号盒子 左侧浮动 命名为 aside 有宽度 不给高度

  • 2 号盒子 右侧浮动 命名为 detail 有宽度不给高度

    6.1) aside 布局

  • 1 号盒子 命名为 tab_list 给高度就好了，外面 放 ul 和 li 留神这是 tab 栏切换布局

  • 2 号盒子 命名为 tab_con 外面还蕴含 很多个 ul.item 和 下面的 tab_list 外面的 li 一一对应。

    6.2) detail 布局

  • 1 号盒子 命名为 detail_tab_list 给高度就好了，外面 放 ul 和 li 留神这是 tab 栏切换布局
  • 2 号盒子 命名为 detail_tab_con 外面还蕴含 很多个 ul.item 和 下面的 tab_list 外面的 li 一一对应。
    ## 7. 注册页面 register

注册页面

名称 阐明
注册专区 registerarea
注册内容 reg-form
谬误的 error
胜利的 success
默认的 default

7.1 registerarea 布局

正文完
css
发表至： css
2022-03-22
 0
关于css:5个可以尝试的-CSS-新特性译
关于css:CSS书写案例
关于css:UnoCSS给了我一个不用tailwindcss的理由
关于css:CSS选择器以及权重顺序