仓酷云

标题: 来谈谈：网页计划技能:网页中的三角形效果CSS制造完成 [打印本页]

作者: 小魔女 时间: 2015-1-15 23:16
标题: 来谈谈：网页计划技能:网页中的三角形效果CSS制造完成
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。
破洛洛文章简介：三角形我们常常用在列表、下拉提醒、面包屑导航的地位，给用户以导向的引诱感化，好比，在有下拉列表的中央，我们能够用向下的箭头，在列表的时分，我们能告知用户每一个列表项和下一个列表项的干系，当在面包屑导航中，能让用户懂得他如今所处的栏目大概频道。我们有哪些
三角形我们常常用在列表、下拉提醒、面包屑导航的地位，给用户以导向的引诱感化，好比，在有下拉列表的中央，我们能够用向下的箭头，在列表的时分，我们能告知用户每一个列表项和下一个列表项的干系，当在面包屑导航中，能让用户懂得他如今所处的栏目大概频道。我们有哪些办法来完成它呢，上面我依据我们的实践事情中的履历作了复杂的总结。
第一种计划，我们能够经由过程利用背景图片的体例来处置，这也是我们最常常用的办法。
1）单个切出三角形，我们能够依据UI计划的需求，切出与之相顺应的图片，好比，我们能便利的依据需求，制造分歧高度和色彩的三角形。在利用方面，HTML代码和CSS代码绝对复杂。以下面图是示例：

这类间接利用背景图片的办法合适我们在三角形包括突变、纹样、肌理等特别效果的时分，我们能够设置它的色彩来包管图形边沿与背景致完善分歧。弱点是我们必要为每一个分歧的偏向需求制造一个图片，增添了http哀求和CSS代码的数目。
因为这类办法对照复杂,我们就不做演示了.
2）比拟之前，我们怎样做到削减http哀求，同时也标示出四个偏向的三角形呢？我们能够制造一个菱形，经由过程利用CSS的背景定位来选择与之相婚配的外形。如许我们就可以用一个图形，到达四个图形的目标。
12345<divstyle="width:100px;height:100px;position:relative;margin:34px;background:#6699FF"><emstyle="background:url(/jzxy/UploadFiles_333/201101/20110122112719516.gif)no-repeat00;width:67px;height:34px;display:block;position:absolute;top:-34px;left:15px"></em><emstyle="background:url(/jzxy/UploadFiles_333/201101/20110122112719516.gif)no-repeat-35px0;width:34px;height:67px;display:block;position:absolute;right:-34px;top:15px;"></em><emstyle="background:url(/jzxy/UploadFiles_333/201101/20110122112719516.gif)no-repeat0-35px;width:67px;height:34px;display:block;position:absolute;bottom:-34px;left:15px;"></em><emstyle="background:url(/jzxy/UploadFiles_333/201101/20110122112719516.gif)no-repeat00;width:34px;height:67px;display:block;position:absolute;left:-34px;top:15px;"></em></div>3）办法二种的办法固然我们能够完成挪用一次背景图片标示四种三角形态的情形，可是在色彩方面的确单一的，我们只能由一种色彩，那我们必要增添三角形一样在引发鼠标悬浮伪类呼应的时分，我们应当怎样做呢？好比鼠标悬浮的时分由白色酿成橙色？那我们就能够利用这类办法，经由过程正负形的办法，办法二中的办法我们经由过程一个正形，那上面的例子我们利用一个负形
HTML文件
123456<divstyle="width:100px;height:100px;position:relative;margin:34px;background:#6699FF"><aclass="n_a_1"></a><aclass="n_a_2"></a><aclass="n_a_3"></a><aclass="n_a_4"></a></div>CSS文件
123456789.n_a_1,.n_a_2,.n_a_3,.n_a_4{background-image:url(/jzxy/UploadFiles_333/201101/20110122112719717.gif);background-repeat:no-repeat;position:absolute;display:block;}a.n_a_1{background-color:#0033CC;background-position:00;width:67px;height:34px;top:-34px;left:15px}a.n_a_1:hover{background-color:#db0085}a.n_a_2{background-color:#0066CC;background-position:-33px0;width:34px;height:67px;right:-34px;top:15px;}a.n_a_2:hover{background-color:#db0085}a.n_a_3{background-color:#00CCCC;background-position:0-33px;width:67px;height:34px;bottom:-34px;left:15px;}a.n_a_3:hover{background-color:#db0085}a.n_a_4{background-color:#00FFCC;background-position:00;width:34px;height:67px;left:-34px;top:15px;}a.n_a_4:hover{background-color:#db0085}如许子，我们就可以很便利的改动背景色彩来取得分歧的色彩的三角形了。
可是我们也发明了另外一个成绩，那就是当我们但愿把这个三角形放到有色彩的背景时，组成其负形的地区色彩也会成为我们的限定，由于我们必需将组成负形的色彩与之相婚配。并且第二种办法和第三种办法中只能完成流动尺寸的正三角形，假如我们想随时改动它外形的话，不利用css3的背景巨细属性background-size话（此属性已已被OperafirefoxSafariChromeIE9），大概上面的办法更合适。
第二种计划，我们不是经由过程图形图片的体例,而是间接利用标签自己的css属性特性大概字符来举行创作.
1)我们可使用border属性来完成，border属性包含宽度、色彩、款式。我们能够改动它的色彩来顺应。经由过程下图我能就可以剖析出,border属性相干特性:

相干代码：
1234567891011121314<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><styletype="text/css"></style></head><body><divid="boder_arrow"></div></body></html>我们能够改动border分歧偏向的色彩来找到我们必要的色彩，我们乃至能够经由过程border-width的修正,制造分歧角度的三角形.

