文档库 最新最全的文档下载
当前位置:文档库 › CSS学习笔记整理

CSS学习笔记整理

CSS学习笔记整理
CSS学习笔记整理

background-color:

background-image:url(路径)

background-repeat:repeat,repeat-x(水平重复),repeat-y(垂直重复),no-repeat(无重复) background-attachment:fixed (只有设置成这样才能才firefox中正常工作)(图像不会随着页面的滚动而滚动)

background-position:center 或者 30% 20%(用%定义)或者50px 100px(用像素定位)

body{color:}

h1{color:}

p.ex{color:}

h1{letter-spacing:-0.5em}

h1{letter-spacint:20px} (规定字符间距)

p.small{line-height:90%} (使用百分比设置行间距)

p.small{line-height:30px} (使用像素值设置行间距)

p.small{line-height:2}(使用数值设置行间距)

h1{text-align:center} (文本对齐)

h1{text-decoration:overline/linethrough/underline/blink/none} (文本修饰)

p{text-indent:1cm} (文本缩进)

p.uppercase/lowercase/capitalize {text-transform:uppercase/lowercase/capitalize}(控制文本中的字母)

P{white-space:nowrap}(禁止文本拆行)

p.spread{word-spacing:30px}(增加单词间距)

p.serif(font-family:"Times New Roman",Georgia,Serif}(设置文本的字体)

h1{font-size:200%}(设置字体尺寸)

h1{font-style:normal/italic/oblique}(设置字体的风格)

h1{font-variant:normal/small-caps}(设置字体的异体)

h1{font-weight:normal/bold/800}(设置字体的粗细)

h1{border-style:dotted/dashed/solid/double/groove/ridge/inset/outset}(设置四边框样式)

h1{border-width:5px}(设置边框宽度)

h1{border-color:????}(设置四边框的颜色,分别对应的上右下左)

h1{border-bottom/left/right/top-color/style/width}(下/左/右/上-边框-颜色/样式/宽度)

p.left/right/top/bottommargin{margin-left/right/top/bottom:2cm}(设置文本的左右上下外边距)

td{padding-bottom/left/right/top:2cm或者10%}(用数值或者百分比值设置单元格的下左右上内边距)

ul.x{list-style-type:disc/circle/square/noe}(设置不同类型的无序列表项标记)

ol.x{list-style-type:decimal/lower-roman/upper-alpha}(设置不同类型的有序列表项标记)

