css狂记】的更多相关文章

接着上一篇 html狂记,同样是DIV+CSS传统站点开发,同样只是收集.整理... CSS 背景属性(Background) 属性 描述 CSS background 在一个声明中设置所有的背景属性. 1 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动. 1 background-color 设置元素的背景颜色. 1 background-image 设置元素的背景图像. 1 background-position 设置背景图像的开始位置. 1 ba…
由于承接一部分站点优化工作,竟无节操地好几天没有喂博客,好了,今天完成交接工作,马上奉上DIV+CSS传统开发的干货一枚,内容绝非原创,仅是收集.学习.消化.总结.吐出... 基本结构标签: <HTML></HTML>     表示文件为HTML文件 <HEAD></HEAD>     文件的头部,定义使用的脚本.样式.标题等     <TITLE></TITLE>   文件的标题,标题出现在浏览器标题栏中     <META&…
css 绝对定位:一个元素绝对定位时,浏览器首先将它从流中完全删除,然后浏览器再把这个元素放在属性指定的位置上,对其他元素没有影响   绝对定位要相对于最近的父级元素进行定位 position: absolute;  // 相当于到页面距离 固定定位: position: fixed;  // 相当于到浏览器窗口距离 css链接…
在CSS中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:float属性不具有继承特性,就是说子元素不会继承父元素的浮动属性. 在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. clear 属性定义了元素的哪边上不允许出现浮动元素.不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距…
实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系,body作为整个页面是最大的盒,而在这个最大的盒里面的第一层子盒们构成了全局布局,在这些子盒内部,又可能分出若干个盒以形成局部布局.因此,在规划一个网页的布局时,先区分出有哪些大的板块作为处于全局布局一级的大盒,再在这些大盒内部进行局部小盒子的布局以最终实现想要达到的页面布局效果. 例如,上面的布…
伪类选择符的顺序:L-V-H-A CSS提供了四种元素设置链接的颜色,包括:link.:visited.:hover.:active,它们的声明是有一定顺序的,我们简称这种顺序为L-V-H-A,即link最先,其次visited,之后hover,最后active,如此声明才能保证hover与active状态显示正确的样式 表单元素不显示光标 readonly unselectable="on"…
正则.正则..往往在某个不经意间显示其强大的潜能 概念等基础知识不做介绍,直奔规则.格式.实例…… 元字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.或一个向后引用.或一个八进制转义符.例如,“\n”匹配字符“n”.“\\n”匹配一个换行符.序列“\\”匹配“\”而“\(”则匹配“(”. ^ 匹配输入字符串的开始位置.如果设置了RegExp对象的Multiline属性,^也匹配“\n”或“\r”之后的位置. $ 匹配输入字符串的结束位置.如果设置了RegExp对象的Multili…
布局 二栏布局 利用absolute, margin .container { position: relative; } nav { position: absolute; left: 0px; width: 200px; } section { /* position is static by default */ margin-left: 200px; } 利用float, margin nav { float: left; width: 200px; } section { margin…
代码优化 一个按钮的例子,使其值同比例变化; button{ color: white; background: #58a linear-gradient(#77a0bb, #58a); padding: 6px 16px; border-radius: 4px; //由padding+content构成,分别扩展 border: 1px solid #446d88; font-size: 20px; line-height: 30px; //shadow: insert <x/y> <…
1. div 内容超出 (做换行处理)   要注意 white-space属性的运用 设置 div width:100%;(或者固定值) 设置换行  word-break: break-all; 设置之后发现没有效果,发现在祖级div中设置 white-space: nowrap; 不换行处理. 父级菜单需要不换行处理,所以在父级菜单添加white-space: normal; 解决…