DAY05

2018.07.13学习总结

1.如果将box-sizing设置为borer-box会发生什么?

答:将box-sizing设置为borer-box,设置边框和填充,盒子的宽度不变。

border-box.PNG

2.float

float的原理就是相对于整个页面浮动起来

FLOAT.PNG
float 父元素.PNG
多页面float.PNG

3.练习4个框

4个框.PNG

4.导航条

导航条 nav.PNG

5.命名规范

1.布局相关

语义 命名 简写
盒容器 wrap wrap
盒子 box box
容器 container container
主栏 main main
侧栏 sidebar / aside sidebar / aside
文档 doc doc
头部 head hd
主体 body bd
底部 foot ft

2.模块相关

语义 命名 简写
导航 navigation nav
面包屑 crumb crumb
菜单 menu menu
选项卡 tab tab
标题 title title
内容 content content
列表 list list
表格 table table
排行榜 rank rank
登陆 login login
表单 form form
品牌标识 logo logo
广告 advertise ad
搜索 search search
切换 slide slide
提示 tips tips
版权 copyright copyright
按钮 button btn
输入 input ipt
结果 result result
下载 download dowload
新闻 news news
注册 register reg
热点 hot hot
展开 collapse collapse
警告 alert alert
提示 tooltip tooltip
下拉 dropdown dropdown

3.状态相关

语义 命名 简写
语义 命名 简写
选中 selected selected
当前 current current
激活 active active
显示 show show
隐藏 hidden hide
打开 open open
关闭 close close
出错 error err
禁用 disabled disabled
扩展 extend extend

4.命名规则

4.1驼峰命名



4.2 划线命名




你可能感兴趣的:(DAY05)