初学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 <!--    -->
时间: 2024-10-06 10:07:12

初学html后,写的周杰伦的介绍页面的相关文章

使用jqplot创建报表(一) 初学后写的第一个案例源码

一.初学后写的第一个案例源码 效果图: 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="common.jsp"%> <html> <head> <script type="text/javascript" src=&q

初学CSS(写于接触CSS不到1个星期)

什么是web前端? 在第一次上课的时候就问过我们,当时我认为前端就是设计网页,但具体是什么,我也不是很清楚.老师解释道:web前端,就是你打开浏览器之后,所能看到的一切,都是用前端技术实现的.(我以前还认为页面是画出来的,没想到是写出来的,一下就高大上了...) 前端技术的核心有三个:HTML(超文本标记语言,主要用来描述一个网页的结构的).CSS(层叠样式表,用来装饰网页).javascript(网页上的脚本语言,是用来编程的). 我理解CSS就是对于框架元素的全面补充,就好像是修房子,用HT

Java基础-接口.编写2个接口:InterfaceA和InterfaceB;在接口InterfaceA中有个方法void printCapitalLetter();在接口InterfaceB中有个方法void printLowercaseLetter();然 后写一个类Print实现接口InterfaceA和InterfaceB,要求 方法 实现输出大写英文字母表的功能,printLowerca

#34.编写2个接口:InterfaceA和InterfaceB:在接口InterfaceA中有个方法void printCapitalLetter():在接口InterfaceB中有个方法void printLowercaseLetter():然 后写一个类Print实现接口InterfaceA和InterfaceB,要求      方法 实现输出大写英文字母表的功能,printLowercaseLetter()方法实现输出小写英文 字母表的功能.再写一个主类E,在主类E的main方法中创建P

补:小玩文件2--将文本文件中的所有行加上行号后写到新文件中

输入代码: /* *Copyright (c)2015,烟台大学计算机与控制工程学院 *All rights reserved. *文件名称:sum123.cpp *作 者:林海云 *完成日期:2015年8月18日 *版 本 号:v2.0 *问题描述:将文本文件abc.txt中的所有行加上行号后写到newabc.txt文件中. *程序输入:文件读取. *程序输出:将文本文件中的所有行加上行号后写到新文件中. */ #include <iostream> #include <cstdlib

优秀网站看前端 —— 小米Note介绍页面

刚开始经营博客的时候,我写过不少“扒皮”系列的文章,主要介绍一些知名站点上有趣的交互效果,然后试着实现它们.后来开始把注意力挪到一些新颖的前端技术上,“扒皮”系列便因此封笔多时.今天打算重开“扒皮”的坑,不过咱挂个优雅点的名字——“优秀网站看前端”,顾名思义的,也是寻觅一些值得玩味的趣味网站,来学习它们的前端技术和交互理念. 作为本系列的开篇,我们拿“买手机送国土”的小米来打头阵,缘由是鄙人有着更换手机的打算又刚好看上小米note高配版,于是逛了下小米note的介绍页面,感觉交互做的挺不错,特别

最老程序员开发实训10--Android---应用介绍页面实现2

下面我们来看一页一页滑动的介绍页面如何实现. 首先在WkyLib工程中定义应用介绍基类WkyAppTourActivity,在本类中,我们用ViewPager来实现介绍页面一页一页滑动的功能.该Activity的布局文件如下所示: <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/and

最老程序员开发实训9--Android---应用介绍页面实现1

在这一节中,我们回到Android端,讨论一下当应用第一次运行时,通常采用的一页一页滑动的介绍页面的实现方式. 首先,我们需要知道应用是否是第一次运行.判断应用是否是第一次运行,通常是应用持久化保存一个特定的信息,每次启动时检查是否有该信息,如果没有则代表第一次运行.对于信息的持久化存储,在Android平台,大约有三种方法,分别是SharedPreferences.文件.SQLite数据库,通常类似应用是否第一次运行这种小信息,一般会选择保存在SharedPreferences中. 我们首先在

NFine平台去掉平台介绍页面出现的一系列问题

1.去掉平台介绍页面要做的操作:数值Index页面的下面两处内容 2.注释掉以上两处内容后出现的问题:•当打开多个页面后,最先打开的第一个页面(如下图1的位置)点击×号不能关闭页面:•当打开多个页面后点击全部关闭(如下图2的位置),虽然标题全部关闭了,但是却留下了下图4的位置的内容:•刚启动项目后,未打开任何页面,若点击右侧刷新当前,则平台一直处于刷新状态: 3.以上三点内容目前只解决了前2项:修改了项目中js文件夹下的indextab.js文件中的两处内容(修改js文件后重新启动需要清空一下浏

如何写一个发微博的页面(包括插入图片,插入表情,插入话题,插入Location) (一)

先上效果图: 先看页面布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"