由于个人水平有限，白天还要上班，晚上基本都用来练习，没有时间去写博客。（写的博客，有一种敷衍了事的感觉，文章质量很差。）
暂定：由每周更新改为每两周更新。
以下为这周写的html代码。仅供参考。（有的地方还是有问题！！）
1 <!doctype html> 2 <html> 3 <head> 4 <title>Layout</title> 5 <link rel='stylesheet' type='text/css' href='960_12_col.css'> 6 <style type='text/css'> 7 @font-face { 8 font-family: 'QuicksandBook'; 9 src: url('fonts/Quicksand_Book-webfont.eot'); 10 src: url('fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'), 11 url('fonts/Quicksand_Book-webfont.woff') format('woff'), 12 url('fonts/Quicksand_Book-webfont.ttf') format('truetype'), 13 url('fonts/Quicksand_Book-webfont.svg#QuicksandBook') format('svg'); 14 font-weight: normal; 15 font-style: normal;} 16 body { 17 color: #ffffff; 18 background: #413f3b url("images/bg.jpg"); 19 font-family: Georgia, "Times New Roman", Times, serif; 20 font-size: 90%; 21 margin: 0px; 22 text-align: center;} 23 a { 24 color: #b5c1ad; 25 text-decoration: none;} 26 a:hover { 27 color: #ffffff;} 28 .header { 29 background-image: url("images/bg-header.jpg"); 30 padding: 0px 0px 0px 0px; 31 height: 100px; 32 position: fixed; 33 top: 0px; 34 width: 100%; 35 z-index: 50;} 36 .nav { 37 float: right; 38 font-family: QuicksandBook, Helvetica, Arial, sans-serif; 39 padding: 45px 0px 0px 0px; 40 text-align: right;} 41 .wrapper { 42 width: 960px; 43 margin: 0px auto; 44 background-image: url("images/bg-triangle.png"); 45 background-repeat: no-repeat; 46 background-position: 0px 0px; 47 text-align: left;} 48 .logo { 49 margin-bottom: 20px;} 50 h1, h2 { 51 font-family: QuicksandBook, Helvetica, Arial, sans-serif; 52 font-weight: normal; 53 text-transform: uppercase;} 54 h1 { 55 font-size: 240%; 56 margin-top: 140px;} 57 .date { 58 font-family: Arial, Helvetica, sans-serif; 59 font-size: 75%; 60 color: #b5c1ad;} 61 .intro { 62 clear: left; 63 font-size: 90%; 64 line-height: 1.4em;} 65 .main-story { 66 background-image: url("images/triangles.png"); 67 background-repeat: no-repeat; 68 background-position: 122px 142px; 69 height: 570px;} 70 .more-articles { 71 border-top: 1px solid #ffffff; 72 padding: 10px;} 73 .more-articles p { 74 border-bottom: 1px solid #807c72; 75 padding: 5px 0px 15px 0px; 76 font-size: 80%;} 77 .more-articles p:last-child { 78 border-bottom: none;} 79 .footer { 80 clear: both; 81 background: rgba(0, 0, 0, 0.2); 82 padding: 5px 10px;} 83 .footer p { 84 font-family: Helvetica, Arial, sans-serif; 85 font-size: 75%; 86 text-align: right;} 87 .footer a { 88 color: #807c72;} 89 90 </style> 91 </head> 92 <body> 93 <div class='header'> 94 <div class='container_12'> 95 <div class='grid_5'> 96 <img src='logo.png' alt='Pedal Faster -The modern bicycle magazine' width='216' height='37' class='logo'> 97 <img src='header-triangle.png' alt width='111' height='100'> 98 </div> 99 <div class='nav grid_7' > 100 <a href>home</a> 101 / 102 <a href>news</a> 103 / 104 <a href>archivers</a> 105 / 106 <a href>about</a> 107 / 108 <a href>contact</a> 109 </div> 110 </div> 111 </div> 112 <div class='wrapper'> 113 <div class='main-story container_12'> 114 <div class='grid_6 push_6'> 115 <h1> 116 <a href>Fixed Gear Forever</a> 117 </h1> 118 </div> 119 <div class='intro grid_3 push_9'> 120 <p class='date'>16 APRIL 2011</p> 121 <p> 122 The veloheld combines minimalist design with superb quality. Devoid of excessive graphics and gear shift components, 123 the veloheld product range delights us with its beauty and simplicity. The black and white (yin and yang?) bicycles 124 feature a short wheelbase, a single gear and a narrow handlebar... All you need to explore the city streets. 125 </p> 126 <p> 127 For those who want to create their bike themselves, the veloheld frames come in three sizes and two colours and are the perfect starting point. 128 <a href>Continue reading</a> 129 </p> 130 </div> 131 </div> 132 <!--.more-articles--> 133 <div class='more-articles container_12'> 134 <h2 class='grid_12'> 135 <a href>More Articls</a> 136 </h2> 137 <div class='grid_3'> 138 <img src='more1.jpg' alt='The road ahead' width='220' height='125'> 139 <p> 140 <a href="">On the Road: From the fixed gear fanatic's point of view</a> 141 </p> 142 <p> 143 <a href="">Brand History: Pashley Cycles - hand-built in England</a> 144 </p> 145 <p> 146 <a href="">Frame Wars: Innovations in cycle manufacture and repair</a> 147 </p> 148 </div> 149 <div class='grid_3'> 150 <img src='more2.jpg' alt='Sketchook' width='220' height='125'> 151 <p> 152 <a href="">Touring Diary: A sketchbook in your basket</a> 153 </p> 154 <p> 155 <a href="">Top Ten Newcomers for 2012: A peek at what's to come</a> 156 </p> 157 <p> 158 <a href="">InnerTube: The best cycling videos on the web</a> 159 </p> 160 </div> 161 <div class='grid_3'> 162 <img src="more3.jpg" alt="Repair shop sign" width="220" height="125"> 163 <p> 164 <a href="">Product Review: All baskets were not created equal</a> 165 </p> 166 <p> 167 <a href="">Going Public: Out & about with the founder of Public</a> 168 </p> 169 <p> 170 <a href="">Cycle Lane Defence: Know your rights</a> 171 </p> 172 </div> 173 <div class='grid_3'> 174 <img src="more4.jpg" alt="Schwinn Spitfire" width="220" height="125"> 175 <p> 176 <a href="">Bicycle Hall of Fame: The 1958 Schwinn Spitfire</a> 177 </p> 178 <p> 179 <a href="">Reader Survey: Share your thoughts with us!</a> 180 </p> 181 <p> 182 <a href="">Chain Gang: The evolution of the humble bike chain</a> 183 </p> 184 </div> 185 </div> 186 <!---.more-articles---> 187 </div> 188 <!--- .wrapper --> 189 <div class='footer clearfix'> 190 ::before 191 <div class='container_12'> 192 <p class='grid_12'> 193 <a href>Legal Infomation</a> 194 | 195 <a href>Privacy Policy</a> 196 | 197 <a href>Copyright@Pedal Faster 2011</a> 198 </p> 199 </div> 200 ::after 201 </div> 202 </body> 203 </html> 204 205 206 207
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
