在决定自学web前端后的第一本书《Head First HTML and CSS》，这本书的优点，emm...受益匪浅并且非常有意思，学以至半，一下是跟练的小网页：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Head First Lounge</title> 6 <style type="text/css"> 7 body { 8 font-size: small; 9 font-family: Verdana, Helvetica, Arial, sans-serif; 10 line-height: 1.6em; 11 } 12 13 h1, h2 { 14 color: #007e7e; 15 } 16 17 h1 { 18 font-size: 150%; 19 } 20 21 h2 { 22 font-size: 130%; 23 } 24 25 #guarantee { 26 line-height: 1.9em; 27 font-style: italic; 28 font-family: Georgia, "Times New Roman", Times, serif; 29 color: #444444; 30 border-color: white; 31 border-width: 1px; 32 border-style: dashed; 33 background-color: #a7cece; 34 padding: 25px; 35 padding-left: 80px; 36 margin: 30px; 37 margin-right: 250px; 38 background-image: url(images/background.gif); 39 background-repeat: no-repeat; 40 background-position: top left; 41 } 42 #elixirs{ 43 border-style: solid; 44 border-width: thin; 45 border-color: #007e7e; 46 width: 200px; 47 background-image: url(images/cocktail.gif); 48 background-position: top; 49 background-repeat: repeat-x; 50 padding-left: 20px; 51 padding-right: 20px; 52 padding-bottom: 20px; 53 margin-left: 20px; 54 text-align: center; 55 line-height: 1; 56 float: right; 57 } 58 #footer{ 59 font-size:50%; 60 text-align:center; 61 line-height:normal; 62 margin_top:30px; 63 } 64 #elixirs h2{ 65 color: black; 66 } 67 #elixirs h3{ 68 color: #d12c47; 69 } 70 .cd{ 71 font-style:italic; 72 } 73 .artist{ 74 font-weight:bold; 75 } 76 #elixirs a:link{ 77 color:#007e7e; 78 } 79 #elixirs a:visited{ 80 color:#333333; 81 } 82 #elixirs a:hover{ 83 background:#f88396; 84 color:#0d5353; 85 } 86 </style> 87 </head> 88 <body> 89 <p><img src="images/logo.gif" alt="Head First Lounge"></p> 90 <div id="elixirs"> 91 <h2>Weekly Elixir Specials</h2> 92 <p> 93 <img src="images/yellow.gif" alt="Lemon Breeze Elixir"> 94 </p> 95 <h3>Lemon Breeze</h3> 96 <p> 97 The ultimate healthy drink, this elixir combines 98 herbal botanicals, minerals, and vitamins with 99 a twist of lemon into a smooth citrus wonder 100 that will keep your immune system going all 101 day and all night. 102 </p> 103 104 <p> 105 <img src="images/chai.gif" alt="Chai Chiller Elixir"> 106 </p> 107 <h3>Chai Chiller</h3> 108 <p> 109 Not your traditional chai, this elixir mixes maté 110 with chai spices and adds an extra chocolate kick for 111 a caffeinated taste sensation on ice. 112 </p> 113 114 <p> 115 <img src="images/black.gif" alt="Black Brain Brew Elixir"> 116 </p> 117 <h3>Black Brain Brew</h3> 118 <p> 119 Want to boost your memory? Try our Black Brain Brew 120 elixir, made with black oolong tea and just a touch 121 of espresso. Your brain will thank you for the boost. 122 </p> 123 124 <p> 125 Join us any evening for these and all our 126 other wonderful 127 <a href="beverages/elixir.html" 128 title="Head First Lounge Elixirs">elixirs</a>. 129 </p> 130 </div> 131 <h1>Welcome to the Head First Lounge</h1> 132 <p> 133 The Head First Lounge is, no doubt, the biggest trendsetter in Webville. 134 Stop in to sample the eclectic offering of elixirs, teas, and coffees, 135 or, stay a bit longer and enjoy the multicultural culinary menu that 136 combines a harmony of taste, texture, and color with the best in fresh 137 and healthy ingredients. 138 </p> 139 140 <p> 141 During your stay at the lounge, you'll enjoy a smooth mixture of 142 ambient and mystic sounds, filling the lounge and adding an extra dimension 143 to your dining experience. The decor surrounds you with the relaxing sentiments 144 of sights from eras past. And, don't forget, the lounge offers free wireless 145 access to the Internet, so bring your laptop. 146 </p> 147 148 <p id="guarantee"> 149 Our guarantee: at the lounge, we're committed to providing you, 150 our guest, with an exceptional experience every time you visit. 151 Whether you're just stopping by to check in on email over an 152 elixir, or are here for an out-of-the-ordinary dinner, you'll 153 find our knowledgeable service staff pay attention to every detail. 154 If you're not fully satisfied, have a Blueberry Bliss Elixir on us. 155 </p> 156 157 <p> 158 But that's not all; at night, join us in the backroom as our resident 159 DJ spins a choice selection of trance and drum&bass beats across 160 our spacious tiki-themed dance floor. Or just hang out in one of our 161 comfy white vinyl booths at the dance bar. You can have your elixirs 162 delivered from the main lounge right to the dance floor. If you've 163 had enough of the beat, just head back to the lounge area to relax. 164 And, no matter where you find yourself in the lounge, you'll always be 165 connected with our wireless Internet access. 166 </p> 167 168 <p> 169 Now that you've experienced the lounge <em>virtually</em>, isn't 170 it time to check us out <em>for real</em>? We're located right 171 in the heart of Webville, and we've created some 172 <a href="about/directions.html" 173 title="Detailed Directions to the Lounge">detailed directions</a> 174 to get you here in record time. No reservations necessary; 175 come and join us anytime. 176 </p> 177 178 179 <h2>What's playing at the Lounge</h2> 180 <p> 181 We're frequently asked about the music we play at the lounge, and no wonder, 182 it's great stuff. Just for you, we keep a list here on the site, updated weekly. 183 Enjoy. 184 </p> 185 <ul> 186 <li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li> 187 <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li> 188 <li><span class="cd">Earth 7</span>, L.T.J. <span class="artist">Bukem</span></li> 189 <li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li> 190 <li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li> 191 </ul> 192 <div id="footer"> 193 <small> 194 © 2012, Head First Lounge<br> 195 All trademarks and registered trademarks appearing on this site are 196 the property of their respective owners. 197 </small> 198 </div> 199 </body> 200 </html>
