html+css 小项目注意事项

复位项目样式

• 百度搜索yui reset
  
  点击百度快照
  
  转到图中的网址
  

• 复制下来在自己的项目中创建css文件，复制进去，并且引入到自己的html文件中

用盒子制作小箭头

• 就是用两个盒子旋转来进行压盖
  
• html部分
  
• css部分（需要在li里面用上相对布局）
  

去掉边框线

• outline: none;

在发现左右元素大小不对的时候可以用浮动

关于伪类旋转

• css中应该是：xxx：hover：：before（中间不能有空格否则会一个大块跟着转动）

字体图标

• 阿里的icon

下拉菜单

• 如果下拉菜单和列表之间有空隙
• 设置一个无颜色的大盒子还是一样的尺寸
• 用padding-top：10px
• 在内部再设置一个盒子，正常显示颜色

最小宽度

• min-width：111px；
• 最好给网页设置最小宽度，这样在一些时候才会有内容，不至于空白

图片和盒子之间有空隙

• vertical-align：middle
• 相当于一个居中
• 在图片的样式里面添加

盒子的高度是百分比，盒子又需要设置边框线减小高度

• box-sizing:border-box;
• 作用是让height属性是盒子的总高度

清除浮动

• 有浮动的盒子也要有清除浮动
• 清除浮动最好是在盒子的最后加一个公共类
• 这个公共类是::after写的

在设置左浮动有的东西位置不正确，不要用行高调整，用相对定位调整

左边框

如果要设置距离远一些的左边框
需要用padding-left

在半透明的背景颜色中，不要用opacity要用rgba，否则字会跟着一起虚化

两行文字

用《P》，一行用《em》

关于过渡

比如一个盒子有盒子和图片，要实现图片的某个动画效果，过渡需要加载图片上面，而不是其他地方