来一发网页制造CSS教程:自顺应圆角

只看该作者 · 发表于 2015-1-15 23:28:00

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。
网页制造poluoluo文章简介：偶然候我们不能不面临圆角，也很傻很无邪的以为使用CSS3的新特征对扫瞄器分级撑持是最好办理计划.
媒介

偶然候我们不能不面临圆角，也很傻很无邪的以为使用CSS3的新特征对扫瞄器分级撑持是最好办理计划，但实际≠幻想…
需求

3px圆角
宽度自顺应（跟着笔墨字数扩大宽度并主动换行）
换肤
不利用图片（对可保护性/功能均有影响）

狐疑

典范的办理计划看起来像如许：

<!DOCTYPEhtml><html><head><metacontent="text/html;charset=utf-8"http-equiv="Content-Type"/><title>传统计划及bug</title><style>body{margin:100px;background-color:red;}div,p,b{margin:0;padding:0;}b{display:block;}.rc{display:inline-block;#display:inline;#zoom:1;}/*float效果不异.rc{float:left;}*/.rc1,.rc2,.rc.bd{border-style:solid;border-color:black;background-color:yellow;}.rc1,.rc2{height:1px;overflow:hidden;}.rc2,.rc.bd{border-width:01px;}.rc1{margin:02px;height:0;border-width:1px00;}.rc2{margin:01px;}.rc.bd{padding:06px;line-height:1.5;}</style></head><body><divclass="rc"><bclass="top"><bclass="rc1"></b><bclass="rc2"></b></b><divclass="bd"><p>FML!!!</p></div><bclass="bottom"><bclass="rc2"></b><bclass="rc1"></b></b></div></body></html>

复制代码

使rcfloat:left或display:inline-block也许能满意需求，不外IE6&7呈现bug：IE6中仍然显现为dispaly:block，而IE7中top和bottom缩成一坨，不愿扩大开来，而在rc1/rc2/rc3中拔出笔墨

<bclass="rc1">XXX</b>

复制代码

则只能扩大到笔墨XXX的宽度，没法与bd对齐！
假如你能弄定，贫苦留言告知我一下:)
办理

试了几个办法均欠亨，也搜刮不到这个bug，这时候想到了Google系产物的1px圆角按钮：

这是前Google视觉计划师DougBowman的功烈，后转会到Twitter（AD一下：@ytzong），DougBowman为此写过一篇博文《Recreatingthebutton》demo在此。不外demo也仅仅是demo，产物中利用的仍是某对天赋工程师伉俪的神作，他们有充足的工夫来做这项事情：

Themagicalinline-blocksolvedeverything,exceptinIE.That’swherethegeniusofGoogleengineerscamein.Theyknewhowtogettricksworkinginallbrowsers,andthistechniqueinterestedacoupleofthemenoughthattheydedicatedthetimetomakeitwork.

翻开Gmail，用firebug艹艹看了一下，内心暗骂一句：天赋就是天赋！
写了个复杂的demo（为了演示便利这里接纳了盒谐的色彩）：

<!DOCTYPEhtml><html><head><metacontent="text/html;charset=utf-8"http-equiv="Content-Type"/><title>自顺应圆角</title><style>body{margin:100px;background-color:red;}div,p{margin:0;padding:0;}.div1,.div2,.div3{display:inline-block;#display:inline;#zoom:1;position:relative;border-style:solid;border-color:black;}.div1{border-width:1px;}.div2,.div3{#left:-2px;border-width:01px;background-color:yellow;}.div2{margin:0-2px;}.div3{margin:1px-2px;padding:06px;line-height:1.5;}.pointer1,.pointer2{position:absolute;top:7px;width:0;height:0;overflow:hidden;border-top:6pxtransparentdotted;border-bottom:6pxtransparentdotted;}.pointer1{left:-9px;border-right:6pxblacksolid;}.pointer2{left:-8px;border-right:6pxyellowsolid;}</style></head><body><divclass="div1"><divclass="div2"><divclass="div3"><p>FML!!!</p></div></div><divclass="pointer1"></div><divclass="pointer2"></div></div></body></html>

复制代码

效果以下：

不但满意了需求，代码量及布局嵌套也很少。
代码申明

div1完成高低两条边，div2完成2px圆角处的4个点（常人只要3点），div3完成摆布两条边，div1设置摆布边框的缘故原由是制止IE6&7中的一个盒模子的小bug，有乐趣研讨的话可往失落摆布边框看下效果
pointer1完成小三角的边框，pointer2完成小三角的背景，此处使用了border来摹拟小三角，这个中会碰到IE6的边框不通明bug。别的，你也能够看看oocss的写法
宽度自顺应使用的是display:inline-block，注重IE6&7中的处置体例
#left:-2px之前的#为IE6&7hack，多写为*，这里用#一是标明偶的不同凡响，二是微软的ExpressionWeb格局化CSS的时分若{}中呈现*则会把代码搅散，此处IE6&7中呈现了margin-left负值有效的bug，经由过程position:relative加left:-2px完成
<metacontent=”text/html;charset=utf-8″http-equiv=”Content-Type”/>不写为<metacharset=”utf-8″/>的缘故原由是IE下中文题目会乱码

能够看出：IE6&7bug浩瀚的特性在此例中体现的极尽描摹！
最初的话

阮一峰先生也写过一篇《制造Gmail式按钮》，共同壮大的jquery来完成按钮各类形态，最初的总结也很出色，修正一下下：

固然这类按钮（圆角）的视觉效果对照幻想，有良多计划上的长处，可是范围性也很年夜。一方面，它必要大批的冗余代码，与语义网的准绳相违反…

完善计划仍是使用扫瞄器的本身特征供应对分歧的扫瞄器分级撑持，渐进加强（好比IE下显现为直角，对CSS3撑持较好的扫瞄器显现为圆角），这才是开辟效力、可保护性、语义、功能的最好均衡。
</p>
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。

只看该作者 · 发表于 2015-1-17 22:54:07

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-1-24 18:33:18

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

只看该作者 · 发表于 2015-2-2 13:08:31

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

只看该作者 · 发表于 2015-2-7 22:20:12

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

只看该作者 · 发表于 2015-2-23 15:35:45

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-3-7 09:47:19

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-15 00:03:42

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

只看该作者 · 发表于 2015-3-21 18:18:44

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来一发网页制造CSS教程:自顺应圆角

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子