码迷,mamicode.com
首页 > Web开发 > 详细

初学html后,写的周杰伦的介绍页面

时间:2016-10-30 11:40:14      阅读:311      评论:0      收藏:0      [点我收藏+]

标签:cdn   style   风格   idt   icon   3.3   div   static   ast   

  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后,写的周杰伦的介绍页面

标签:cdn   style   风格   idt   icon   3.3   div   static   ast   

原文地址:http://www.cnblogs.com/qwe9527/p/6012565.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!