ul{list-style-image:url{'图片路径'}(将图片作为列表项标记)

ul.inside/outside{list-style-position:inside/outside}(设置列表标记位置)

p{outline-color/style/width:red/solid/3px}(设置轮廓的颜色/样式/宽度)

table{table-layout:automatic/fixed}(设置表格布局内容全显示,部分显示)

table{border-collapse:separate;empty-cells:show}(显示表格中的空单元非ie) table{border-collapse:collapse}(合并表格边框)

table{border-collapse:separate;border-spacing:10px 20px}(设置表格之间的空白非ie)

img.big{height/width:100px/50%}(用像素值或百分比值设置图像的高度/宽度)

p/div{display:inside/none}(将元素设为内联,前者显示,后者隐藏)

span{display:block}(定义块级元素)

img{float:right}(将图像浮动与段落的右侧)

h2{position:relative/absolute/fixed; left:-20px}(元素相对/绝对/固定定位)

h1.visible/invisible{visibility:visible/hidden}(设置元素可见或不可见)

tr.coll{visibility:collapse}(表格元素叠加非ie)

p{cursor:?}(改变鼠标)

img{float:left;clear:both;}(clear清除元素侧面)

img{position:absolute;clip:rect(0px 50px 200px 0px)}(clip剪切一副图像)

div{width:100px;height:100px;overflow:scroll/hidden/auto}(使用滚动条显示/hidden 隐藏/自动处理溢出内容)

img.top{vertical-align:text-top}(设置垂直排列图像)

img.x{z-index:-1或者1}(可以将一元素放置另一元素之后或之前)

img{position:absolute;top/left/bottom/right:0px或者5%}(使用像素值或百分比值设置图像的上下左右边缘)

a.link{...}

a.visited{....}

a.hover{....} (改变超链接的样式,颜色等值需修改该属性中的内容)

a.active{...} (备注:这4个的顺序不能变)

input:focus{background-color:yellow}(focus的使用非IE)

p:first-child{font-weight:bold;}(设置首个子对象)

q:lang(no){quotes:"_" " _"}(lang类带有值为no的lang属性的q元素定义引号的类型)

p:first-letter{color:?;font-size:xx-large}(首字母添加特效)

p:first-line{color:?;font-variant:small-caps}(首行特效)

实验DivCSS网页布局

实验九 Div+CSS网页布局 一、站点规划 在网页制作中,有许多的术语,例如: HTML、CSS、DIV等等。下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。 所有的设计第一步就是构思,构思好了,一般来说还需要制作的界面布局简单的构画出来。 下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分: 1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片; 2、内容部分又可分为侧边栏、主体内容; 3、底部,包括一些版权信息。 有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:

根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。 DIV结构如下: │body {}/*这是一个HTML元素,具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/

├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹,命名为“DIV+CSS页面布局”,在文件夹下新建两个空的记事本文档,输入以下内容: 这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。 下面,我们在标签对中写入DIV的基本结构,代码如下:

CSS+DIV布局案例

第一个例子只是告诉大家如何让页面居中,这个代码的用处一般用来做背景图,示例:http://www.smarter.co.jp/,外围是灰色的,当中页面的正文底是白色的,非常大气。这个例子主要讲上下两列,这是最常见的,也是最简单的页面表现形式,头部放logo和banner,下面是主体内容。 CSS代码如下: body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;} #container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;} #header { height:100px; background:#6cf; margin-bottom:5px;} #mainContent { height:300px; background:#cff;} 页面代码如下:

这是身体
效果下图显示:点击看大图 其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中,宽度由#container决定。 第二个例子是告诉大家如何让页面居中,如何加上头部。这个例子加上了尾部,这也是一种常见的页面表现形式,头部放logo和banner,中间是主体内容,尾部放copyright 等内容。 CSS代码如下: body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;} #container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;} #header { height:100px; background:#6cf; margin-bottom:5px;}

seo教程 学习笔记 By DrMeng

CSS+DIV网站优化(seo) 1)一个网站要有好的seo优化效果,建议先使用一套标准化的css+div布局网站,注意语义标签的使用; 2) 网站完工后要向各大搜索引擎网站登陆然后向Google提交sitemap; 3) 增加网站有权重的连接,多交一些好的友情链接; 4) 写好网站的robots.txt ; 5) 在关键字的地方使用标签定义,例如在主关键字用

、次关键字用

….; 6) 在 后面要加上title 标签,里面内容是你所要优化的关键字,img 标签中加入描述,可以适当添加关键字; 7) 结合网站优化的一系列工具来查看优化的情况,根据这些数据来改进你的优化; 8) 再根据平时做网站优化的经验,结合Google 和百度seo优化技巧来优化自己的网站. 我认为SEO就是最大限度向用户的表达你网站的中心思想(你的网站是提供什么给用户?),怎样提供给用户?那就是通过搜索引擎,所以也就是让搜索引擎知道你网站的中心思想。如果你能达到这一点,那么就是一个成功的SEOER。 下面是我对建站到SEO的一些看法,有不足的地方SEOER多给意见! 一、建站首先就是定位,也就是定位关键字,定位将来的品牌,方向。 二、选择开源程序或自己开发。(我一般用科讯CMS)不过我建议用织梦CMS。 三、在网站排版方面我强烈建议用Div+Css排版, 1、Div+Css排版可以减少网页代码,让网页代码更清晰;外链样式表的使用可以加快网页浏览速度。 2、Div+Css排版支持多平台。(浏览器的兼容性问题比较头痛,不过我已经搞明白了!呵呵!) 四、建站时的优化。 1、标题,关键字标签,描述文字都要包含关键字。(这些大家应该都明白的,不多说。* 如果不能每页都有自己的描述我建议首页保留,其它页面不要描述文字)。 A、首页最佳标题=本行业顶级概念词+站点的口号或广告语 B、栏目页最佳标题=栏目页关键字+站点名称+站点的口号或广告语 C、内容页最佳标题=文章标题(应该是长尾关键词)+所属栏目标题+站名名称+站点的口号或广告语(文字大于80字符可不加站点的口号或广告语) 2、首页优化 A、主导航明确,树形导航最佳,目录不要超过三级以上(包含关键词)。主导航中不能体现的关键字可建次导航辅助。(建议放在底部,包含关键词)。 B、首页有可更新栏目(比如:最新动态,新闻中心,最新评论等板块。) C、重要图片加ALT描述,不要堆砌关键字。 D、logo加链接到首页。 E、加友情链接(我建议从一开始就加与网站相关的链接最好PR高的。有很多人一开始什

DIV+CSS:网站首页布局实例教程

DIV+CSS:网站首页布局实例教程 第一步:页面布局与规划 在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。 下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分: 1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片; 2、内容部分又可分为侧边栏、主体内容; 3、底部,包括一些版权信息。 有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:

根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。 DIV结构如下: │body {}/*这是一个HTML元素,具体我就不说明了*/ └#Container {}/*页面层容器*/

├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。 第二步:写入整体层结构和CSS 接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容: 无标题文档 这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。 下面,我们在标签对中写入DIV的基本结构,代码如下:

[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS 信息,代码如下: /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

CSS选择器笔记

CSS选择器笔记 阮一峰整理 参考网址:456 Berea Street 一、基本选择器 实例: * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } https://www.wendangku.net/doc/ba6250582.html, { background:#ff0; } https://www.wendangku.net/doc/ba6250582.html,.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器

实例: div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; } 三、CSS 2.1 属性选择器 实例: p[title] { color:#f00; } div[class=error] { color:#f00; }

td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类 实例: p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; } 五、 CSS 2.1中的伪元素

