样式表制作xhtml验证”图片”

Nov 15, 2004 Author: | Filed under: Uncategorized

原文在：

http://www.sovavsiti.cz/css/w3c_buttons.html

挺有意思，可以练习css的控制。

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="gb2312"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <meta http-equiv="Content-language" content="2312" /> <style type="text/css" media="all"> div.w3cbutton1 { position: relative; margin: 1em 0; font-family: helvetica,arial,sans-serif; font-size: 70%; font-weight: bold; } div.w3cbutton1 a { display: block; border-top: 1px solid #cecece; border-bottom: 2px solid #4a4a4a; } div.w3cbutton1 a.w3c1 { width: 3em; border-left: 1px solid #cecece; text-align: center; } div.w3cbutton1 a.spec1 { position: absolute; left: 3em; top: 0; width: 6em; border-right: 2px solid #4a4a4a; padding-left: 0.5em; } div.w3cbutton1 a.w3c1:link, div.w3cbutton1 a.w3c1:visited, div.w3cbutton1 a.w3c1:hover { background-color: #fff; color: #0c479d; text-decoration: none; } div.w3cbutton1 a.spec1:link, div.w3cbutton1 a.spec1:visited, div.w3cbutton1 a.spec1:hover { background-color: #fc6; color: #000; text-decoration: none; } </style> </head> <body> <div class="w3cbutton1"> <a class="w3c1" href="...">W3C</a> <a class="spec1" href="...">XHTML 1.0</a> </div> <div class="w3cbutton1"> <a class="w3c1" href="...">W3C</a> <a class="spec1" href="...">CSS</a> </div> </body> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="gb2312"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <meta http-equiv="Content-language" content="2312" /> <style type="text/css" media="all"> .w3cbutton4 { margin: 1em 0; width: 9em; font-family: helvetica,arial,sans-serif; font-size: 70%; font-weight: bold; } .w3cbutton4 a { display: block; width: 100%; } .w3cbutton4 a:link, .w3cbutton4 a:visited, .w3cbutton4 a:hover { background-color: #fc6; color: #000; text-decoration: none; } .w3cbutton4 a:link, .w3cbutton4 a:visited { border-top: 1px solid #cecece; border-bottom: 2px solid #4a4a4a; border-left: 1px solid #cecece; border-right: 2px solid #4a4a4a; } .w3cbutton4 a:hover { border-bottom: 1px solid #cecece; border-top: 2px solid #4a4a4a; border-right: 1px solid #cecece; border-left: 2px solid #4a4a4a; } .w3cbutton4 span.w3c { padding: 0 0.4em; background-color: #fff; color: #0c479d; } </style> </head> <body> <div class="w3cbutton4"> <a href="..."> W3C XHTML 1.0 </a> </div> </body> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="gb2312"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <meta http-equiv="Content-language" content="2312" /> <style type="text/css" media="all"> a.w3cbutton2 { display: block; position: relative; width: 82px; height: 28px; margin: 1em 0; border-top: 1px solid #cecece; border-right: 2px solid #4a4a4a; border-bottom: 2px solid #4a4a4a; border-left: 1px solid #cecece; font-family: helvetica,arial,sans-serif; font-size: 11px; font-weight: bold; } a.w3cbutton2:link, a.w3cbutton2:visited, a.w3cbutton2:hover { text-decoration: none; } a.w3cbutton2 span { display: block; padding: 0 2px; } span.w3c2 { background-color: #fff; color: #0c479d; font-size: 13px; line-height: 28px; } span.spec2 { position: absolute; top: 0; left: 34px; width: 44px; padding: 0 2px; background-color: #fc6; color: #000; line-height: 14px; } span.check { position: absolute; top: 4px; left: 64px; color: #900; font-size: 23px; font-weight: bold; } </style> </head> <body> <a class="w3cbutton2" href="http://validator.w3.org/check/referer">W3C XHTML 1.0 √</a> </body> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Flickr PhotoStream

郭爽的网页设计资料

样式表制作xhtml验证”图片”

Leave a reply

Flickr PhotoStream

Recent Posts

Recent Comments

Pages

Categories

Tags

Archives

Blogroll

Meta

Advertising

Most Popular

Recent Comments

Latest Entries