CSS-----项目前期工作

文件命名规范

统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊字符。

原则： 1）方便理解，见名之意

2）方面查找

例如：

首页—index
产品列表—prolist产品详细页面—pro_detail
新闻列表—newslist新闻详细页面—news_detail
发展历史—history
关于我们—aboutus
联系我们—linkus，contactus
信息反馈—feedback
留言—leavewords

图片命名规范

图片的名称分为头尾两部分，用下划线隔开，头部表示此图片的大类性质，例如广告，标志，菜单，按钮等

• banner：放置在页面顶部的广告，装饰图案等长方形的图片
• logo：标志性的图片
• button：在页面上位置不固定，并且带有链接的小图片
• menu：在页面中某一位置连续出现，性质相同的链接栏目的图片
• pic：装饰用的图片

例子：

banner_sohu.gif, banner_sina.gif
menu_aboutus.gif,menu_job.gif
title_news.gif
logo_police.gif
pic_people.gif

代码规范

html

缩进使用soft tab（4个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线（HTML5 规范 指出他们是可选的）；

不要忽略可选的关闭标签，例： 和 。

块元素可以嵌套行内元素和行内块,行内元素不可以套块元素(a除外) a>div

复合标签的直接子代按照规定写(ul>li,ol>li,dl<dt+dd)

一个界面上有且只有一个H1元素,一般用在logo上

自定义属性时,最好用data-属性名 命名属性名字 方便获取

CSS

尽量用class属性取挑选元素 .类名 {}

不要写超出三个-5个的类选择器

不要出现任何单独的标签选择器!!!

#id 100 权重最大 父元素 id

css书写规范

div.a {
    布局相关的属性;  display,overflow,float,position,margin,padding
    本身的属性;width,height,border,bgc,
    文本的属性;text-,font-,...
    其他属性;z-index,border-radius,box-shadow,cursor,resize...
    
}

网站三剑客(head)

TDK

Title 网页标题 4-6词 词语

<title>   </title>

Description 描述

<meta name="description"  content="U.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">

Keywords

网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东