学习CSS时的个人笔记

各种元素的属性 (1)body元素 background:定义body元素的背景图片 bgcolor:定义body元素的背景颜色 leftmargin:定义body元素与浏览器左边界的距离 topmargin:定义body元素与浏览器上边界的距离 class:链接级联样式 style:直接定义级联样式 (2)文本元素 align:定义文本的水平对齐方式 class:链接级联样式 style:直接定义级联样式

text
:浏览器保持text文本的原有的格式输出 (3)修饰元素 hr元素 align:控制对齐方式 color:控制显示颜色 size:控制分隔线的高度 width:控制分隔线的宽度 img元素 scr:指定图片所在的路径 alt:指定替代图片的文本 width:定义图片的宽度 height:定义图片的高度 align:定义图片的对齐方式 border:定义图片的边框 (4)链接元素 href:指定链接的路径 target:指定链接的显示位置 _blank:浏览器在新的窗口打开链接页面 _self:在页面所在的窗口显示链接的页面(链接的默认值) _parent:在父窗口中打开链接页面 _top:在本窗口中取代框架内容并打开链接页面 (5)表单元素 action:指定处理提交数据的的程序路径 method:设置传送数据的方法 id:用来标记表单 class:使用级联样式控制表单的表现 type:指定元素的类型 size:指定表单的宽度 border:指定表单的边框 (5)表格元素 table:用来定义一个表格

tr:定义表格中的行元素 td:定义表格中的单元格 align:定义表格的水平对齐方式 border:定义表格的边框 bgcolor:定义表格的背景颜色 background:定义表格的背景图片 cellspacing:控制表格相邻单元格的间距 cellpadding:单元格边缘和内容之间的距离 valign:定义单元格中内容的垂直对齐方式 width:定义表格或者单元格的宽度 height:定义表格或者单元格的高度 colspan:合并表格的列 rowspan:合并表格的行 CSS命名参考 CSS样式表书写顺序 显示属性(display list-style position float clear) 自身属性(width height margin padding border background) 文本属性(color font text-decoration text-align vertical-align white-space other content)

DIV+CSS设计网站首页

实训课题DIV+CSS设计网站首页 实训目标熟练掌握html标签的使用 实训重点掌握CSS综合使用技巧 实训难点综合使用HTML和CSS技术 实训方法上机实训 实训准备教案、素材、案例、教材、计算机机房 实训要求1.对照实习报告的要求,完成上机任务; 2.任务完成后及时要求教师考评; 3.完善实习报告,填写实训总结; 4.遵守实训纪律,不游戏,不睡觉,不高声谈论。 实训过程 步骤内容 任务一(5min)学生到达机房后要求考勤员清查人数,学生检查电脑是否能启动,准备好教材、素材等 任务二请同学们使用记事本写HTML代码实现以下功能,并把代码保存以文件夹的形式 一、六级标题 二、水平线要求: 线左右宽占屏幕70%

