DIV教程之CSS计划网页教程:制造网页气泡状文本框

对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
网页制造poluoluo文章简介：气泡对话框在网页中常常用于申明提醒等功效，能够抽象活泼的实际一些必要用户注重的笔墨与内容，本文先容仅用CSS来完成这类复杂的网页效果。
气泡对话框在网页中常常用于申明提醒等功效，能够抽象活泼的实际一些必要用户注重的笔墨与内容，本文先容仅用CSS来完成这类复杂的网页效果。气泡状文本框，是一种很活泼的网页计划手腕。
它能够用来暗示用户的讲话。

登录/注册后可看大图

也能够用来作为特定信息的提醒符。

登录/注册后可看大图

DVD租借网站Netflix，还用它显现碟片的具体信息。

登录/注册后可看大图

=========================
制造CSS气泡框的传统办法，必要5张背景图片，分离是：
　　*

登录/注册后可看大图

tl.gif，左上方的圆角。
　　*

登录/注册后可看大图

tr.gif，右上方的圆角。
　　*

登录/注册后可看大图

bl.gif，左下方的圆角。
　　*

登录/注册后可看大图

br.gif，右下方的圆角。
　　*

登录/注册后可看大图

angle.gif，凸起的三角形。
如今假定有如许一段代码：

<blockquote>床前明月光，疑是地上霜。</blockquote><p>李白</p>

我们但愿经由过程气泡框，发生一种视觉效果，将李白与诗句对应起来。

登录/注册后可看大图

那末，起首必要为诗句增加四个“钩子”（handler）：

<divclass="tl">
　　　<divclass="tr">
　　　　<divclass="br">
　　　　　<divclass="bl">
　　　　　　<blockquote>床前明月光，疑是地上霜。</blockquote>
　　　　　</div>
　　　　</div>
　　　</div>
　　</div>
然后，为最表面的容器div.tl指定高度和宽度，使它构成一个视觉方框：

.tl{
　　　　width:300px;
　　　　height:50px;
　　　　text-align:center;
　　　　line-height:50px;
　　}
接着，为四个“钩子”顺次增加四个分歧的圆角背景：

　　.tl{background:url(tl.gif)topleftno-repeat#ff8c45;}
　　.tr{background:url(tr.gif)toprightno-repeat;}
　　.bl{background:url(bl.gif)bottomleftno-repeat;}
　　.br{background:url(br.gif)bottomrightno-repeat;}

最初，在“李白”后面加上三角形图片。

　　p{
　　　　padding:15px0px0px50px;
　　　　background:url(angle.gif)40pxtopno-repeat;
　　}

气泡框就天生了。
这类办法的长处是一切扫瞄器都撑持，弱点是对照贫苦，必需制造专门的图片，增添过剩的标签，代码的天真性较小。
============================
跟着CSS3的呈现，如今有了更好的办法，不必要任何背景图片和过剩的标签，就可以天生大度的文本框。
请看新办法创造人NicolasGallagher制造的典范：

登录/注册后可看大图

登录/注册后可看大图

因为这类办法用到了CSS3，以是IE6不撑持，IE7和IE8没法显现圆角效果。其他扫瞄器的最新版本，都可以一般显现。
仍是之前面的代码为例。

　　<blockquoteclass="bubble">床前明月光，疑是地上霜。</blockquote>

第一步，天生基础的方框。

　　.bubble{
　　　　position:relative;
　　　　padding:15px;
　　　　margin:1em0em3em;
　　　　width:300px;
　　　　line-height:1.2;
　　　　text-align:center;
　　　　color:#fff;
　　　　background:#075698;
　　}

登录/注册后可看大图

第二步，天生圆角。

　　.bubble{
　　　　-moz-border-radius:10px;
　　　　-webkit-border-radius:10px;
　　　　border-radius:10px;
　　}

登录/注册后可看大图

第三步，制造线性突变的效果。

　　.bubble{
　　　　background:-webkit-gradient(linear,lefttop,leftbottom,from(#f9d835),to(#f3961c));
　　　　background:-moz-linear-gradient(top,#f9d835,#f3961c);
　　　　background:-o-linear-gradient(top,#f9d835,#f3961c);
　　　　background:linear-gradient(top,#f9d835,#f3961c);
　　}

登录/注册后可看大图

第四步，在容器前面增加一个空元素，并将长度和宽度都设为0。

　　.bubble:after{
　　　　content:"0a0";
　　　　width:0;
　　　　height:0;
　　}
第五步，指定这个空元素为块级元素，而且四个边框当中，只显现上方的边框，其他三个边框，都设为通明。由于该元素的巨细为0，以是它的每个边框，都是一个等腰三角形。

　　.bubble:after{
　　　　display:block;
　　　　border-style:solid;
　　　　border-width:15px;
　　　　border-color:#f3961ctransparenttransparenttransparent;
　　}
这时候，已能够瞥见这个三角形了（实际上是一个上边框）。

登录/注册后可看大图

第六步，指定空元素的定位体例为absolute。然后，以容器元素的左下角为基点，将空元素程度右移必定的间隔（这里是50像素），再垂直下移两个界限的间隔。（因为第五步将空元素的界限设为15像素，以是这里就是下移30像素。）

　　.bubble:after{
　　　　position:absolute;
　　　　z-index:-1;
　　　　bottom:-30px;
　　　　left:50px;
　　}
至此，一个不必要任何背景图片和过剩标签的气泡框，就呈现在我们长远了。

登录/注册后可看大图

天真处置空元素的边框，大概改动巨细，大概天生圆角，大概将两个空元素的边框堆叠，就会发生林林总总的变更。详细的效果和代码，请参考NicolasGallagher的典范页。
</p>
凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和Flash，所以我一直建议一个提交按钮就不要用图片带代替了。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.