项目符号样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >项目符号样式</ title > < style type="text/css"> ol{ list-style-type: lower-roman;} /* upper 大写 */ </ style > </ head > < body > < h1 >The Complete Poems</ h1 > < h2 > Emily Dickinson</ h2 > < ol > < li >Life</ li > < li >Nature</ li > < li >Love</ li > < li >Time and Eternity</ li > < li >The Single Hound</ li > </ ol > </ body > </ html >项目图像
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >项目图像</ title > < style type="text/css"> ul{ list-style-image: url("images/star.png");} li{ margin: 10px 0px 0px 0px;} </ style > </ head > < body > < h1 >Index of Translated Poems</ h1 > < h2 >Arthur Rimbaud</ h2 > < ul > < li >Ophelia</ li > < li >To Music</ li > < li >A Dream for Winter</ li > < li >Vowels</ li > < li >The Drunken Boat</ li > </ ul > </ body > </ html >标记的定位
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >标记的定位</ title > < style type="text/css"> ul{ width: 250px;} li{ margin: 10px;} ul.illuminations{ list-style-position: outside;} ul.season{ list-style-position: inside;} </ style > </ head > < body > < h3 >Illuminations</ h3 > < ul class="illuminations"> < li >That idol, black eyes and yellow mop, without parents or court ...</ li > < li >Gracious son of Pan! Around your forehead crowned with flowerets ...</ li > < li >When the world is reduced to a single dark wood for our four ...</ li > </ ul > < h3 >A Season in Hell</ h3 > < ul class="season"> < li >Once, if my memory serves me well, my life was a banquet ...</ li > < li >Hadn't I once a youth that was lovely, heroic, fabulous ...</ li > < li >Autumn already! - But why regret the everlasting sun if we are ...</ li > </ ul > </ body > </ html >列表快捷方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >列表快捷方式</ title > < style type="text/css"> ul{ list-style: inside circle; width: 300px;} li{ margin: 10px 0px 0px 0px ;} </ style > </ head > < body > < h1 >Quotes from Edgar Allan Poe</ h1 > < ul > < li >I have great faith in fools; self-confidence my friends call it.</ li > < li >All that we see or seem is but a dream within a dream.</ li > < li >I would define, in brief, the poetry of words as the rhythmical creation of Beauty.</ li > </ ul > </ body > </ html >空单元格的边框
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >空单元格的边框</ title > < style type="text/css"> td{ border: 1px solid #0088dd; padding: 15px;} table.one{ empty-cells: show;} table.two{ empty-cells: hide;} </ style > </ head > < body > < table class="one"> < tr > < td >1</ td > < td >2</ td > </ tr > < tr > < td >3</ td > < td ></ td > </ tr > </ table > < table class="two"> < tr > < td >1</ td > < td >2</ td > </ tr > < tr > < td >3</ td > < td ></ td > </ table > </ body > </ html >单元格之间的间隙
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >单元格之间的间隙</ title > < style type="text/css"> td{ background-color: #0088dd; padding: 15px; border: 2px solid #000000;} table.one{ border-spacing: 5px 15px;} table.two{ border-collapse: collapse;} </ style > </ head > < body > < table class="one"> < tr > < td >1</ td > < td >2</ td > </ tr > < tr > < td >3</ td > < td >4</ td > </ tr > </ table > < table class="two"> < tr > < td >1</ td > < td >2</ td > </ tr > < tr > < td >3</ td > < td >4</ td > </ tr > </ table > </ body > </ html >定义提交按钮样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >定义提交按钮样式</ title > < style type="text/css"> input{ font-size: 120%; color: #5a5854; background-color: #f2f2f2; border: 1px solid #bdbdbd; border-radius: 5px; padding: 5px 5px 5px 10px; background-repeat: no-repeat; background-position: 8px 9px; display: block; margin-bottom: 10px;} input#submit{ color: #444444; text-shadow: 0px 1px 1px #ffffff; border-bottom: 2px solid #b2b2b2; background-color: #b9e4e3; boakground: -webkit-gradient(linear, left top. left bottom, from(#beeae9),to(#a8cfce)); background: -moz-linear-gradient(top, #beeae9 ,#a8cfce); background: -o-linear-gradient(top, #beeae9, #a8cfce); background: -ms-linear-gradient(top, #beeae9, #a8cfce);} input#submit:hover{ color: #333333; border: 1px solid #a4a4a4; border-top: 2px solid #b2b2b2; background-color: #a0dbc4; background: -webkit-gradient(linear, left top, left bottom, from(#a8cfce), to(#beeae9)); background: -o-linear-gradient(top, #a8cfce, #beeae9); background: -ms-linear-gradient(top, #a8cfce, #beeae9); } </ style > </ head > < body > < form > < input type="submit" value="Register" id="submit"/> </ form > </ body > </ html >定义字段集及其说明的样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >定义字段集及其说明的样式</ title > < style type="text/css"> *{ font-family: Arial, Verdana, sans-serif; color: #665544;} input{ border-bottom: 1px dotted #dcdcdc; border-top: none; border-right: none; border-left: none; padding: 5px; width: 280px; margin-bottom: 20px;} input:focus{ border: 1px dotted #dcdcdc; outline: none;} input#submit{ color: #ffffff; background-color: #665544; border: none; border-radius: 5px; width: 80px;} input#submit:hover { color: #665544; background-color: #efefef;} fieldset{ width: 350px; border: 1px solid #dcdcdc; border-radius: 10px; padding: 20px; text-align: right;} legend{ background-color: #efefef; border: 1px solid #dcdcdc; border-radius: 10px; padding: 10px 20px; text-align: left; text-transform: uppercase;} </ style > </ head > < body > < form > < fieldset > < legend >Newsletter</ legend > < label for="name">Name:</ label >< input type="text" id="name"/> < label for="email">Email:</ label >< input type="text" id="email"/> < input type="submit" value="Subscribe" id="submit"/> </ fieldset > </ form > </ body > </ html >表格控件的对齐
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >表单控件的对齐：问题</ title > < style type="text/css"> body{ font-family: Arial, Verdana, sans-serif;} div{ border-bottom: 1px solid #efefef; margin: 10px; padding-bottom: 10px; width: 260px;} .title{ float: left; width: 100px; text-align: right; padding-right: 10px;} .radio-buttons label{ float: none;} .submit{ text-align: right;} </ style > </ head > < body > < form action="example.php" method="post"> < div > < label for="name" class="title">Name:</ label > < input type="text" id="name" name="name"/> </ div > < div > < label for="email" class="title">Email:</ label > < input type="email" id="email" name="email"/> </ div > < div class="radio-buttons"> < span class="title">Gender:</ span > < input type="radio" name="gender" id="male" value="M" > < label for="male">M</ label > < input type="radio" name="gender" id="female" value="F"> < label for="female">F</ label >< br /> </ div > < div class="submit"> < input type="submit" value="Register" id="submit"/> </ div > </ form > </ body > </ html >
光标样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >光标样式</ title > < style type="text/css"> a{ cursor: move} </ style > </ head > < body > < p > < a href="http://www.whitmanarchive.org">Walt Whitman</ a > </ p > </ body > </ html >