小兔鲜项目
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