第1章 HTML5基础
续上一篇博文。。。。。
如果觉得上一篇随笔中的项目实战（个人博客首页）的网页缺乏色彩、结构单调的话，可以在<head>头部标签中创建内部样式表，然后添加以下样式设计内容，就可以得到较为美观的静态博客首页了。
1 <style type="text/css"> 2 body { 3 background-color: #000; 4 font-family: Geneva, Arial, Helvetica, sans-serif; 5 margin: 0px auto; 6 max-width: 1024px; 7 border: solid 1px #fff; 8 } 9 article, section, nav, aside, main, header, hgroup, footer { display: block; } 10 h1 { 11 font-size: 34px; 12 margin: 0px; 13 } 14 h2 { 15 font-size: 24px; 16 margin: 0px; 17 text-align: center; 18 color: #F47D31; 19 } 20 h3 { 21 font-size: 18px; 22 margin: 0px; 23 text-align: center; 24 color: #F47D31; 25 } 26 ul, ol { 27 list-style-type: none; 28 padding: 0; 29 margin: 1em 0 1em 2em; 30 } 31 32 33 /*超链接 */ 34 a { 35 text-decoration: none; 36 color: #F47D31; 37 } 38 a:hover { 39 text-decoration: none; 40 color: #000; 41 } 42 footer a { color: #eee; } 43 footer a:hover { color: #000; } 44 45 /*标题栏 */ 46 header { 47 background-color: #F47D31; 48 color: #FFF; 49 } 50 body > header h1 { 51 margin-left: 40px; 52 line-height: 2em; 53 padding-top: 4px; 54 } 55 body > header h2 { 56 color: #eee; 57 font-size: 14px; 58 text-align: left; 59 margin-left: 40px; 60 padding-bottom: 16px; 61 } 62 header h4 { 63 color: #F47D31; 64 background-color: #fff; 65 -webkit-box-shadow: 2px 2px 20px #888; 66 -webkit-transform: rotate(45deg); 67 -moz-box-shadow: 2px 2px 20px #888; 68 -moz-transform: rotate(45deg); 69 box-shadow: 2px 2px 20px #888; 70 transform: rotate(45deg); 71 position: fixed; 72 padding: 12px 200px; 73 top: 40px; 74 right: -240px; 75 text-align: center; 76 text-shadow: 1px 1px #eee; 77 width: 260px; 78 } 79 /*导航栏 */ 80 nav { 81 width: 15%; 82 float: left; 83 background: #fff; 84 margin-top: 1px; 85 } 86 nav a:link, nav a:visited { 87 display: block; 88 border-bottom: 1px solid #ccc; 89 padding: 12px; 90 text-decoration: none; 91 font-weight: bold; 92 } 93 nav a:hover { 94 color: white; 95 background-color: #F47D31; 96 } 97 nav h3 { 98 margin: 15px; 99 color: white; 100 display: none; 101 } 102 /*主要内容区域 */ 103 main { background-color: #888; } 104 105 /*文章区块 */ 106 section { 107 width: 60%; 108 float: left; 109 } 110 section>h2{display:none;} 111 /*文章栏 */ 112 article { 113 background-color: #eee; 114 margin: 10px; 115 padding: 10px; 116 text-indent: 2em; 117 line-height: 1.8em; 118 -webkit-border-radius: 8px; 119 -webkit-box-shadow: 2px 2px 20px #888; 120 -webkit-transform: rotate(2deg); 121 -moz-border-radius: 8px; 122 -moz-box-shadow: 2px 2px 20px #888; 123 -moz-transform: rotate(2deg); 124 border-radius: 8px; 125 box-shadow: 2px 2px 20px #888; 126 transform: rotate(2deg); 127 } 128 article header { 129 -webkit-border-radius: 8px; 130 -moz-border-radius: 8px; 131 border-radius: 8px; 132 padding: 5px; 133 } 134 article h1 { 135 font-size: 22px; 136 line-height:2em; 137 138 } 139 article footer { 140 -webkit-border-radius: 8px; 141 -moz-border-radius: 8px; 142 border-radius: 8px; 143 padding: 5px; 144 text-align: left; 145 } 146 article footer h2, article footer p { 147 display: inline; 148 padding: 6px; 149 margin-left:-12px; 150 color:#fff; 151 font-size:16px; 152 } 153 article footer h2:after{ 154 content:":"; 155 } 156 157 /*辅助栏 */ 158 aside { 159 width: 25%; 160 float: left; 161 background: #fff; 162 } 163 aside h3 { 164 margin: 16px 12px 0 12px; 165 padding: 0 0 6px 0; 166 color: #777; 167 border-bottom: solid 1px #ccc; 168 } 169 /*有序列表排序符号 */ 170 aside ol li { 171 background: url(images/top10-bullet.png) no-repeat 2px 10px; 172 padding: 1px 0px 0px 28px; 173 line-height: 30px; 174 height:30px; 175 overflow:hidden; 176 white-space: nowrap; 177 text-overflow: ellipsis; 178 } 179 aside ol li:first-child { 180 background-position:2px 10px; 181 } 182 aside ol li:nth-child(2) { 183 background-position:2px -31px; 184 } 185 aside ol li:nth-child(3) { 186 background-position:2px -72px; 187 } 188 aside ol li:nth-child(4) { 189 background-position:2px -113px; 190 } 191 aside ol li:nth-child(5) { 192 background-position:2px -154px; 193 } 194 aside ol li:nth-child(6) { 195 background-position:2px -195px; 196 } 197 aside ol li:nth-child(7) { 198 background-position:2px -236px; 199 } 200 201 202 /*页脚栏 */ 203 footer { 204 clear: both; 205 background-color: #F47D31; 206 color: #FFFFFF; 207 text-align: center; 208 padding: 6px; 209 } 210 main > footer h2 { 211 display: none; 212 } 213 </style>
在加入设计的内部样式表后的博客首页效果图：
总结：项目实战代码中静态页面整个页面分为两部分：标题部分和主要内容部分。标题部分包括：网站标题、副标题和提示性标题信息；主要内容部分包括4部分：导航、文章块、侧边栏、脚注。文章块包括3部分：标题部分、正文部分和脚注部分。