上传新文件

3c9d9ed1 · Lovesick Sophia · 46adb3cc · 3c9d9ed1
隐藏空白更改
内联并排

Showing with 124 addition and 0 deletion

index.html index.html +124 -0

未找到文件。
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>star's test page</title>
+		<link rel="shortcut icon" href="image/1favicon.ico" type="image/x-icon"/>
+        <link rel="stylesheet" href="css/index.css" type="text/css">
+	    <script src="js/test.js" type="text/javascript"/></script>
+	    <style type="text/css">
+	.flexbox{
+		display: flex;
+        background-color;
+		height:auto;
+		width: auto;
+		padding:5px;
+		background-color: gold;
+	}
+	#flexcontent{
+	width:60%;
+    margin:5px;
+	height:100%;
+	font-size: 13px;
+	column-count:2;
+	column-gap: 10px;
+	column-rule: 2px dotted azure;
+	font-family:微软雅黑;
+	letter-spacing:1px;
+	border-radius: 10px;
+	padding:10px;
+	line-height:25px;
+	background-color: #FF99CC;
+	}
+	#flexcontent p{
+		text-indent: 20px;
+		margin: 10px;
+	}
+	#flexleft{
+		margin:5px;
+		width: 250px;
+		height:800px;
+		background-color:lightblue;
+		border-radius: 10px;
+		padding: 10px;
+	}
+	#flexleft ul,li{
+		list-style-type:;
+		text-decoration:none;
+	}
+	#flexright{
+		line-height:30px;
+		margin: 5px;
+		width: 300px;
+		height：800px;
+		background-color: cornflowerblue;
+		border-radius: 10px;
+		padding: 10px;
+		/* align-items:stretch;	 */
+	}
+	</style>
+	</head>
+	<body>
+		<div class="banner">
+		<ol>
+		<li><a name="intro" href="">POP简介</a></li>
+		<li><a name="blackpink" href="">Who are Blackpink</a></li>
+		<li><a name="liveshows" href="" > live shows here</a></li>
+		<li><a name="practise" href=""> Practise Room</a></li>
+		<li> ☆☆☆blackpink☆☆☆★☺</li><li> ☆☆☆blackpink☆☆☆★☺</li><li>☆☆☆ <!-- blackpink -->☆☆☆&nbsp;&nbsp;&nbsp;<!--☆☆☆★☺</li><li> ☆☆☆blackpink☆☆☆</li> <li> blackpink</li><li> blackpink</li><li> blackpink</li> -->
+		</ol>
+		</div>
+		
+		<!-- Node.js 学习教程： https://www.jq22.com/jquery-info122 -->
+		<!-- rgba 代表：
+		  r = red 红色
+		  g = green 绿色
+		  b = blue 蓝色
+		  a = alpha 透明度
+		  RGB 值可以在 0 到 255 之间。
+		  alpha 值可以在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。
+		  这意味着你可以使用rgba()做出一些很漂亮的半透明效果。 -->
+		  
+		  <div class="flexbox" type="flexbox">
+		<div id="flexleft">
+			<b style="display: inline;">弹性盒布局-Left part</b><br>
+		              <strong> 歌曲排行版：</strong>
+					  <audio src="" controls="controls" onplay="ActiveXObject()">
+					  </audio>
+					       <ul>
+							 <li><a href="">Kill this love</a></li>
+							 <li><a href="">Playing with fire</a></li>
+							 <li><a href="">How you like that</a></li>
+							 <li><a href="">Du-du Du-du</a></li>
+							 <li><a href="">Lovesick girl</a></li>
+							 </ul>
+		<img align="center" src="image/four.jpg" height="240px" width="240px" style="border-radius: 10%;" >
+		</div>
+			  <div id="flexcontent" >
+				  <h4 align="center;">This is BLACKPINK area</h4>
+			  <p><b>主题idea——中间部分为导航和新闻，分2栏显示；</b><br>&nbsp;&nbsp;BLACKPINK（블랙핑크）是YG Entertainment于2016年8月8日推出的韩国女子演唱组合，由金智秀（JISOO）、金珍妮（JENNIE）、朴彩英（ROSÉ）、LISA四名成员组成。组合名“BLACKPINK”在看起来很美的粉色中稍微加入了否定的意义，旨在传达出“不要只看漂亮的部分”、“看到的并不是全部”的意思。</p>
+			  <p> 让我们来走进她们四个super girl_BLACKPINK <br>
+			  <!-- <br><br>&nbsp;&nbsp;&nbsp;&nbsp; -->
+			  </p>		  
+			  <p>第一位：金智秀（JISOO）♠: bp的门面，一位有着演员脸的偶像，音色清冷，有着人间四月的美称。</p>      
+			  <p>第二位：金智妮（JENNIE）♡: 是组合里的ACE，又称人间香奈儿。Rap很强，长得有点像小野猫，性感又小狂野，但私下是一个很软萌的妹子。</p>		     <p>第三位：朴彩英（ROSE)♣ :澳洲玫瑰，是队里的主唱，啊~人间密嗓，声音超级好听，颜值get。蚂蚁腰get。大长腿get。</p>
+			  <p>第四位：LISA（五哥: 队里的主舞啊，大长腿真的超级养眼，声音让我超有感觉！</p>
+			  <img class="4flower" style="height:100px;" src="image/1.jpg">★<img class="4flower" style="height:100px;display: inline-flex;" src="image/2.jpg">♡<br><img class="4flower" style="height:100px;" src="image/3.jpg">♣<img class="4flower" style="height:100px;display: inline-flex;"src="image/4.jpg">♦<br>//滚动轮播<script type="text/javascript">  </script>
+			  
+			  </div>
+			  <div id="flexright">右侧为媒体轮播区<br><4-5张图滚动循环播放>
+			  <dl>
+  <dt>项目 1</dt>
+    <dd>描述项目 1</dd>
+  <dt>项目 2</dt>
+    <dd>描述项目 2</dd>
+</dl>
+<object> 元素所有主流浏览器都支持 <object> 标签
+<object> 元素定义了在 HTML 文档中嵌入的对象
+该标签用于插入对象，例如在网页中嵌入 Java 小程序, PDF 阅读器,Flash 播放器
+<object width="100px" height="50px" ="img/bpk.gif">这是默认内容</object>
+<button type="button">点我!</button>
+			  </div>
+		  </div>
+	</body>
+</html>