线的颜色可以自由设置 1. 行控制标记 ①段标记(可以看作是空行) 代码:你好吗?很好。 显示:你好吗? 很好。 快捷键:在dreamweaver中直接按下回车键 ②换行标记
代码:你好吗?
很好。 显示:你好吗? 很好。 (10)文字对齐标记 ①...(#=left,center,right )标题的对齐 代码:

大家还在听课么?

显示:大家还在听课么? ②

... (#=left, center, right )段落的对齐 代码:默认左对齐

居中对齐

右对齐显示:默认左对齐

居中对齐 右对齐 ③

...
通用居中对齐 代码:
希望还在听
显示:希望还在听(11)文字的分区显示
...
(#=left,center,right ) 代码:
Can you feel happiness without unpleasant?
Please show me your smile.
显示: Can you feel happiness without unpleasant? Please show me your smile. 代码:
Can you feel happiness without unpleasant?
Please show me your smile.
显示: Can you feel happiness without unpleasant? Please show me your smile. 代码:
Can you feel happiness without unpleasant?
Please show me your smile.
显示: Can you feel happiness without unpleasant? Please show me your smile. (12)列表标记 ①无序列表
  • ...
(ul标记一个圆点显示的无序列表,li为表项)代码:
  • Today
  • Tommorow
显示: ?Today ?Tommorow ②制定无序列表中的标记
  • (#=disk, circle, square) 代码:

    DIV+CSS网页布局技巧实例

    DIV+CSS网页布局技巧实例1:设置网页整体居中的代码

    DIV+CSS网页布局技巧实例4:使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 注意:在同一个CSS配置节中,不要交错使用全写和缩写的颜色配置,在系统资源极低时,会导致浏览器渲染失败。 盒尺寸 通常有下面四种书写方法: ?property:value1; 表示所有边都是一个值value1; ?property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 ?property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3 ?property:value1 value2 value3 value4; 四个值依次表示top,right,bottom, left 方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:margin:1em 0 2em 0.5em;

    边框(border) 边框的属性如下: ?border-width:1px; ?border-style:solid; ?border-color:#000; 可以缩写为一句:border:1px solid #000; 语法是border:width style color; 背景(Backgrounds) 背景的属性如下: ?background-color:#f00; ?background-image:url(background.gif); ?background-repeat:no-repeat; ?background-attachment:fixed; ?background-position:0 0; 可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是background:color image repeat attachment position; 你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:?color: transparent ?image: none

    网页设计基础Div+CSS布局入门教程

    网页设计基础:Div+CSS布局入门教程 在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML 基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。 下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分: 1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片; 2、内容部分又可分为侧边栏、主体内容; 3、底部,包括一些版权信息。 有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:

    根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。 以下为引用的内容: DIV结构如下: │body {}/*这是一个HTML元素,具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/

    │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹,命名为“DIV+CS S布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容: 以下为引用的内容: 无标题文档 这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。 下面,我们在标签对中写入DIV的基本结构,代码如下:

    [color=#aaaaaa][/color]
    [color=#aaaaaa][/color]
    [color=#aaaaaa][/color]
    为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:

    学习类app运营实施计划书

    学习类app运营计划书 篇一:校园APP创业计划书 中南大学 作品名称:中南大学校园搜索APP 创业团队:凤霞海同苏玲惠宏华 付泽宇史晓娟付道二○一五年五月 目录 一、项目摘要 1.1市场背景 1.2产品简介 1.3实施计划 二、业务描述 2.1业务简介 2.2发展前景 三、产品与服务 3.1APP的设计 3.2APP的制作 3.3APP所能提供的服务 3.4APP的完善及发展方向 四、市场与销售

    4.1市场开拓 4.2营销策略 4.4市场联络 五、管理团队 5.1人员及主要职能 5.1.1人员设置 5.1.2主要职责与分工 5.2公司员工守则 六、财务分析 6.1盈利模式 6.2筹资来源 6.3成本规划 6.4收入预期 6.5收益预测 七、风险分析及对策 7.1 市场风险 7.1.1 APP正对大量行业产生深刻的影响 7.1.2 APP的发展还存在若干尚未被很好解决的硬伤7.2 财务风险及应对措施 7.3 技术风险及应对措施 八、公司发展战略 8.1公司战略

    8.2未来规划 高校搜索APP 创业计划书 一、项目摘要 1.1市场背景 随着中国互联网用户群的日益庞大,互联网产业正扮演着市场经济的重要角色。与此同时,信息时代的来临彻底改变了人们传统的通信手段。从寄信到打,从打到通话手机,从通话手机到能获取大信息量的智能手机,人们获取信息的主要手段发生了质的变化。人们不会仅仅满足于手机只有通话与发短信的功能,而更多是把手机当成接受讯息的工具,了解时事的工具,建立社交网络的工具,便利生活的工具,游戏娱乐的工具。而大学生对于各种信息平台的接受度和依赖度普遍非常强,但是市面上的生活服务类应用软件鱼龙混杂,针对大学生的需求,以大学生的利益为(于:.cSSyq.co m 书业网:学习类app运营计划书)基本出发点提供信息方便大学生的学习生活的应用软件还少之又少。于是针对大学生群体的校园搜索APP也孕育而生了。 1.2产品简介 校园搜索APP是一个依托第三方平台(IOS平台,安卓平台),针对在校大学生,聚合大学周边衣食住行等信息,分类集中发布,方便大学生学习生活的应用软件。和58同城,

    DIV+CSS基础教程

    div+css基础教程 第一节了解div+css 一、什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html 文档内大块(block-level)的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由div标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。 css是英语cascading style sheets(层叠样式表单)的缩写,它是一种用来表现 html 或 xml 等文件式样的计算机语言。 div+css是网站标准(或称“web标准”)中常用术语之一,通常为了说明与html网页设计语言中的表格(table)定位方式的区别,因为xhtml 网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位。 html语言自html4.01以来,不再发布新版本,原因就在于html语言正变得越来越复杂化、专用化。即标记越来越多,甚至各个浏览器生产商也开发出只适合于其特定浏览器的html标记,这显然有碍于html网页的兼容性。于是w3c组织进而重新从sgml中获取营养,随后,发布了xml,xml是一种比html更加严格的标记语言,全称是可扩展标记语言。但是xml过于复杂,且当前的大部分浏览器都不完全支持xml。于是xhtml这种语言就派上了用场,xhtml语言就是一种可以将html语言标准化,用xhtml语言重写后的html页面可以应用许多xml应用技术。使得网页更

    加容易扩展,适合自动数据交换,并且更加规整。 二、div+css的优势 1、符合w3c标准。这保证您的网站不会因为将来网络应用的升级而被淘汰。 2、对浏览者和浏览器更具亲和力。由于css富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。这样就支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是什么,您的网站都能很好的兼容。 3、使页面载入得更快。页面体积变小,浏览速度变快,由于将大部分页面代码写在了css当中,使得页面体积容量变得更小。相对于表格嵌套的方式,div+css将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。 4、保持视觉的一致性。以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。而使用div+css的制作方法,将所有页面,或所有区域统一用css文件控制,就避免了不同区域或不同页面体现出的效果偏差。 5、修改设计时更有效率。由于使用了div+css制作方法,使内容和结构分离,在修改页面的时候更加容易省时。根据区域内容标记,到css 里找到相应的id,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式,在团队开发中更容易分工合作而减少相互关联性。 6、搜索引擎更加友好。相对与传统的table, 采用div+css技术的网页,由于将大部分的html代码和内容样式写入了css文件中,这就使得网页中代码更加简洁,正文部分更为突出明显,

    Bootstrap学习笔记之Nestable可拖拽树结构

    Bootstrap学习笔记之Nestable可拖拽树结构 Nestable是基于Bootstrap的一个可拖拽的树结构表现插件。 下面粗略的介绍一下它的用法,只作为学习参考,如有不合适之处,请各位凑合看。 1.首先是需要引入的文件 ?bootstrap.min.css Bootstrap的CSS文件 ?font-awesome.min.css 这个是Bootstrap的一个图标和字体的插件,Nestable应该用了它的一些图标,如果不引入这个文件有可能图标不能显示出来。 ?ace.min.css 这个一直不知道是什么,没来得及查阅资料,有知道的请告知一下 ?jquery-2.0.3.min.js 这个不解释 ?bootstrap.min.js 同上 ?jquery.nestable.min.js 这是就是今天介绍的主体 ?以上文件我会统一放在附件里面 ? 2.下面是一个示例 ?HTML: ?

    1. Item 1
    2. Item 2
    3. Item 3
      1. Item 4
      2. ?在head标签内加入 ?