html–Day05 命名方式+背景
一丶命名规范
<pre>
命名:根据每块元素的主题 或者功能、在页面上的位置
驼峰命名 从第二个单词开始每个单词的首字母大写 #mainLeftBox{}
每个单词中间以“-”隔开或者‘_’ #main_left_box{}
写包含样式的时候能找到这个元素并且不影响其他元素即可
页头:header 如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法
登录条:loginBar 标志:logo 侧栏:sideBar
广告:banner 导航:nav 子导航:subNav
菜单:menu 子菜单:subMenu 搜索:search
滚动:scroll 页面主体:main 内容:content
标签页:tab 文章列表:list 提示信息:msg
小技巧:tips 栏目标题:title 加入:joinus
指南:guild 服务:service 热点:hot
新闻:news 下载:download 注册:regsiter
状态:status 按钮:btn 投票:vote
合作伙伴:partner 友情链接:friendLink 页脚:footer
版权:copyRight 外套:wrap 版 权:copyRight 商 标:label
标 题:title 顶导航:topnav 边导航:sidebar 左导航:leftsideBar
右导航:rightsideBar 标 语:banner 菜单内容1: menu1Content
菜单容量: menuContainer 子菜单: submenu
边导航图标:sidebarIcon 注释: note
面包屑:breadCrumb(即页面所处位置导航提示)
容器:container 内容:content 搜索:search
登陆:login 功能区: shop(如购物车,收银台)
当前:current
</pre>
二丶书写规范
1、所有书写均在英文半角状态下的小写;
2、id,class必须以字母开头;
3、所有标签必须闭合;
4、html标签用tab键缩进;
5、属性值必须带引号;
6、<!-- html注释 -->
7、/* css注释 */
8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签;
9、p,dt,h标签 里面不能嵌套块属性标签;
10、a标签不能嵌套a;
11、内联元素不能嵌套块;(a除外)
三丶背景属性
background-size x 宽 ,y 高 背景尺寸
contain 让背景图片完全显示在盒子里面,但是会造成盒子有一部分空白
cover 让背景图片完全填满在盒子里面,但是会造成图片有
一部分显示不出来
background-repeat 设置背景图片平铺/重复
repeat 平铺(默认)
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
background-position: x y 背景位置,默认左上角
px像素值
百分比
方位值 : top left bottom right center,
注意:只有方位值才可以颠倒顺序
如果只写了一个值,另外的一个值默认是center
background-attachment: 设置图片固定
scroll 默认, 随着浏览器的滚动而滚动
fixed 固定
复合属性:
background: yellow url("images/01.jpg") no-repeat center top/cover ;
颜色 图片路径 平铺 位置/大小