HTML与CSS学习第9天

小兔鲜项目

目录

• 小兔鲜项目
• • 1. 项目布局思路
  • • 1. 整体结构
    • 2. 布局中各个部分标签用法
  • 3. 一些技巧
  • 4. 命名规范
  • • 1. 类名
    • 2. 标签名

1. 项目布局思路

1. 整体结构

• 大致分为头部部分（header），中间内容部分，尾部部分（footer）
• 头部部分（header）和尾部部分（footer）在实际开发中为页面的通用部分，其css样式可以单独一个样式表

2. 布局中各个部分标签用法

• 导航：ul中放li，li中放a
• logo部分：用h1标签包裹a，a包裹网站名称，logo为a的背景图片，网站名称文字字体大小为0（这里包裹字体方便代码阅读）
• 搜索框部分：div中放input，input前面加伪元素放搜索图标精灵图
• 购物车部分：层叠问题，子绝父相。
• banner大图：区块标签section，里面放ul，ul中放li，li中放a，a中放banner图
• banner轮播指示器：ol中放li

3. 一些技巧

• 文字前后的精灵图：
  • 考虑伪元素，转换为行内块元素，vertica-align：middle
  • 考虑伪元素，子绝父相
• 文字前后的|
  • 直接键盘打上
  • 边框
• 精灵图颜色变化（精灵图有多个，但位置不同）
  • background-position
• 过渡效果：让某元素先隐藏，然后在从底部弹出
  • 子绝父相
  • 子元素定位到父元素底部，超出底部
  • 给父元素设置overflow：hidden，达到隐藏的效果；
  • 然后父元素被hover后，子元素定位到原来的位置

4. 命名规范

1. 类名

• xxx为项目名称（英文缩写）

• 头部区域：.xxx-header，.xxx-hd

• 尾部区域：.xxx-footer

• 版心：.container

• 快捷菜单栏：.xxx-shortcut

• 主导航：.xxx-main-nav

• 搜索框：.xxx-search

• *购物车：.xxx-cart

• banner大图：.xxx-banner

• 侧边栏导航：.category

• 其他部分：xxx-其他部分英文

2. 标签名

• 导航：nav
• 侧边栏：aside