Welcome

首页 / 脚本样式 / CSS

CSS样式表的背景渲染效率

2017-02-06 45
我的MzTreeView1.0树控件发布至今，得到了不少意见反馈，很多网友给了我很多的中肯的建议，也指出了这个控件里的诸多BUG和不足之处，所以我准备写一个新版本的树，将大家的建议都整合进来实现。这几天我就一直在写新版的树，树控件最重要的是效率，特别是大节点量的时候，效率稍微差点的模式就会拖垮浏览器，所以新版的树我首要的还是提高效率，比如增加异步数据加载的支持等，另外我还有一个设想，就是树的树型结构竖线用样式表（背景图）来实现，样式表背景图片只需要加载一次...

第1天:选择什么样的DOCTYPE

2017-02-06 40
前言大家好！这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作，同时把过程中的心得和经验记录下来，希望对大家有点帮助。好了，让我们开始吧第一天开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。查看本站首页原代码，可以看到第一行就是：<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN...

第2天:什么是名字空间

2017-02-06 41
DOCTYPE声明好以后，接下来的代码是：<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 通常我们HTML4.0的代码只是<html>，这里的"xmlns"是什么呢？这个"xmlns"是XHTML namespace的缩写，叫做"名字空间"声明。名字空间是什么作用呢？阿捷自己的理解是：由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表...

第3天:定义语言编码

2017-02-06 42
第三步是定义你的语言编码，类似这样：<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312（简体中文），制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。通常这样定义就可以了。但是要补充说明的是，XML文档并...

第4天:调用样式表

2017-02-06 48
用web标准设计网站，过渡的方法主要是采用XHTML+CSS，css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS，如果你以前不常用，那么现在就开始学习吧。要制作符合web标准的网站，不懂CSS是设计不出漂亮的页面的。事实上，所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局，现在要改用DIV来定位和布局。这是思维方式的变化，一开始有些不习惯。呵呵，任何变革都会有阻力的，为了享受标准带来的"益处"，放弃一些老的传统做法...

第5天:head区的其他设置

2017-02-06 42
这些技巧主要讲meta标签设置的，其实与符合web标准关系不大，只要注意在最后加"/"关闭标签就可以，但是既然是入门教程，就写得详细一点吧。收藏夹小图标如果你将本站加入收藏夹，可以看到在收藏夹网址之前的IE图标变成了本站特别的图标。要实现这样效果很简单，首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区：<link rel="icon" href="/favicon.ico" type="...

第6天:XHTML代码规范

2017-02-06 43
在开始正式内容制作之前，我们必须先了解一下web标准有关代码的规范。了解这些规范可以帮助你少走弯路,尽快通过代码校验。1.所有的标记都必须要有一个相应的结束标记以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如:<...

第7天:CSS入门

2017-02-06 39
在了解XHTML代码规范后，我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了，可以跳过这一节，直接进入下一节。CSS是Cascading Style Sheets（层叠样式表）的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。1.基本语法规范分析一个典型CSS的语句：p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 其中"p"我们称为"选择器"（selectors），指明我们要给"p"定义...

第8天:CSS布局入门

2017-02-06 46
CSS布局与传统表格（table）布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层（div）来定位，通过层的margin,padding,border等属性来控制版块的间距。1.定义DIV分析一个典型的定义div例子：#sample{ MARGIN: 10px 10px 10px 10px;PADDING:20px 10px 10px 20px; BORDER-TOP: #CCC 2...

第9天:第一个CSS布局实例

2017-02-06 41
接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事...

第10天:自适应高度

2017-02-06 47
如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子（白色背景框模拟一个页面）：Body 这里是#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDT...

第11天:不用表格的菜单

2017-02-06 39
布局初步搭建起来，我开始填充里面的内容。首先是定义logo图片：样式表：#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}页面代码：<div id="logo"><a title="网页设计师" href="http://www.w3cn.org/" ><img height="80" alt="链接到w3cn.org首页" src="images/logo_w3...

第12天:校验及常见错误

2017-02-06 44
辛苦了好多天，我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们如何知道自己制作的页面真的符合web标准？W3C和一些志愿者网站提供了在线校验程序，来帮助我们检查页面是否符合标准，并提供了修正错误的帮助信息。这些校验非常有用，是我调试页面第一步要做的事情。1.XHTML校验校验网址：http://validator.w3.org/ 校验方式:网址校验、文件上传校验 校验成功，会显示"This Page Is Valid XHTML 1.0 T...

VML的基本概念

2017-02-06 44
VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的，在我认为， VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML，其中的文本和图片可以很容易的转换，但如果是手绘制的图形在以往的IE里面就无法解释了，如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE里面，使IE也具备了绘图功能。VML的全称是Vector Markup La...

Shape对象与VML坐标系

2017-02-06 45
Shape是VML最基本的对象，利用它可以画出所有你想要的图形。在VML中，使用的坐标并不是Document的坐标，它有自己的坐标系，这样一来，动态改变它的坐标，就可以实现放大、缩小、旋转等功能了。shape的 CoordSize 属性就是用来定义坐标的，它有两个参数，<v:shape CoordSize="2800,2800" />， 这里的2800,2800 是横纵坐标被分成了2800个点，并不是HTML里面默认像素。如果没有设置圆点，VM...

Line,Polyline（线）对象

2017-02-06 70
Line是做图中最常用的，它有两个特殊的属性 from 和 to ,就是起始点和终止点坐标。<v:line from="0,0" to="100,50" style="position:relative;"/>●如果要改变线的样式，LineStyle （Stroke）属性可以做到:Single（默认），ThinThin，ThinThick，ThickBetweenThin●如果要改变线的类型，可以用 DashStyle（Stroke）属性:&l...

Rect,RoundRect（矩形）对象

2017-02-06 43
用VML画矩形，必须设置 style="width:50;height:50"，其他就没有什么特别的。在这节，顺便讲讲 shadow 对象和 TextBox对象：<v:Rect style="position:relative;width:100;height:50px"/>RoundRect顾名思义，是圆角的矩形，这种形状在画流程图的时候很常用，如果加上阴影，就更好看了：<v:RoundRect style="position:rela...

Image（图像）对象

2017-02-06 53
Image对象从外部调用一个图形文件，只要IE能够显示的格式都可以。需要注意的是，VML只用来显示这张图片，并没有将这图片矢量化，如果以后放大缩小，画质会改变的。 <v:imagesrc="big.GIF"style="position:relative;top:0;left:0;width:165;height:157"/> 刚刚查询MSDN关于VML资料的时候，左边的相关菜单已经Unavailable了，这是否意味着VML将被Microso...

Group容器

2017-02-06 51
Group的使用很简单，但功能很强大。它能让一系列的VML对象使用共同的坐标系，它很常用的，基本上如果使用了超过一个VML对象的页面都使用Group。使用Group还有个好处，就是可以动态改变CoordSize值放大或缩小整个 Group 里面的VML。<v:group ID="group1" style="position:relative;WIDTH:200px;HEIGHT:200px;" coordsize = "2000,2000">...

ShapeType给VML制作模版

2017-02-06 42
VML的这个功能很有用，模版，顾名思义，它可以减少书写代码的量，又使的代码可读性提高。在理解VML模版的时候，可以和 HTML 的 CSS 一样理解，它是定义好的一种形状，下次使用的时候直接声明 type 属性就可以了。看看下面的例子：<v:shapetype id="arrowUP" coordsize="6 6"> <！--三角形 向上--><v:path v="m 3,0 l 0,6,6,6,3,0 x e" />...
<< 11 12 13 14 15 16 17 18 19 20 >>
版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图