1、<input type='button' id='btn' />
css代码
#btn{text-indent:-9999px; *line-height:200px; *over-flow:hidden;}
注释:对于input标签的text-indent属性为负数时,ie6,7下的效果会使input本身也消失了,用line-height和over-flow可以达到相同的效果;
2:在低版本的ie6,7下,元素都会占据默认的高度,在做一些处理的时候,可以加上height:0,overflow:hidden,去除其本身的高度;
如:css模拟三角的定位
<div id='d'>
<i></i>
<div>
#d{position:relative; width:20px; height:20px; border:1px solid #000;}
#d i{position:absolute; border-color:red transparent transparent; border-style:solid; border-width:10px; *height:0; overflow:hidden}
3:少用定位;
4:少用padding,
5:一个元素的宽度值,是它width加上padding的值,这样计算宽度的时候要特别注意,好的做法,是在外层加一个div,然后设置它的宽度,里面的div则可根据需要设置padding值,元素的宽度更好控制。
<div>
<div>
代码代码
</div>
</div>
6:在写代码时要实时想着可扩展性,及编写便于后台程序员开发的代码(主要是循环);
7:css对元素的查找是从右往左的,要注意给div,及span加class属性
<div class='a'>
<span></span>
<div>
代码,代码
</div>
</div>
不好的写法:.a div{...} //此处: 1. 第二个div内部可能还会有div,2. 性能很差 .a span{...} // 与前面的原因1一样,但如果内部的div已经是一个很小的范围,那么也可以直接这样写,看具体情况而定;
8:清除浮动用代码,overflow:hidden; zoom:1; 在一些情况下注意不可使用,即不能判定在元素外部是否还有其他元素,特别是将来可能会扩展页面时。
9:当a标签的内容为空时,在低版本的IE浏览器中,a会消失,这是IE的一个bug,可以通过增加background: url(about:blank)这行代码解决
10:代码的一致性(即可循环)
.a{
width: 100px;
background-color: yellow;
}
.d{
padding: 10px;
}
.c{
width:120px;
overflow: hidden;
z-index: 1;
}
.b{
width: 35px;
height: 35px;
background-color: #ccc;
float: left;
margin-right: 10px;
}
<!--注意class是b的div,这里两侧都加了margin-right属性,这样使div没有多余的标签,有利于后端程序员做循环-->
<div class="a">
<div class="d">
<p>111</p>
<div class="c">
<div class="b"></div>
<div class="b"></div>
</div>
</div>
</div>
未完,待续。。。
相关推荐
全书以CSS布局为主体内容,探讨CSS布局的入门知识与网站布局实战技巧、版式布局到细节、浏览器兼容性等,帮助读者改变传统的网站设计思维,进入基于Web标准的网页设计领域。本书含有大量实例,详细描述各个CSS属性,...
简单的html、css编写的购物网站模板框架,包括登录、注册、购物主窗体、物品细节展示页面、具有简单的js交互购物网站的框架,本压缩包是本人第一年学习html与css设计的期末设计作业
2.5 良好的XHTML编写习惯 2.6 CSS语法结构 2.6.1 CSS属性与选择符 2.6.2 类型选择符 2.6.3 群组选择符 2.6.4 包含选择符 2.6.5 id及class选择符 2.6.6 标签指定式选择符 2.6.7 组合选择符 2.6.8 伪类及伪对象 2.6.9 ...
可以使用CSS预处理器(如Sass或Less)来简化样式的编写和管理。 5. 布局设计:使用CSS的盒模型和浮动布局等技术来实现页面的布局,考虑页面的响应式设计和适配不同设备的屏幕尺寸。 6. 导航栏设计:创建导航栏,并...
相信你阅读过大量关于编写css时应该注意的一些细节来控制css文件的大小,比如:全局样式、继承样式、缩写样式,空格、注释等;同时你也可能用过在线工具对你的css文件进行压缩,来减少css文件的大小,但压缩后的css...
花费了2个小时的摸鱼时间,我成功地编写了一个精彩的连连看小游戏,让我感到非常开心和满足。这款游戏玩起来相当出色,现在我很高兴地与大家分享。 在这个连连看小游戏的设计过程中,我注重细节和用户体验。通过精心...
自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,极易上手,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到使用方法的每一处细节都经过精心雕琢,非常适合...
在深入CSS编码风格的细节之前,你可以找到一个天空符合的.scss过的模板 。 立即开始: curl -L git.io/template -o _<your>.scss 建筑 项目样式表的结构应严格遵循的原则, 以下顺序导入,以更好地控制可重用性...
layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心...
《基于html+css+js+jq+java+web+mysql实现简单的图书馆里系统》——虽然只是一个简单的图书馆里系统,但它综合运用了html、css、js、jq、java、web、mysql等相关的知识,特别适合入门不久的前端+后端的小伙伴进行...
主要利用HBuilder X编写,主要用于学习 主要有四个界面,分别是首页、排行榜、登录、听歌报告 界面实现有2D动态轮播图,3D动态轮播图,时间倒计时,图片动态放大缩小等 首页和排行榜界面十分仿真,注重细节,登录是...
我在编写此类课程时考虑的一些细节 您需要的东西 CSS编译器(无论您喜欢什么) 您不需要的东西 不需要JS / Javascript 您可能想使用的东西 您始终可以使用适合您需求的任何工具。 不管是什么。 它只需要了解 。 常问...
⑤网页开发的小技巧、开发的细节知识。 阅读建议:此资源以Web开发为基础学习其原理和内核,不仅是代码编写实现也更注重内容上的需求分析和方案设计,所以在学习的过程要结合这些内容一起来实践,并调试对应的代码。
⑤网页开发的小技巧、开发的细节知识。 阅读建议:此资源以Web开发为基础学习其原理和内核,不仅是代码编写实现也更注重内容上的需求分析和方案设计,所以在学习的过程要结合这些内容一起来实践,并调试对应的代码。
⑤网页开发的小技巧、开发的细节知识。 阅读建议:此资源以Web开发为基础学习其原理和内核,不仅是代码编写实现也更注重内容上的需求分析和方案设计,所以在学习的过程要结合这些内容一起来实践,并调试对应的代码。
在第一部分主要的焦点放在标记语法的例子上,也探讨了如何在标签上应用CSS进行设计,指定样式细节.在第二章,我们将讨论几种把CSS应用到一份文档,网站,甚至是单一标签上的做法.除此之外也会讨论怎么对早先版本浏览器...
这本书是关于使用HTML5,CSS3和JavaScript编写WinRT应用程序。我们的主要重点将放在这些网站的技术应用在Windows8平台上,而不是在探索这些网络技术本身的细节
它包含了一个使用Java编写的后端应用程序,以及一个使用HTML、CSS和JavaScript编写的前端用户界面。这个系统可以帮助企业进行员工信息的管理和操作,包括添加、删除、修改和查询员工信息等功能。在后端,这个系统...
《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码,书中详细说明了作为团队一分子,应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面...
CSS学习越深入,我们需要关注的细节之处就越多,今天我们通过11个注意点来提高CSS的网页渲染效率。 1、十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到...