来讲讲：CSS3教程:边框属性border的极致使用

只看该作者 · 发表于 2015-1-16 00:03:21

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

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

x

属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。
网页制造Webjx文章简介：这里会商的都是关于边框属性border的极致使用，这些使用虽然说有些剑走偏门，但在一些特别的场所，大概仍是会用得上的，假如你对HTML代码有洁癖，有切身痛苦，而且以为冗余的标签影响到你的视觉神经，那末你能够权当一种专业浏览。
冰山顶颠峰
博客地点：http://www.ckuyun.com/binyong
这天下太猖狂，Border属性也弄仿照秀！
这里会商的都是关于边框属性border的极致使用，这些使用虽然说有些剑走偏门，但在一些特别的场所，大概仍是会用得上的，假如你对HTML代码有洁癖，有切身痛苦，而且以为冗余的标签影响到你的视觉神经，那末你能够权当一种专业浏览。
上面这个截图是border属性的几种基础变更，经由过程对这几种基础变更的延长援用，你能够变更出各类丰厚的案例出来：

登录/注册后可看大图

图一

如我在另外一篇文章《用div+CSS摹拟表格对角线》中说到的一样，这些变更实在就是基于以下的基础道理：
border-left:20pxtransparentdotted;
border-top:20pxgreensolid;
border-right:20pxtransparentdotted;
border-bottom:20pxorangesolid;
width:0px;
height:0px;
overflow:hidden;
注重：transparent是用来通明的，而且要设置的线条的款式为dotted(点线)。宽高为0，就会只显现边框部分，然后用overflow来将过剩部分截取失落，剩下的就是斜角内容了。
斜角的组合纪律以下：

border-left和border-top构成从左上到右下的斜线
border-right和border-top构成从右上到左下的斜线
border-right和border-bottom构成从右下到左上的斜线
border-left和border-bottom构成从左下到右上的斜线

有了这些基础纪律就能够一成不变了，发扬你的想像力吧，我们来看看有些甚么变更。
下图是使用这类道理变更出来的不划定规矩选项卡，为了简少代码量，我没有加上js功效，你们能够本人尝尝。
PS：这些链接全体有翻腾形态，你可间接利用，已做了兼容性测试。

登录/注册后可看大图

图二

网页制造Webjx文章简介：这里会商的都是关于边框属性border的极致使用，这些使用虽然说有些剑走偏门，但在一些特别的场所，大概仍是会用得上的，假如你对HTML代码有洁癖，有切身痛苦，而且以为冗余的标签影响到你的视觉神经，那末你能够权当一种专业浏览。

滑动块也是常常看到的，上面的截图二中仿照了一个工夫滑动块功效，固然你还能够发扬的想像力，将一个转动条也用这类体例作出来。在本图的右上角有两个相反的三角形，这类在一些必要折叠的面板中常常见，这个也是用Border仿照出来的。

登录/注册后可看大图

图三

上面这两个东东我也不晓得该将它取个甚么名字，你能够叫它德律风拨盘，大概如今只会在很早之前的影戏中才干看了。我临时将它取名为侥幸转轮吧！：）
这类你能够将它用在登录页面中往。随你吧！！
PS：这内里的每一个外形都是能够点击的，你可将它做成一个链接地点。

登录/注册后可看大图

图四

上面这类就是一种反常的做法了，原本我想仿照成五角星，了局歪打正着，成了这么一种外形。临时就如许吧。我数学欠好，关于五边形的算法不知怎样盘算，看晓得的伴侣交换一下。

登录/注册后可看大图

图五

