css终极应用(各国国旗的实现)

技术2022-05-11 99

综合应用了绝对定位，特殊字符，滤镜等等，值得学习一下美国国旗 HTML代码 <STYLE type=text/css> .star {width:14px; height:13px; text-align:center; background:#004080; float:left; } .star em {display:block; overflow:hidden;background:#fff; margin:0 auto;} em.s1 {width:1px; height:2px;} em.s2 {width:3px; height:2px;} em.s3 {width:13px; height:1px;} em.s4 {width:9px; height:1px; border-left:1px solid #a9bfd4; border-right:1px solid #a9bfd4;} em.s5 {width:5px; height:1px; border-left:1px solid #a9bfd4; border-right:1px solid #a9bfd4;} em.s6 {width:5px; height:2px;} em.s7 {width:1px; border-left:3px solid #fff; border-right:3px solid #fff; height:1px; background:#a9bfd4;} em.s8 {width:3px; border-left:2px solid #fff; border-right:2px solid #fff; height:1px; background:#004080;} em.s9 {width:5px; border-left:2px solid #fff; border-right:2px solid #fff; height:1px; background:#004080;} #flag {width:470px; height:247px; border:3px solid #ffd700; background:#fff; position:relative; margin:0 auto;} .stripe {width:470px; height:19px; background:#c00; border-bottom:19px solid #fff;} .stripe2 {width:470px; height:19px; background:#c00;} #union {width:188px; height:130px; background:#004080; position:absolute; left:0; top:0; padding-top:3px;} .pad {width:16px; height:1px; float:left; overflow:hidden;} .pad1 {width:12px; height:1px; float:left; overflow:hidden;} .pad2 {width:32px; height:1px; float:left; overflow:hidden;} .pad3 {width:26px; height:1px; overflow:hidden; clear:both;} .pad4 {width:26px; height:1px; float:left; overflow:hidden;} </STYLE> <DIV id=info> <H2>THE STAR SPANGLED BANNER</H2> <DIV id=flag> <DIV class=stripe></DIV> <DIV class=stripe></DIV> <DIV class=stripe></DIV> <DIV class=stripe></DIV> <DIV class=stripe></DIV> <DIV class=stripe></DIV> <DIV class=stripe2></DIV> <DIV id=union> <DIV class=pad1></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad3></DIV> <DIV class=pad4></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad3></DIV> <DIV class=pad1></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad3></DIV> <DIV class=pad4></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad3></DIV> <DIV class=pad1></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad3></DIV> <DIV class=pad4></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad3></DIV> <DIV class=pad1></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad3></DIV> <DIV class=pad4></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad3></DIV> <DIV class=pad1></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad></DIV> <DIV class=star><EM class=s1></EM><EM class=s2></EM><EM class=s3></EM><EM class=s4></EM><EM class=s5></EM><EM class=s6></EM><EM class=s7></EM><EM class=s8></EM><EM class=s9></EM></DIV> <DIV class=pad3></DIV></DIV></DIV> <DIV id=ads> </DIV> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] 英国国旗 HTML代码 <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="en" > <head> <title>?</title> <style type="text/css"> /* The actual flag divs */ .flag {clear:both; display:block; width:432px; height:216px; border:1px solid #aaa; position:relative; background:#fff; overflow:hidden; margin:2em auto;} * html .flag {width:434px; height:218px; w/idth:432px; he/ight:216px;} .top_blue {display:block; width:72px; height:0; overflow:hidden; border-top:65px solid #006; border-left:130px solid #fff; border-right:130px solid #fff; position:absolute; left:50px; top:0;} * html .top_blue {width:332px; height:65px; w/idth:72px; he/ight:0;} .bottom_blue {display:block; width:72px; height:0; overflow:hidden; border-bottom:65px solid #006; border-left:130px solid #fff; border-right:130px solid #fff; position:absolute; left:50px; bottom:0;} * html .bottom_blue {width:332px; height:65px; w/idth:72px; he/ight:0;} .left_blue {display:block; width:0; height:72px; overflow:hidden; border-top:47px solid #fff; border-left:94px solid #006; border-bottom:47px solid #fff; position:absolute; left:0; top:25px;} * html .left_blue {width:94px; height:166px; w/idth:0; he/ight:72px;} .right_blue {display:block; width:0; height:72px; overflow:hidden; border-top:47px solid #fff; border-right:94px solid #006; border-bottom:47px solid #fff; position:absolute; right:0; top:25px;} * html .right_blue {width:94px; height:166px; w/idth:0; he/ight:72px;} .horiz {display:block; width:432px; height:44px; background:#c00; border-top:14px solid #fff; border-bottom:14px solid #fff; position:absolute; left:0; top:72px;} * html .horiz {height:72px; he/ight:44px;} .top_vert, .bot_vert {display:block; width:44px; height:86px; background:#c00; border-left:14px solid #fff; border-right:14px solid #fff; position:absolute;} * html .top_vert {width:72px; w/idth:44px;} * html .bot_vert {width:72px; w/idth:44px;} .top_vert {left:180px; top:0;} .bot_vert {left:180px; bottom:0;} .bka, .bkb, .bkc, .bkd, .bke, .bkf, .bkg, .bkh, .bki, .bkj, .bkk, .bkl, .bkm, .bkn, .bko, .bkp, .bkq, .bkr, .bxa, .bxb, .bxc, .bxd, .bxe, .bxf, .bxg, .bxh, .bxi, .bxj, .bxk, .bxl, .bxm, .bxn, .bxo, .bxp, .bxq, .bxr {width:50px; height:8px; background:#c00; position:absolute; overflow:hidden;} .lrtb_left {width:0; height:0; border-top:8px solid #c00; border-left:16px solid #fff; float:left; overflow:hidden;} * html .lrtb_left {width:16px; height:8px; w/idth:0; height:0;} .lrtb_right {width:0; height:0; border-top:8px solid #fff; border-left:16px solid #c00; float:right; overflow:hidden;} * html .lrtb_right {width:16px; height:8px; w/idth:0; height:0;} .lrbt_left {width:0; height:0; border-top:8px solid #fff; border-right:16px solid #c00; float:left; overflow:hidden;} * html .lrbt_left {width:16px; height:8px; w/idth:0; height:0;} .lrbt_right {width:0; height:0; border-top:8px solid #c00; border-right:16px solid #fff; float:right; overflow:hidden;} * html .lrbt_right {width:16px; height:8px; w/idth:0; height:0;} .bka {top:0; left:-34px;} .bkb {top:8px; left:-18px;} .bkc {top:16px; left:-2px;} .bkd {top:24px; left:14px;} .bke {top:32px; left:30px;} .bkf {top:40px; left:46px;} .bkg {top:48px; left:62px;} .bkh {top:56px; left:78px;} .bki {top:64px; left:94px;} .bkj {top:144px; left:288px;} .bkk {top:152px; left:304px;} .bkl {top:160px; left:320px;} .bkm {top:168px; left:336px;} .bkn {top:176px; left:352px;} .bko {top:184px; left:368px;} .bkp {top:192px; left:384px;} .bkq {top:200px; left:400px;} .bkr {top:208px; left:416px;} .bxa {bottom:0; left:-2px;} .bxb {bottom:8px; left:14px;} .bxc {bottom:16px; left:30px;} .bxd {bottom:24px; left:46px;} .bxe {bottom:32px; left:62px;} .bxf {bottom:40px; left:78px;} .bxg {bottom:48px; left:94px;} .bxh {bottom:56px; left:110px;} .bxi {bottom:64px; left:126px;} .bxj {bottom:144px; left:254px;} .bxk {bottom:152px; left:270px;} .bxl {bottom:160px; left:286px;} .bxm {bottom:168px; left:302px;} .bxn {bottom:176px; left:318px;} .bxo {bottom:184px; left:334px;} .bxp {bottom:192px; left:350px;} .bxq {bottom:200px; left:366px;} .bxr {bottom:208px; left:382px;} /* The explanation divs */ .how {clear:both; margin:10px auto 0 auto;} .xflag {display:block; width:432px; height:216px; border:1px solid #aaa; position:relative; background:#fff; overflow:hidden;} * html .xflag {width:434px; height:218px; w/idth:432px; he/ight:216px;} .xtop_blue {display:block; width:72px; height:0; overflow:hidden; border-top:65px solid #006; border-left:130px solid #fff; border-right:130px solid #fff;} * html .xtop_blue {width:332px; height:65px; w/idth:72px; he/ight:0;} .xbottom_blue {display:block; width:72px; height:0; overflow:hidden; border-bottom:65px solid #006; border-left:130px solid #fff; border-right:130px solid #fff;} * html .xbottom_blue {width:332px; height:65px; w/idth:72px; he/ight:0;} .xleft_blue {display:block; width:0; height:72px; overflow:hidden; border-top:47px solid #fff; border-left:94px solid #006; border-bottom:47px solid #fff;} * html .xleft_blue {width:94px; height:166px; w/idth:0; he/ight:72px;} .xright_blue {display:block; width:0; height:72px; overflow:hidden; border-top:47px solid #fff; border-right:94px solid #006; border-bottom:47px solid #fff;} * html .xright_blue {width:94px; height:166px; w/idth:0; he/ight:72px;} .xhoriz {display:block; width:432px; height:44px; background:#c00; border-top:14px solid #fff; border-bottom:14px solid #fff;} * html .xhoriz {height:72px; he/ight:44px;} .xtop_vert, .xbot_vert {display:block; width:44px; height:86px; background:#c00; border-left:14px solid #fff; border-right:14px solid #fff;} * html .xtop_vert {width:72px; w/idth:44px;} * html .xbot_vert {width:72px; w/idth:44px;} .xbka {width:50px; height:8px; background:#c00; overflow:hidden; position:relative;} .xlrtb_left {width:0; height:0; border-top:8px solid #c00; border-left:16px solid #fff; overflow:hidden;} * html .xlrtb_left {width:16px; height:8px; w/idth:0; height:0;} .xlrtb_right {width:0; height:0; border-top:8px solid #fff; border-left:16px solid #c00; overflow:hidden;} * html .xlrtb_right {width:16px; height:8px; w/idth:0; height:0;} .xlrbt_left {width:0; height:0; border-top:8px solid #fff; border-right:16px solid #c00; overflow:hidden;} * html .xlrbt_left {width:16px; height:8px; w/idth:0; height:0;} .xlrbt_right {width:0; height:0; border-top:8px solid #c00; border-right:16px solid #fff; overflow:hidden;} * html .xlrbt_right {width:16px; height:8px; w/idth:0; height:0;} h4 {margin-left:5px;} .exp {margin:2em 0 0 0;} .bold {font-weight:bold;} </style>  </head> <body> <h2>英国，哈哈哈</h2> <div class="flag"> <div class="top_blue"></div> <div class="bottom_blue"></div> <div class="left_blue"></div> <div class="right_blue"></div> <div class="horiz"></div> <div class="top_vert"></div> <div class="bot_vert"></div> <div class="bka"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkb"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkc"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkd"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bke"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkf"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkg"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkh"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bki"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkj"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkk"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkl"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkm"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkn"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bko"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkp"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkq"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bkr"><div class="lrtb_left"></div><div class="lrtb_right"></div></div> <div class="bxa"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxb"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxc"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxd"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxe"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxf"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxg"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxh"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxi"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxj"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxk"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxl"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxm"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxn"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxo"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxp"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxq"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> <div class="bxr"><div class="lrbt_left"></div><div class="lrbt_right"></div></div> </div> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] 咱中国的 HTML代码 <html> <head> <title></title> <style> *{ margin: 0px; } #con{ width:500px; height:800px; margin:0 auto; padding-top:50px;} #con #cont{ width: 300px; height: 200px; background-color: red; position:absolute; left:350px; } #con #cont .big{ color: Yellow; position: absolute; left: 20px; top: 18px; } #con #cont .sm1{ color: Yellow; position: absolute; left: 85px; top: 8px; filter:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2) } #con #cont .sm2{ color: Yellow; position: absolute; left: 107px; top: 32px; filter:progid:DXImageTransform.Microsoft.BasicImage(Rotation=3) } #con #cont .sm3{ color: Yellow; position: absolute; left: 107px; top: 62px; filter:progid:DXImageTransform.Microsoft.BasicImage(Rotation=1) } #con #cont .sm4{ color: Yellow; position: absolute; left: 85px; top:80px; filter:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2) } #con #cont .gan{ color:#CCCCCC; position:absolute; left:-130px; } </style> </head> <body> <div id="con"> <div id="cont"> <div><span class="big"><font style="font-size:60px;">★</font></span></div> <div><span class="sm1"><font style="font-size:20px;">★</font></span></div> <div><span class="sm2"><font style="font-size:20px;">★</font></span></div> <div><span class="sm3"><font style="font-size:20px;">★</font></span></div> <div><span class="sm4"><font style="font-size:20px;">★</font></span></div> </div> </div> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] 最后再来一个旋转的例子 HTML代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <style type="text/css"> .a {width:255px;height:200px;filter : progid:DXImageTransform.Microsoft.Matrix(SizingMethod=auto expand,FilterType=bilinear,Dx=0,Dy=0,M11=1,M12=-0.1,M21=0.1,M22=1);} .b {width:400px;height:200px;filter : progid:DXImageTransform.Microsoft.Matrix(SizingMethod=auto expand,FilterType=bilinear,Dx=0,Dy=0,M11=3,M12=0.1,M21=-0.1,M22=1);} </style> </head> <body> <table align="left"> <tr> <td class="a">　 <textarea name="textfield" rows="5">嘿嘿，来这里打个字。 CAPF</textarea></td> </tr> </table> <table> <tr> <td class="b"> <p> <textarea name="textarea" rows="5">CAPF想咋转咋转</textarea> </p> <p>不过只兼容IE </p></td> </tr> </table> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

专利

最新回复(0)