{ display: none; /* 不占据空间,没法点击 */ }
{ visibility: hidden; /* 占据空间,没法点击 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,没法点击 */ }
{ position: absolute; top: -999em; /* 不占据空间,没法点击 */ }
{ position: relative; top: -999em; /* 占据空间,没法点击 */ }
{ position: absolute; visibility: hidden; /* 不占据空间,没法点击 */ }
{ height: 0; overflow: hidden; /* 不占据空间,没法点击 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ }
在父级添加 overflow:hidden
优点:不存在结构和语义化问题,代码量极少
缺点:内容增多时候容易造成不会自动换行致使内容被隐藏掉,没法显示需要溢出的元素父元素也设置浮动(加个float:left/right)
优点:不存在结构和语义化问题,代码量极少
缺点:使得与父元素相邻的元素的布局会遭到影响,不可能1直浮动到body,不推荐使用父元素设置 display:table
优点:结构语义化完全正确,代码量极少
缺点:盒模型属性已改变,由此酿成的1系列问题,得不偿失,不推荐使用使用 :after 伪元素
优点:需要注意的是 :after 是伪元素,不是伪类(某些CSS手册里面称之为“伪对象”),很多清除浮动大全之类的文章都称之为伪类,不过csser要严谨1点,这是1种态度。
由于IE6⑺不支持:after,使用 zoom:1 触发 hasLayout。
缺点:兼容性不是很好。在浮动的元素后面添加空标签
清除浮动
优点:简单明了
缺点:无意义的空标签,不利于语义化
命名规范说明 |
---|
1)、所有的命名最好都小写 |
2)、属性的值1定要用双引号(“”)括起来,且1定要有值如class=”divcss5”,id=”divcss5” |
3)、每一个标签都要有开始和结束,且要有正确的层次,排版有规律工整 |
4)、空元素要有结束的tag或于开始的tag后加上”/” |
5)、表现与结构完全分离,代码中不触及任何的表现元素,如style、font、bgColor、border等 |
6)、定义,应遵守从大到小的原则,体现文档的结构,并有益于搜索引擎的查询。 |
7)、给每个表格和表单加上1个唯1的、结构标记id |
8)、给图片加上alt标签 |
9)、尽可能使用英文命名原则 |
10)、尽可能不缩写,除非1看就明白的单词 |
CSS样式命名 | 说明 | CSS文件命名 | 说明 | |
---|---|---|---|---|
wrapper | 页面外围控制整体布局宽度 | master.css,style.css | 主要的 | |
container或#content | 容器,用于最外层 | module.css | 模块 | |
layout | 布局 | base.css | 基本公用 | |
head,#header | 页头部份 | layout.css | 布局,版面 | |
foot,#footer | 页脚部份 | themes.css | 主题 | |
nav | 主导航 | columns.css | 专栏 | |
subnav | 2级导航 | font.css | 文字、字体 | |
menu | 菜单 | forms.css | 表单 | |
submenu | 子菜单 | mend.css | 补钉 | |
sideBar | 侧栏 | print.css | 打印 | |
sidebar_a,#sidebar_b | 左侧栏或右侧栏 | |||
main | 页面主体 | |||
tag | 标签 | |||
msg#message | 提示信息 | |||
tips | 小技能 | |||
vote | 投票 | |||
friendlink | 友谊连接 | |||
title | 标题 | |||
summary | 摘要 | |||
loginbar | 登录条 | |||
searchInput | 搜索输入框 | |||
hot | 热门热门 | |||
search | 搜索 | |||
search_output | 搜索输出和搜索结果类似 | |||
searchBar | 搜索条 | |||
search_results | 搜索结果 | |||
copyright | 版权信息 | |||
branding | 商标 | |||
logo | 网站LOGO标志 | |||
siteinfo | 网站信息 | |||
siteinfoLegal | 法律声明 | |||
siteinfoCredits | 信誉 | |||
joinus | 加入我们 | |||
partner | 合作火伴 | |||
service | 服务 | |||
regsiter | 注册 | |||
arr/arrow | 箭头 | |||
guild | 指南 | |||
sitemap | 网站地图 | |||
list | 列表 | |||
homepage | 首页 | |||
subpage | 2级页面子页面 | |||
tool,#toolbar | 工具条 | |||
drop | 下拉 | |||
dorpmenu | 下拉菜单 | |||
status | 状态 | |||
scroll | 转动 | |||
.tab | 标签页 | |||
.left.right.center | 居左、中、右 | |||
.news | 新闻 | |||
.download | 下载 | |||
.banner | 广告条(顶部广告条) |
<script type="text/javascript" href="xxx/xxx.js"> 这是援用JS文件
<script type="text/css" href="xxx/xxx.css">这是援用CSS文件
<script type="text/javascript" src="http://www.wfuyu.com/uploadfile/cj/20150502/xxx/xxx.js"> 这是援用JS文件
<script type="text/css" src="http://www.wfuyu.com/uploadfile/cj/20150502/xxx/xxx.css">这是援用CSS文件
根据 HTML5 规范,在引入 CSS 和 JavaScript 文件时1般不需要指定 type 属性,由于 text/css 和 text/javascript 分别是它们的默许值。
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>