兼容性测试，在以下几种扫瞄器中一般事情：
IE6、IE7、FF3、Opera9.63、傲游
间接下载看吧：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>Border属性的最终研讨---看我七十二变(冰山顶颠峰:http://www.ckuyun.com/binyong)</title><styletype="text/css">*{margin:0;padding:0;font-size:12px;}body{background:#555;}#wrapper{width:500px;margin:0auto;border-left:4px#888solid;border-right:4px#888solid;background:#fff;padding-bottom:50px;}#corner{position:relative;}#cornerem,#cornerb,#cornerstrong,#corneri,#cornerspan{display:block;border-top:67pxgreensolid;border-right:67pxtransparentdotted;width:0;height:0;overflow:hidden;}#cornerb{border-width:65px;border-top-color:red;position:absolute;top:0;left:0;}#cornerem{border-width:63px;border-top-color:orange;position:absolute;top:0;left:0;}#corneri{border-width:37px;border-top-color:orange;position:absolute;top:0;left:0;}#cornerstrong{border-width:35px;border-top-color:red;position:absolute;top:0;left:0;}#cornerspan{border-width:33px;border-top-color:#fff;position:absolute;top:0;left:0;}#cornera{position:absolute;display:block;width:10px;height:10px;font-size:12px;color:#fff;font-weight:bold;text-decoration:none;}#cornera#b1{left:34px;top:3px;}#cornera#b2{left:18px;top:18px;}#cornera#b3{left:3px;top:33px;}h1{width:310px;height:100px;line-height:100px;color:#2f231a;font-size:16px;margin:0pxauto;position:relative;}h1b{color:#b2c63a;font-size:16px;font-style:normal;left:-1px;position:absolute;top:-1px;}h1strong{position:absolute;top:25px;left:100px;height:22px;}/*盒子*/.tab{width:400px;margin:0auto;border:1pxorangesolid;margin-top:10px;text-align:center;}h2{border-bottom:1pxorangesolid;line-height:30px;padding-left:10px;background:#FFC966;color:#7C66FF;text-align:center;}.blog{background:#2f231a;}.bloga:link,.bloga:visited{color:#fff;}h3{text-align:center;line-height:26px;height:26px;}.photobox{border-left:10pxredridge;border-top:10pxgreenridge;border-right:10pxyellowridge;border-bottom:10pxorangeridge;}.tab_pannel{width:380px;overflow:hidden;margin:20pxauto;}.tab_content{border:1pxorangesolid;height:100px;width:368px;margin:0auto;text-align:left;}/*基础外形----------------------------------------------------------------------------*/.base{border:1pxorangesolid;padding-top:10px;width:370px;margin:0auto;overflow:hidden;}.baseb{width:0;height:0;overflow:hidden;margin-right:20px;display:block;}/*下三角形*/.t1{border-left:20px#fffsolid;border-top:20pxgreensolid;border-right:20px#fffsolid;border-bottom:0;}/*左三角形*/.t2{border-top:20px#fffsolid;border-right:20pxredsolid;border-bottom:20px#fffsolid;border-left:0;overflow:hidden;}/*右三角形*/.t3{border-top:20px#fffsolid;border-left:20px#000solid;border-bottom:20px#fffsolid;border-right:0;}/*上三角形*/.t4{border-left:20px#fffsolid;border-bottom:20pxbluesolid;border-right:20px#fffsolid;border-top:0;}/*基础外形*/.tb_base{margin:0auto;}.tb_base.s1{display:block;border-left:20pxredsolid;border-top:20pxgreensolid;border-right:20pxyellowsolid;border-bottom:20pxorangesolid;width:0px;height:0px;overflow:hidden;margin:0auto;}.tb_base.s2{display:block;border-left:10pxredsolid;border-top:10pxgreensolid;border-right:10pxyellowsolid;border-bottom:10pxorangesolid;width:20px;height:20px;overflow:hidden;margin:0auto;}.tb_base.s3{display:block;border-left:20pxtransparentdotted;border-top:20pxgreensolid;border-right:20pxtransparentdotted;border-bottom:20pxorangesolid;width:0px;height:0px;overflow:hidden;margin:0auto;}.tb_base.s3-1{display:block;border-top:20pxtransparentdotted;border-left:20pxgreensolid;border-bottom:20pxtransparentdotted;border-right:20pxorangesolid;width:0px;height:0px;overflow:hidden;margin:0auto;}.tb_base.s4{display:block;border-left:40pxtransparentdotted;border-top:40pxgreensolid;width:0px;height:0px;overflow:hidden;}.tb_base.s5{display:block;border-right:40pxtransparentdotted;border-top:40pxredsolid;width:0px;height:0px;overflow:hidden;}.tb_base.s6{display:block;border-left:40pxtransparentdotted;border-bottom:40px#000solid;width:0px;height:0px;overflow:hidden;}.tb_base.s7{display:block;border-bottom:40pxbluesolid;border-right:40pxtransparentdotted;width:0px;height:0px;overflow:hidden;}/*综合使用0*/#menu1{list-style:none;width:380px;margin:0pxauto;padding-left:5px;height:20px;}#menu1li{float:left;width:85px;height:20px;line-height:20px;margin-right:10px;}#menu1lia{position:relative;width:100%;display:block;background:green;text-decoration:none;text-align:center;color:#fff}#menu1liab{position:absolute;top:20px;left:40px;border-left:5px#fffsolid;border-top:5pxgreensolid;border-right:5px#fffsolid;border-bottom:0;display:none;width:0;height:0;overflow:hidden;}#menu1lia:hover{background:orange;}#menu1lia:hoverb{border-top:5pxorangesolid;display:block;}/*综合使用1-菱形菜单*/p{padding:20px;}#otherliab{top:10px; right:20px;background:#fff;}#menu2{list-style:none;width:368px;height:20px;position:relative;left:6px;*left:0px;}#menu2li{width:70px;float:left;}#menu2lia{display:block;width:70px;border-left:20pxtransparentdotted;border-top:0;text-decoration:none;color:#fff;position:absolute;}#menu2#m1a{border-bottom:20pxgreengroove;left:39px;}#menu2#m2a{border-bottom:20pxredgroove;left:119px;}#menu2#m3a{border-bottom:20pxbluegroove;left:199px;}#menu2#m4a{border-bottom:20pxorangegroove;left:279px;}#menu2liaspan{display:block;position:absolute;top:5px;left:8px;}#menu2lia:hover{color:#00FFFF;}/**/#menu2#m1a:hover{border-bottom:20px#CC9933groove;}#menu2#m2a:hover{border-bottom:20pxgraygroove;}#menu2#m3a:hover{border-bottom:20px#FF00FFgroove;}#menu2#m4a:hover{border-bottom:20px#99CC66groove;}/*综合使用2-菱形菜单*/#menu3{list-style:none;width:368px;height:20px;position:relative;left:6px;*left:0;}#menu3li{width:90px;height::20px;line-height:20px; float:left; overflow:hidden;position:relative;}#menu3lia{display:block;width:70px;height:0px;text-decoration:none;border-left:20pxtransparentdotted;border-bottom:20pxgreensolid;border-top:0;position:relative;}#menu3liaspan{display:block;position:absolute;top:2px;left:0px;color:#fff;}#menu3liaem{display:block;position:absolute; top:0px;left:50px;border-left:20pxgreensolid;border-bottom:20px#fffsolid;width:0;height:0;overflow:hidden;background:#fff;cursor:pointer;}#menu3lia:hover{border-bottom-color:orange;}#menu3lia:hoverspan{background:orange;cursor:pointer;color:#0000CC;}#menu3lia:hoverem{border-left:20pxorangesolid;}#menu3#m5{left:54px;}#menu3#m6{left:39px;}#menu3#m7{left:24px;}#menu3#m8{left:9px;}/*滑动条*/.box{width:200px;line-height:30px;margin:30pxauto;position:relative;border:1pxorangesolid;}.sliderbg{display:block;border-bottom:5px#F30solid;width:200px;height:2px;line-height:2px;position:absolute;top:8px;left:0px;}#sliderbar{width:10px;height:20px;margin-left:20px;}#sliderbara{display:block;border-left:5pxtransparentdotted;border-right:5pxtransparentdotted;border-bottom:5pxorangesolid; width:0;height:0;position:relative;}#sliderbarab{position:absolute;top:5px;left:-5px;display:block;width:10px;height:15px;background:orange;overflow:hidden;}#sliderbara:hover{border-bottom:5px#00Fsolid;}#sliderbara:hoverb{background:#00F;cursor:pointer;}/*右侧的高低三角形*/.title{border-bottom:1pxorangesolid;line-height:26px;padding-left:10px;position:relative;overflow:hidden;background:#FFDB99;height:26px;}.titleb{display:block;width:280px;line-height:26px;height:26px;padding-left:10px;float:left;}.titlespana{display:block;width:0px;height:0px;float:left;overflow:hidden;position:absolute;border-left:5pxtransparentdotted;border-right:5pxtransparentdotted;}.title.upa{border-bottom:5px#666solid;top:7px;right:10px;}.title.upa:hover{border-bottom:5pxbluesolid;}.title.downa{border-top:5px#666solid;top:14px;right:10px;}.title.downa:hover{border-top:5pxbluesolid;}/*综合使用3---------------------------侥幸转轮1*/#menu4box{width:182px;height:160px;margin:20pxauto;background:#fff;/*背景色彩值*/}#menu4{list-style:none;width:182px;height:20px;position:relative;margin:20pxauto;}#menu4li{position:absolute;}#menu4lia{display:block;width:0;height:24px;border-top:10pxtransparentdotted;border-right:20px#FF00CCsolid;border-bottom:10pxtransparentdotted;}#menu4liaem{display:block;width:0;height:24px;border-top:10pxtransparentdotted;border-left:20px#FF00CCsolid;border-bottom:10pxtransparentdotted;position:absolute;top:0;left:20px;cursor:pointer;}#menu4liab{display:block;width:20px;height:22px;position:absolute;top:15px;left:13px;font-size:14px;color:#fff;cursor:pointer;}#menu4lia{text-decoration:none;}#menu4lia:hover{border-right-color:#CC3300;}#menu4lia:hoverem{border-left-color:#CC3300;cursor:pointer;}#menu4lia:hoverb{color:#000000;cursor:pointer;}#m9{left:50px;}#m10{left:95px;}#m11{left:27px;top:38px;}#m12{left:72px;top:38px;}#m13{left:117px;top:38px;}#m14{left:50px;top:76px;}#m15{left:95px;top:76px;}/*综合使用4--------------------------侥幸转轮2*/#menu5box{position:relative;width:182px;height:200px;margin:20pxauto;background:#fff;/*背景色彩值*/}#menu5{list-style:none;}.intbg{position:absolute;top:50px;left:40px;display:block;width:100px;height:98px;background:#CC66CC;/*线条色彩值*/}#menu5li{position:absolute;}/*键*/.outa{display:block;width:0;height:26px;border-top:10pxtransparentdotted;border-right:20px#CC66CCsolid;border-bottom:10pxtransparentdotted;}.outaem{display:block;width:0;height:26px;border-top:10pxtransparentdotted;border-left:20px#CC66CCsolid;border-bottom:10pxtransparentdotted;position:absolute;top:0;left:19px;cursor:pointer;}.outab{display:block;width:20px;height:22px;position:absolute;top:15px;left:13px;font-size:14px;color:#fff;cursor:pointer;}.outa{text-decoration:none;}.outa:hover{border-right-color:#CC3300;}.outa:hoverem{border-left-color:#CC3300;cursor:pointer;}.outa:hoverb{color:#000000;cursor:pointer;}/*添补背景致*/.inta{display:block;width:0;height:24px;border-top:10pxtransparentdotted;border-right:20px#fffsolid;border-bottom:10pxtransparentdotted;}.intaem{display:block;width:0;height:24px;border-top:10pxtransparentdotted;border-left:20px#fffsolid;border-bottom:10pxtransparentdotted;position:absolute;top:0;left:19px;}.intab{display:block;width:20px;height:22px;position:absolute;top:15px;left:13px;}/*表面定位*/#t1{left:72px;top:5px;}#t2{left:11px;top:39px;}#t3{left:133px;top:39px;}#t4{left:11px;top:111px;}#t5{left:133px;top:111px;}#t6{left:72px;top:146px;}/*内里定位*/#f1{left:50px;top:38px;}#f2{left:94px;top:38px;}#f3{left:28px;top:76px;}#f4{left:72px;top:76px;}#f5{left:116px;top:76px;}#f6{left:50px;top:115px;}#f7{left:94px;top:115px;}/*中央圆*/#f4a{text-decoration:none;border-top:10pxtransparentdotted;border-right:20px#FF0000solid;border-bottom:10pxtransparentdotted;}#f4aem{display:block;border-top:10pxtransparentdotted;border-left:20px#FF0000solid;border-bottom:10pxtransparentdotted;position:absolute;top:0;left:19px;cursor:pointer;}#f4a:hover{border-right-color:#CC3300;}#f4a:hoverem{border-left-color:#CC3300;cursor:pointer;}#f4a:hoverb{font-size:14px;color:#fff;cursor:pointer;}#f4ab{display:block;width:20px;height:22px;position:absolute;top:15px;left:13px;font-size:14px;color:#fff;cursor:pointer;}/*综合使用5-------------------------六角星*/#menu6box{position:relative;width:182px;height:150px;margin:20pxauto;background:#fff;}#menu6{list-style:none;padding-top:10px;}#menu6li{width:50px;height:55px;border:1pxredsolid;position:relative;float:left;margin-left:5px;margin-bottom:5px;}#menu6lia{display:block;border-left:25pxtransparentdotted;border-bottom:40pxredsolid;border-right:25pxtransparentdotted;width:0;height:0;margin:0auto;text-decoration:none;}#menu6liab{display:block;border-left:25pxtransparentdotted;border-top:40pxredsolid;border-right:25pxtransparentdotted;width:0;height:0;position:absolute;top:15px;left:0px;z-index:1;cursor:pointer;}#menu6liaem{display:block;width:20px;height:22px;position:absolute;z-index:2;top:20px;left:18px;font-size:14px;color:#fff;font-style:normal;font-weight:bold;cursor:pointer;}#menu6lia:hover{border-bottom-color:#000099;}#menu6lia:hoverb{border-top-color:#000099;}#menu6lia:hoverem{color:orange;}</style></head><body><divid="wrapper"><divid="corner"><b></b><em></em><i></i><strong></strong><span></span><ahref="http://www.ckuyun.com/binyong"id="b1">冰</a><ahref="http://www.ckuyun.com/binyong"id="b2">极</a><ahref="http://www.ckuyun.com/binyong"id="b3">峰</a></div><h1>Border属性的最终研讨---看我七十二变<b>Border属性的最终研讨---看我七十二变</b><strong>原创：冰山顶颠峰</strong></h1><h2class="blog">新Blog地点:<ahref="http://www.ckuyun.com/binyong">http://www.ckuyun.com/binyong</a></h2><divclass="tab"style="margin-top:30px;"><h2>border的基础外形</h2><divclass="base"style="margin-top:10px;"><h3>四条边框的基础变更</h3><tableclass="tb_base"><tr><td><spanclass="s2"></span><p>默许款式</p></td><td><spanclass="s1"></span><p>米字格</p></td><td><spanclass="s3"></span><p>摆布通明</p></td><td><spanclass="s3-1"></span><p>高低通明</p></td></tr></table></div><divclass="base"style="margin-top:10px;"><h3>相邻两条边框构成45度斜角</h3><tableclass="tb_base"><tr><td><spanclass="s4"></span></td><td><spanclass="s5"></span></td><td><spanclass="s6"></span></td><td><spanclass="s7"></span></td></tr></table></div><divclass="base"style="margin-top:10px;margin-bottom:10px;"><h3>相邻三条边框构成三角形</h3><tableclass="tb_base"><tr><td><bclass="t1"></b></td><td><bclass="t2"></b></td><td><bclass="t3"></b></td><td><bclass="t4"></b></td></tr></table></div></div><divclass="tab"><h2>百变神功--border的综合使用</h2><divclass="tab_pannel"><ulid="menu1"><li><ahref="http://www.ckuyun.com/binyong"target="_blank">昔日头条<bstyle="display:block;"></b></a></li><li><ahref="http://www.ckuyun.com/binyong"target="_blank">产物旧事<b></b></a></li><li><ahref="http://www.ckuyun.com/binyong"target="_blank">热门跟踪<b></b></a></li><liid="other"><ahref="http://www.ckuyun.com/binyong"target="_blank">分类旧事<b></b></a></li></ul><divclass="tab_content"><p>这是一个第一个综合使用的例子，鼠标移到下面菜单看看效果，加上JS就是一个选项卡了</p></div></div><divclass="tab_pannel"><ulid="menu2"><liid="m1"><ahref="http://www.ckuyun.com/binyong"target="_blank"><span>昔日头条</span></a></li><liid="m2"><ahref="http://www.ckuyun.com/binyong"target="_blank"><span>产物旧事</span></a></li><liid="m3"><ahref="http://www.ckuyun.com/binyong"target="_blank"><span>热门跟踪</span></a></li><liid="m4"><ahref="http://www.ckuyun.com/binyong"target="_blank"><span>分类旧事</span></a></li></ul><divclass="tab_content"><p>这是第二个综合使用的例子，不划定规矩菜单的使用。</p></div></div><divclass="tab_pannel"><ulid="menu3"><liid="m5"><ahref="http://www.ckuyun.com/binyong"target="_blank"><span>昔日头条</span><em></em></a></li><liid="m6"><ahref="http://www.ckuyun.com/binyong"target="_blank"><span>产物旧事</span><em></em></a></li><liid="m7"><ahref="http://www.ckuyun.com/binyong"target="_blank"><span>热门跟踪</span><em></em></a></li><liid="m8"><ahref="http://www.ckuyun.com/binyong"target="_blank"><span>分类旧事</span></a></li></ul><divclass="tab_content"><p>这是第三个综合使用的例子，菱形菜单的使用。</p></div></div><divclass="tab_content"style="height:100px;margin-bottom:20px;"><h3class="title">Border的仿照秀---滑动栏<spanclass="up"><aid="arrow"href="#none"title="我是border仿照的哟"onclick="closeW(context)"></a></span><spanclass="down"><aid="arrow"href="#none"title="我也是用border仿照的哟"onclick="f_s(context)"></a></span></h3><divclass="box"><spanclass="sliderbg"></span><divid="sliderbar"title="我是border仿照"><ahref="#"><b></b></a></div></div></div><divclass="tab_content"style="height:250px;"><h3class="title">Border的仿照秀---侥幸转轮1<spanclass="up"><aid="arrow"href="#none"title="我是border仿照的哟"onclick="closeW(context)"></a></span><spanclass="down"><aid="arrow"href="#none"title="我也用是border仿照的哟"onclick="f_s(context)"></a></span></h3><divclass="photobox"id="menu4box"><ulid="menu4"><liid="m9"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>祝</b></a></li><liid="m10"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>朋</b></a></li><liid="m11"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>友</b></a></li><liid="m12"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>幸</b></a></li><liid="m13"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>福</b></a></li><liid="m14"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>安</b></a></li><liid="m15"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>康</b></a></li></ul></div></div><divclass="tab_content"style="height:280px;margin-top:20px;"><h3class="title">Border的仿照秀---侥幸转轮2<spanclass="up"><aid="arrow"href="#none"title="我是border仿照的哟"onclick="closeW(context)"></a></span><spanclass="down"><aid="arrow"href="#none"title="我也用是border仿照的哟"onclick="f_s(context)"></a></span></h3><divid="menu5box"class="photobox"><spanclass="intbg"></span><ulid="menu5"><liclass="int"id="f1"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b></b></a></li><liclass="int"id="f2"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b></b></a></li><liclass="int"id="f3"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b></b></a></li><liclass="int"id="f4"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>爱</b></a></li><liclass="int"id="f5"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b></b></a></li><liclass="int"id="f6"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b></b></a></li><liclass="int"id="f7"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b></b></a></li><liclass="out"id="t1"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>有</b></a></li><liclass="out"id="t2"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>一</b></a></li><liclass="out"id="t3"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>种</b></a></li><liclass="out"id="t4"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>叫</b></a></li><liclass="out"id="t5"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>幸</b></a></li><liclass="out"id="t6"><ahref="http://www.ckuyun.com/binyong"target="_blank"><em></em><b>福</b></a></li></ul></div></div><divclass="tab_content"style="height:230px;margin-top:20px;margin-bottom:20px;"><h3class="title">Border的仿照秀--六角星<spanclass="up"><aid="arrow"href="#none"title="我是border仿照的哟"onclick="closeW(context)"></a></span><spanclass="down"><aid="arrow"href="#none"title="我也用是border仿照的哟"onclick="f_s(context)"></a></span></h3><divid="menu6box"class="photobox"><ulid="menu6"><li><ahref="http://www.ckuyun.com/binyong"id="b1"target="_blank"><b></b><em>六</em></a></li><li><ahref="http://www.ckuyun.com/binyong"id="b2"target="_blank"><b></b><em>角</em></a></li><li><ahref="http://www.ckuyun.com/binyong"id="b3"target="_blank"><b></b><em>星</em></a></li><li><ahref="http://www.ckuyun.com/binyong"id="b4"target="_blank"><b></b><em>亮</em></a></li><li><ahref="http://www.ckuyun.com/binyong"id="b5"target="_blank"><b></b><em>晶</em></a></li><li><ahref="http://www.ckuyun.com/binyong"id="b6"target="_blank"><b></b><em>晶</em></a></li></ul></div></div></div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。

只看该作者 · 发表于 2015-1-17 23:53:57

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-1-26 15:13:06

滚动条)层属性--溢出(visible/hidden/scroll/auto)

只看该作者 · 发表于 2015-2-4 20:39:29

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-2-10 09:21:14

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

只看该作者 · 发表于 2015-3-1 09:23:39

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-3-10 16:58:26

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-3-17 09:11:21

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

只看该作者 · 发表于 2015-3-24 05:36:51

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

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

[DIV+CSS] 来讲讲：CSS3教程:边框属性border的极致使用

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

相关帖子