div+css笔记

  1. background:url(../images/dian.png) no-repeat; no-repeat (可以设置图片不重复)
  2. 背景图片的css代码,用得最多的是left top no-repeat repeat-x repeat-y设置平铺坐标(经常用的代码是background-position:left top;background-repeat:no-repeat;)。
  3. background-position可以设置left top的数值、百分比,用两个center就可以使背景图片居中(background-position:center center;)。
  4. white-space 属性 任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
  5. normal 默认。空白会被浏览器忽略。
  6. pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
  7. nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
  8. pre-wrap 保留空白符序列,但是正常地进行换行。
  9. pre-line 合并空白符序列,但是保留换行符。
  10. inherit 规定应该从父元素继承 white-space 属性的值。
  11. display:inline; 解决IE6和火狐的漂浮边距的兼容!
  12. clear:both; 清除浮动
  13. text-decoration: none; 去掉A标签的下划线
  14. text-align:center;/*让文本居中*/
  15. text-decoration:none; /*去掉下划线*/
  16. .nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时,这个a元素的样式就按下面的代码执行*/
  17. line-height:28px;/*设置行距为28px,让文字在每行的中间位置*/
  18. //兼容
  19. * html .mblc_2_2{ margin-left:-58px;}/*ie6*/ mblc_2_2为div中class名称
  20. *+html .mblc_2_1{ margin-left:-40px;}/*ie7*/ mblc_2_1为div中class名称
  21. font-weight 属性设置文本的粗细。
  22. position:absolute 固定位置 绝对定位
  23. line-height 属性设置行间的距离(行高)。

25.overflow:hidden; 超出div部分被切掉

IE浏览器兼容代码

<!--[if lte IE 8 ]>

<script type="text/javascript" src="js/unitpngfix.js"></script>

<![endif]-->

<!--[if lte IE 7 ]>

<script type="text/javascript" src="js/unitpngfix.js"></script>

<![endif]-->

<!--[if lte IE 6 ]>

<style type="text/css">

body { behavior:url("css/csshover.htc"); }

</style>

<script type="text/javascript" src="js/unitpngfix.js"></script>

<![endif]-->

新浪微博分享代码

<script type="text/javascript" charset="utf-8">

(function(){

var _w = 90 , _h = 24;

var param = {

url:location,

type:‘2‘,

count:‘1‘, /**是否显示分享数,1显示(可选)*/

appkey:‘‘, /**您申请的应用appkey,显示分享来源(可选)*/

title:‘开元财富‘, /**分享的文字内容(可选,默认为所在页面的title)*/

pic:‘‘, /**分享图片的路径(可选)*/

ralateUid:‘‘, /**关联用户的UID,分享微博会@该用户(可选)*/

language:‘zh_cn‘, /**设置语言,zh_cn|zh_tw(可选)*/

rnd:new Date().valueOf()

}

var temp = [];

for( var p in param ){

temp.push(p + ‘=‘ + encodeURIComponent( param[p] || ‘‘ ) )

}

document.write(‘<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?‘ + temp.join(‘&‘) + ‘" width="‘+ _w+‘" height="‘+_h+‘"></iframe>‘)

})()

</script>

一般的文字截断(适用于内联与块):

==============CSS================

.text-overflow{

display:block;/*内联对象需加*/

width:31em;

word-break:keep-all;/* 不换行 */

white-space:nowrap;/* 不换行 */

overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/

}

时间: 2024-10-11 15:36:45

div+css笔记的相关文章

div+css 笔记

理解CSS盒子模型 什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性 (转载) 我们可以这样理解盒子模型:内容就是盒子里装的东西,填充就是盒子里面的填充泡沫,边框就是盒子本身了,至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出,所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边

DIV+CSS笔记(二)

1.W3C盒子模型 内容区->padding->border->margin 1 <!doctype html> 2 <html> 3 <head> 4 <title>盒子模型</title> 5 <meta charset='utf-8'/> 6 <style> 7 #box{ 8 width:200px; 9 height:200px; 10 border:5px solid red; 11 padd

DIV+CSS笔记(一)

CSS层叠样式表 1.在HTML中放置CSS的几种方式 1>内联样式表 1 <p style="color:red;font-family:serif">这是内联样式表</p> 2>嵌入样式表 1 <head> 2 <style type="text/css"> 3 body{ 4 background-color:red; 5 } 6 </style> 7 </head> 3>

div+css学习笔记1

今天开始撰写我的学习笔记,今天是第一次写,但是我给自己的目标是坚持写,写给现在的自己,更写给未来的自己,希望围观的各位客官见谅. 今天学习主题是DIV+CSS,其实标准的讲应该称XHTML+CSS. 一:CSS的四种控制HTML的方式 1.行内式. 直接写在标签行内部. 例:<p style=" font:15px; color:green;"></p> 2.内嵌式. 将代码写在在html的头部<head></head>之间. 例:<

【笔记-前端】div+css排版基础,以及错误记录

现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可能不好理解,所以简单描述一下使用div+css排版基础. 下图是一个使用div+css排版的示例: html和css: <html> <head> <style> body{font-size:20px;font-weight:bold;color:white;} .bac

css笔记(二)——几种常用的模式

文本垂直居中 对于行内元素,height会自动收缩到包裹住文本的高度,所以不存在这个问题.但是对于block和inline-block等盒子元素,如果设置了height属性,则文本默认会在上方显示.如果希望文本在垂直方向上居中,可以设置line-height属性等于height属性,或者大于height属性 <div> hello world </div> div { height: 200px; line-height: 200px; } 文本水平居中,图标分列左右两侧 效果是左

css笔记-选择器详解

css笔记-选择器详解 CSS通过选择器来定位要应用样式的元素. 下面对所有的选择器做了一个解释(CSS为版本号). CSS选择器详解 选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname id="firstname" 的所有元素. 1 * * 选择所有元素. 2 element p 选择所有 <p> 元素. 1 element,element div,p 选择所有

黑客内参告诉你一个:设计师用div+css 必须知道的网页布局类型

今天我在黑客内参受到了很多的留言,很多小伙伴在表示想要建立一个属于自己的站点,让我觉得现在建站是大部分人都比较感兴趣的一个技术吧! 碰巧今天整理以前的笔记发现了一本之前遗留下来的建站笔记,现在我就手打奉献给各位吧! 同时也希望喜欢的朋友能够多多关注我的这个小博客,要是有什么问题的话也可以在下方的评论区留言哦! OK,接下来我就给大家直接步入正题:详解,设计师用div+css 必须知道的网页布局类型 网页布局大致可分为"国"字型.拐角型.标题正文型.左右框架型.上下框架型.综合框架型.封

HTML/CSS笔记归纳整理

前言: 前端无非就是围绕标签.属性.属性值这三个词展开的. *HTML基本语法: 1. 常规标签 <标签 属性1="属性值1" 属性2="属性值2"></标签> # 一个标签可以没有属性也可以有多个属性, 属性和属性之间不分先后顺序. 2. 空标签 <标签 属性1="属性值1" 属性2="属性值2" /> # 空标签没有结束标签, 用"/"代替. *HTML标题: <