Html/Css
关注
分享
扫一扫
文章平均质量分 68
L_Vincent
这个作者很懒，什么都没留下…
展开
-
理解CSS盒子模式
前言如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所转载 2011-05-20 10:21:00 · 671 阅读 · 0 评论 -
IIS6配置GZIP压缩网页来提升网页浏览速度
网页压缩是一项由 WEB 服务器和浏览器之间共同遵守的协议，也就是说 WEB 服务器和浏览器都必须支持该技术，所幸的是现在流行的浏览器都是支持的，包括 IE、FireFox、Opera 等；服务器有 Apache 和 IIS 等。双方的协商过程如下：首先浏览器请求某个 URL 地址，并在请求的头 (head) 中设置属性 accept-encoding 值为 gzip, deflate转载 2011-06-30 22:38:00 · 464 阅读 · 0 评论 -
超链接伪类
a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */ 以上分别定义了超链接未访问时的链接样式，已访问的链接样式，鼠标移上时链接样式转载 2011-06-17 11:41:00 · 1605 阅读 · 0 评论 -
通过ul列表实现横向图文列表
*{margin:0px;padding:0px;} ul{list-style:none;} img{border:0px;} a{color:#05a;text-decoration:none;} a:hover{color:#f00;} #pic{width:950px;border:solid 1px #ccc;padding:转载 2011-06-17 09:55:00 · 4997 阅读 · 0 评论 -
用图片定义项目符号的方法
原始方法： #layout1 ul{list-style:none;padding-left:15px;} #layout1 ul li{list-style-image:url(images/arrow_r.gif);} 第五天 超链接伪类 第四天 纵向导航菜单转载 2011-06-17 09:41:00 · 1007 阅读 · 0 评论 -
理解相对定位和绝对定位
相对定位和绝对定位定位标签：position包含属性：relative（相对） absolute（绝对）1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）转载 2011-06-09 22:51:00 · 462 阅读 · 0 评论 -
二列布局
下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。首先创建html代码如下：此处显示 id "side" 的内容此处显示 id "main" 的内容创建css样式表，代码如下：#side { background: #99FF99; height: 300px; width: 120px; fl转载 2011-06-08 23:08:00 · 403 阅读 · 0 评论 -
float属性
回到我们的例子当中，理解了块级元素和内联元素，对理解浮动就容易多了。float是个重点，希望大家都能理解。上例中用float让元素向左浮动，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。想必大家都用过word排过版，当中有个图文转载 2011-06-09 22:32:00 · 549 阅读 · 0 评论 -
一列布局
一列固定宽度#layout { height: 300px; width: 400px; background: #99FFcc; } 一列固定宽度居中一列固定宽度居中和一列固定宽度相比，我们要解决的问题就是居中。这里我们用到css的外边距属性：margin。在IE6及以上版本和标准的浏览器当中，当设置一个盒模型的的margin:auto;时，可以让这个盒模型居中。我们下边在css转载 2011-06-08 22:49:00 · 500 阅读 · 0 评论 -
三列布局
三列自适应宽度三列自适应宽度，一般常用的结构是左列和右列固定，中间列根据浏览器宽度自适应。下面在二列自适应宽度基础上修改一下(注意三个DIV的顺序)此处显示 id "side" 的内容此处显示 id "side1" 的内容此处显示 id "main" 的内容增加以下css样式：#side1 { background: #99FF99; height: 300px; widt转载 2011-06-09 22:38:00 · 795 阅读 · 0 评论 -
块级元素与内联元素
块级元素：就是一个方块，像段落一样，默认占据一行出现；内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。一般的块级元素诸如段落、标题...、列表, 、表格、表单、DIV和BODY等元素。而内联元素则如: 表单元素、超级链接、图像、 ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行转载 2011-06-09 22:21:00 · 390 阅读 · 0 评论 -
IE6的3像素bug
3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。看下面这个左列固定，右列液态的例子，css代码如下：body { margin:0;}#side { float: left; background:#99FF99; height: 300px; width: 120px;}#main { background: #99FFFF; h转载 2011-06-09 22:40:00 · 528 阅读 · 0 评论 -
第一天 XHTML CSS基础知识
1）文档类型当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能转载 2011-06-07 17:28:00 · 498 阅读 · 0 评论 -
通过CSS控制垂直居中
<br />旧的方法<br />经常做的第一件事通常是如何在 CSS 中控制元素水平或者垂直方向上居中，相信这也是很多设计师喜欢做的事情。首先，我们采用绝对定位的方法让元素离开顶部和左部 50% 的距离，然后我们需要设置一个负的 margin 来将元素拉回到中间的位置。<br />现在让我们来看一下这种方法的代码以及它所带来的问题：<br />CSS 代码：<br />html,body{<br /> height:100%;<br /> margin:0;<br /> padding:0转载 2011-05-24 21:39:00 · 660 阅读 · 0 评论 -
CSS定位机制之一:普通流
<br /><br />什么是普通流？简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。并且这种过程遵循标准的描述。<br />为了从不同角度说明，我采集了一些可能冗长、具体或者晦涩的其他人给出的定义：将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。Jennifer.Kyrnin@About.com: 普通流是元素在多数情况下呈现在 web 页面上的方式。所有 HTML 都在块框( block boxes，块级元素 )或者行内框( inline boxes，行内元素 )转载 2011-05-23 11:54:00 · 417 阅读 · 0 评论 -
绝对定位和相对定位
<br />绝对定位（absolute）：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在最上面，可以有负值（目前负值FF不支持）。<br />相对定位（relative）：对象不可层叠，依据left，转载 2011-05-23 17:03:00 · 2313 阅读 · 0 评论 -
动态CSS,换肤技术
<br />一个站点上有多个页面样式提供浏览者选择.<br />同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式.<br />自然会想到了Cookie技术<HTML><br /><HEAD><br /><link ID="skin" rel="stylesheet" type="text/css"><br /><TITLE>换肤技术</TITLE><br /><SCRIPT LANGUAGE=javascript><br /><!--<br />function SetCookie(name,va转载 2011-05-20 22:23:00 · 548 阅读 · 0 评论 -
Div布局实现Div等高的方法
<br />一、用CSS实现<br /> <br />1、通过父Div的边框模拟子Div的背景实现。<br /> <br /> <%--设置父Div的右边框宽度等于右边Div的宽度--%> <div style="border-right: solid 180px gray;background:black; color: white;"> <div style="width: 180px; float: right; position: relative; r转载 2011-05-20 10:53:00 · 3436 阅读 · 0 评论 -
解决WEB页面上"焦点控制"一法
对于B/S的系统,在页面控制上不如C/S系统那么控制灵活,就如输入的焦点问题,客户都很想通过键盘对数据进行录入,这样的要求我想100个客户中会有90个吧.因此解决焦点获取问题是必要的.大家可以从网上找到一些方法,不过都比较麻烦,我现在介绍一种很方便的.效果也很不错的方法给大家.我前段时间看了MS的ASP.NET讲座,在里面谈到了如何让"回车键"使文本框的焦点一个个下移.其中提了三种方法,最转载 2011-11-11 17:28:19 · 1701 阅读 · 0 评论