静态网页案例

首页index.html结构布局

• header区域
  • 含义：网页顶部结构常用命名，通常包含：
    1. logo 使用h1 > a 结构，可以适当添加SEO搜索的关键字
    2. 导航nav等内容 常用ul > li > a
  • 布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。
  • 整体结构：100%的div > 版心的div
  • 注意：为了避免更改公共的版心样式，<div>需要重新添加一个class属性值
  • 如图

寻找图片方法

1. 先找到需要使用的精灵图
2. 在设计图中量取图片的大小
3. 在精灵图中去寻找合适大小的图片(宽、高要一样)
4. 判断是否能用padding来制作背景图(需要查看紧邻的后方，在需要设置padding的宽度里面，是否可以只显示当前一个图片，否则就不行)
5. 用小标签制作钩子（选择相对定位与绝对定位来制作）

其他问题

• 下拉菜单除“select、option”之外的制作方法

• 疑惑：浮动的span或者input标签，应该是具有二象性的。那么在设计图中量取的时候，可以直接设置其宽高达到量取的数，还是说只量取文字撑开的高度，剩下的用padding撑开，两者有什么区别吗?(已解决)

• 问题:重新学习下行高

• 左小右大: ul标签横的是li,下拉菜单(display:none;) 下拉菜单还是运用dt\dd来设计的,此次可以设置多个dl来包含dt和dd

• 设置行高的时候需要注意：如果只是纯文字，那么设置多高的盒子和行高都可以，但是当你为一个很高的盒子设置了相应地行高后，背景图片依然会在左上角进行加载，那么背景图片就可能会出现问题

  • 解决方法：将高度设成背景图的宽高值

• 对于一个盒子来说，如何判断什么时候设置padding还是Margin呢？(怎么方便怎么来)

层叠综合属性的问题：

1. 先在标签类名上写上独特的样式名
2. 后写css引用层叠前面的
3. 选择器权重相同或大于

垂直居中:vertical-align: middle;