|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
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标签只用来表现格式化的数据等等。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 00:03:21
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