首页 > 代码库 > 初学html后，写的周杰伦的介绍页面
初学html后，写的周杰伦的介绍页面
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 7 <style>
1 .mybody{background-color: #DCD9D9} 2 .main{background-color: #fff;width: 70%;margin: 0 auto;} 3 .imgdiv{width:70%;margin: 0 auto;} 4 .imgwid{width: 100%;} 5 p{text-indent: 2em;font-family: "微软雅黑";font-size:15px;} 6 .textcenter{text-align: center;text-indent: 0;}
</style> 8 <script src="Jay_zhou.js"></script> 9 </head> 10 <body class="mybody"> 11 <div class="imgdiv"> 12 <img class="img-responsive imgwid" src="http://chuantu.biz/t5/39/1477742168x3340469602.jpg" alt="周杰伦"><!-- 图片响应式--> 13 </div> 14 <div class="container main"> 15 16 <div class="row"> 17 <div class="col-xs-8"> 18 <a href="http://baike.baidu.com/item/%E5%91%A8%E6%9D%B0%E4%BC%A6"><h1><span class="glyphicon glyphicon-user"></span>周杰伦</h1></a> 19 <p>周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，o型，身高175cm，中国台湾流行乐男歌手、音乐人、演员、导演、编剧、监制、商人。</p> 20 <p>2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 。2002年举行“The One”世界巡回演唱会。2003年成为美国《时代周刊》封面人物。2004年获得世界音乐大奖中国区最畅销艺人奖 。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖。</p> 21 <p>2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖 。2009年入选美国CNN评出的“25位亚洲最具影响力的人物”；同年凭借专辑《魔杰座》获得第20届金曲奖最佳国语男歌手奖。2010年入选美国《Fast Company》评出的“全球百大创意人物”。2011年凭借专辑《跨时代》再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》。2012年登福布斯中国名人榜榜首 .2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》.2016年推出专辑《周杰伦的床边故事》。</p> 22 <p>演艺事业外，他还涉足商业、设计等领域。2007年成立杰威尔有限公司。2011年担任华硕笔电设计师并入股香港文化传信集团。</p> 23 <p>周杰伦热心公益慈善，多次向中国内地灾区捐款捐物。2008年捐款援建希望小学。2014年担任中国禁毒宣传形象大使</p> 24 </div> 25 <div class="col-xs-4"> 26 <img class="img-responsive" src="http://chuantu.biz/t5/39/1477742214x3340469602.jpg"> 27 </div> 28 </div> 29 <div> 30 <h3><span class="label label-primary">个人专辑</span></h3> 31 <div class="row"> 32 <div class="col-xs-2"> 33 <div class="thumbnail"> 34 <img src="http://chuantu.biz/t5/39/1477742247x3340469602.jpg" alt="2016"> 35 </div> 36 <div class="caption"> 37 <h4 class="textcenter"><strong>周杰伦的床边故事</strong></h4> 38 <p class="textcenter">2016</p> 39 </div> 40 </div> 41 <div class="col-xs-2"> 42 <div class="thumbnail"> 43 <img src="http://chuantu.biz/t5/39/1477742272x3340469602.jpg" alt="2014"> 44 </div> 45 <div class="caption"> 46 <h4 class="textcenter"><strong>哎哟,不错哦</strong></h4> 47 <p class="textcenter">2014</p> 48 </div> 49 </div> 50 <div class="col-xs-2"> 51 <div class="thumbnail"> 52 <img src="http://chuantu.biz/t5/39/1477742318x3340469602.jpg" alt="2013"> 53 </div> 54 <div class="caption"> 55 <h4 class="textcenter"><strong>天台电影原声带</strong></h4> 56 <p class="textcenter">2013</p> 57 </div> 58 </div> 59 <div class="col-xs-2"> 60 <div class="thumbnail"> 61 <img src="http://chuantu.biz/t5/39/1477742396x3340469602.jpg" alt="2012"> 62 </div> 63 <div class="caption"> 64 <h4 class="textcenter"><strong>十二新作</strong></h4> 65 <p class="textcenter">2012</p> 66 </div> 67 </div> 68 <div class="col-xs-2"> 69 <div class="thumbnail"> 70 <img src="http://chuantu.biz/t5/39/1477742420x3340469602.jpg" alt="2011-2"> 71 </div> 72 <div class="caption"> 73 <h4 class="textcenter"><strong>惊叹号！</strong></h4> 74 <p class="textcenter">2011</p> 75 </div> 76 </div> 77 <div class="col-xs-2"> 78 <div class="thumbnail"> 79 <img src="http://chuantu.biz/t5/39/1477742448x3340469602.jpg" alt="2011-1"> 80 </div> 81 <div class="caption"> 82 <h4 class="textcenter"><strong>超时代演唱会Live</strong></h4> 83 <p class="textcenter">2011</p> 84 </div> 85 </div> 86 </div> 87 88 <div class="row"> 89 <div class="col-xs-2"> 90 <div class="thumbnail"> 91 <img src="http://chuantu.biz/t5/39/1477742472x3340469602.jpg" alt="2010"> 92 </div> 93 <div class="caption"> 94 <h4 class="textcenter"><strong>跨时代</strong></h4> 95 <p class="textcenter">2010</p> 96 </div> 97 </div> 98 <div class="col-xs-2"> 99 <div class="thumbnail"> 100 <img src="http://chuantu.biz/t5/39/1477742529x3340469602.jpg" alt="2008-1"> 101 </div> 102 <div class="caption"> 103 <h4 class="textcenter"><strong>摩杰座</strong></h4> 104 <p class="textcenter">2008</p> 105 </div> 106 </div> 107 <div class="col-xs-2"> 108 <div class="thumbnail"> 109 <img src="http://chuantu.biz/t5/39/1477742560x3340469602.jpg" alt="2008-2"> 110 </div> 111 <div class="caption"> 112 <h4 class="textcenter"><strong>2007世界巡回演唱</strong></h4> 113 <p class="textcenter">2007</p> 114 </div> 115 </div> 116 <div class="col-xs-2"> 117 <div class="thumbnail"> 118 <img src="http://chuantu.biz/t5/39/1477742589x3340469602.jpg" alt="2007-1"> 119 </div> 120 <div class="caption"> 121 <h4 class="textcenter"><strong>我很忙</strong></h4> 122 <p class="textcenter">2007</p> 123 </div> 124 </div> 125 <div class="col-xs-2"> 126 <div class="thumbnail"> 127 <img src="http://chuantu.biz/t5/39/1477742608x3340469602.jpg" alt="2007-2"> 128 </div> 129 <div class="caption"> 130 <h4 class="textcenter"><strong>不能说的秘密</strong></h4> 131 <p class="textcenter">2007</p> 132 </div> 133 </div> 134 <div class="col-xs-2"> 135 <div class="thumbnail"> 136 <img src="http://chuantu.biz/t5/39/1477742639x3340469602.jpg" alt="2006-1"> 137 </div> 138 <div class="caption"> 139 <h4 class="textcenter"><strong>黄金甲</strong></h4> 140 <p class="textcenter">2006</p> 141 </div> 142 </div> 143 </div> 144 145 <div class="row"> 146 <div class="col-xs-2"> 147 <div class="thumbnail"> 148 <img src="http://chuantu.biz/t5/39/1477742673x3340469602.jpg" alt="2006-2"> 149 </div> 150 <div class="caption"> 151 <h4 class="textcenter"><strong>依然范特西</strong></h4> 152 <p class="textcenter">2006</p> 153 </div> 154 </div> 155 <div class="col-xs-2"> 156 <div class="thumbnail"> 157 <img src="http://chuantu.biz/t5/39/1477742704x3340469602.jpg" alt="2006-3"> 158 </div> 159 <div class="caption"> 160 <h4 class="textcenter"><strong>霍元甲</strong></h4> 161 <p class="textcenter">2006</p> 162 </div> 163 </div> 164 <div class="col-xs-2"> 165 <div class="thumbnail"> 166 <img src="http://chuantu.biz/t5/39/1477742758x3340469602.jpg" alt="2005"> 167 </div> 168 <div class="caption"> 169 <h4 class="textcenter"><strong>十一月的肖邦</strong></h4> 170 <p class="textcenter">2005</p> 171 </div> 172 </div> 173 <div class="col-xs-2"> 174 <div class="thumbnail"> 175 <img src="http://chuantu.biz/t5/39/1477742778x3340469602.jpg" alt="2005-2"> 176 </div> 177 <div class="caption"> 178 <h4 class="textcenter"><strong>无与伦比演唱会Live</strong></h4> 179 <p class="textcenter">2005</p> 180 </div> 181 </div> 182 <div class="col-xs-2"> 183 <div class="thumbnail"> 184 <img src="http://chuantu.biz/t5/39/1477742799x3340469602.jpg" alt="2004"> 185 </div> 186 <div class="caption"> 187 <h4 class="textcenter"><strong>七里香</strong></h4> 188 <p class="textcenter">2004</p> 189 </div> 190 </div> 191 <div class="col-xs-2"> 192 <div class="thumbnail"> 193 <img src="http://chuantu.biz/t5/39/1477742819x3340469602.jpg" alt="2003"> 194 </div> 195 <div class="caption"> 196 <h4 class="textcenter"><strong>寻找周杰伦</strong></h4> 197 <p class="textcenter">2003</p> 198 </div> 199 </div> 200 </div> 201 202 <div class="row"> 203 <div class="col-xs-2"> 204 <div class="thumbnail"> 205 <img src="http://chuantu.biz/t5/39/1477742834x3340469602.jpg" alt="2003"> 206 </div> 207 <div class="caption"> 208 <h4 class="textcenter"><strong>叶惠美</strong></h4> 209 <p class="textcenter">2003</p> 210 </div> 211 </div> 212 <div class="col-xs-2"> 213 <div class="thumbnail"> 214 <img src="http://chuantu.biz/t5/39/1477742855x3340469602.jpg" alt="2002"> 215 </div> 216 <div class="caption"> 217 <h4 class="textcenter"><strong>The one演唱会Live</strong></h4> 218 <p class="textcenter">2002</p> 219 </div> 220 </div> 221 <div class="col-xs-2"> 222 <div class="thumbnail"> 223 <img src="http://chuantu.biz/t5/39/1477742870x3340469602.jpg" alt="2002-1"> 224 </div> 225 <div class="caption"> 226 <h4 class="textcenter"><strong>八度空间</strong></h4> 227 <p class="textcenter">2002</p> 228 </div> 229 </div> 230 <div class="col-xs-2"> 231 <div class="thumbnail"> 232 <img src="http://chuantu.biz/t5/39/1477742886x3340469602.jpg" alt="2001"> 233 </div> 234 <div class="caption"> 235 <h4 class="textcenter"><strong>Fantasy Plus</strong></h4> 236 <p class="textcenter">2001</p> 237 </div> 238 </div> 239 <div class="col-xs-2"> 240 <div class="thumbnail"> 241 <img src="http://chuantu.biz/t5/39/1477742904x3340469602.jpg" alt="2001-1"> 242 </div> 243 <div class="caption"> 244 <h4 class="textcenter"><strong>范特西</strong></h4> 245 <p class="textcenter">2001</p> 246 </div> 247 </div> 248 <div class="col-xs-2"> 249 <div class="thumbnail"> 250 <img src="http://chuantu.biz/t5/39/1477742923x3340469602.jpg" alt="2000"> 251 </div> 252 <div class="caption"> 253 <h4 class="textcenter"><strong>Jay</strong></h4> 254 <p class="textcenter">2000</p> 255 </div> 256 </div> 257 </div> 258 </body> 259 </html> 260 261 262 263 <!-- -->
初学html后，写的周杰伦的介绍页面
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。