是否是下面的经由过程修正border-width后取得的下面的零件很成心思，可让我们容易的节俭为制造三角型用失落的谁人可贵的http哀求。
巧思无难事，大概偶然候你必要的并非一个等腰的三角型，好比说我们罕见到上面这类图形

谁人不是等腰三角形的图形，我们也能经由过程改动边框的宽度来失掉：
1<divstyle="border-color:transparent#FF6699transparenttransparent;border-style:solid;border-width:030px20px0;height:0;line-height:0;width:0;"></div>2)经由过程扭转块状标签角度的办法取得,这类办法必要撑持css3属性transform的扫瞄器撑持.
我们常常必要如许的情势:

那我们对这个图形举行分化

那我们先来完成下面分化的图形：
当我们将扭转后的正方形的背景致色值设置为订交盒形不异的色值时,他们就融为一体了.
3)经由过程◆字符完成.完成办法与下面的相似,将字符的色彩设置为和但愿体现得容器不异的色彩,从而失掉一个视觉上的三角形.只是此次我们没有效到CSS3的transform属性，兼容性更好一些。
◆◆◆◆代码以下：
12345678910111213141516171819202122232425<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><metaname="author"content="rage"/><title>标记三角</title><style><!--.wrap_char{width:150px;height:150px;text-align:center;margin:100px;background:#ccc;position:relative;}.a_char,.b_char,.c_char,.d_char{font-size:50px;text-align:center;color:#ccc;position:absolute;z-index:10;line-height:0;line-height:50px;}.a_char{left:-4px;bottom:-25px;}.b_char{left:-25px;top:-4px;}.c_char{top:-25px;right:-4px;}.d_char{right:-25px;bottom:-5px;}</style></head><body><divclass="wrap_char"><spanclass="a_char">◆</span><spanclass="b_char">◆</span><spanclass="c_char">◆</span><spanclass="d_char">◆</span></div></body></html>案例研讨：
1）线形的三角形，以下图：

这类图形的完成我们常常依附于图形完成，实在我们能够经由过程border属性，将两个三角型的叠加就能够取得响应的效果：
12345678910111213<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>三角形叠加</title><styletype="text/css"></style></head><body><divclass="pos_rel"><spanclass="icon1"><spanclass="icon2"></span></span></div></body></html>如许我们就可以取得更大度的复兴窗口：

2）导航形态

我们也能够经由过程border制造的三角形来完成：
标签一标签二标签三标签四HTML代码：
12345678910111213141516171819<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>标示导航形态</title><styletype="text/css">#nav_state{height:20px;}#nav_statea{width:80px;display:block;text-align:center;padding:2px;line-height:18px;;float:left;background-color:#ccc;margin-right:5px;color:#333;position:relative;text-decoration:none;font-size:12px;}#nav_stateaspan{display:none;}#nav_statea.current,#nav_statea:hover{background-color:#000;color:#fff;}#nav_statea.currentspan,#nav_statea:hoverspan{display:block;width:0;height:0;border-width:8px;border-style:solid;border-color:#000transparenttransparent;position:absolute;top:20px;left:32px;overflow:hidden;}</style></head><body><divid="nav_state"><ahref="#"charset="current">标签一<span></span></a><ahref="#">标签二<span></span></a><ahref="#">标签三<span></span></a><ahref="#">标签四<span></span></a></div></body></html>下面我们完成的是流动宽度，那假如是自顺应宽度的、箭头朝上的呢？

首页
二级栏目
三级栏目大概会对照长
四级栏目

123456789101112131415161718<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>导航箭头朝上标示符</title><styletype="text/css">#menu_liquid{height:30px;margin:20px;list-style:none;font-size:12px;}#menu_liquidli{height:30px;line-height:30px;float:left;white-space:nowrap;}#menu_liquidlia{display:block;float:left;height:30px;position:relative;padding:012px;background:#777;color:#fff;text-decoration:none;border-right:1pxsolid#ccc;}#menu_liquidliaspan{display:none;}#menu_liquidlia.current,#menu_liquidlia:hover{background:#000;color:#0099FF;}#menu_liquidlia.currentspan,#menu_liquidlia:hoverspan{display:block;width:0;height:0;border-style:solid;border-color:transparenttransparent#f0f0f0transparent;border-width:08px8px;position:absolute;bottom:0;left:50%;margin-left:-4px;overflow:hidden;z-index:0;}#menu_liquidliaem{display:block;text-align:center;font-style:normal;cursor:pointer;}</style></head><body><ulid="menu_liquid"><li><ahref="#"><span></span><em>首页</em></a></li><li><ahref="#"><span></span><em>二级栏目</em></a></li><li><ahref="#"><span></span><em>三级栏目大概会对照长</em></a></li><li><ahref="#"><span></span><em>四级栏目</em><span></span></a></li></ul></body></html>这里我们要注重的是甚么呢？那就是箭头是相对定位的，当心箭头过年夜的时分，将下面的笔墨掩盖失落了。
下面的只是一些办法的总结，大概并非最优的办法，最优的完成办法大概还必要详细成绩详细剖析，就当在此举一反三了。
同时接待人人提出相左的意见。
</p>
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

作者: 飘灵儿 时间: 2015-1-17 21:15
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 海妖 时间: 2015-1-26 22:57
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 爱飞 时间: 2015-2-5 06:51
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 仓酷云 时间: 2015-2-11 08:12
学Dreamweaver技术的过程其实是一个增加信心的过程。

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

作者: 简单生活 时间: 2015-3-11 04:35
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 愤怒的大鸟 时间: 2015-3-17 22:11
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 灵魂腐蚀 时间: 2015-3-25 09:50
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

欢迎光临仓酷云 (http://ckuyun.com/)