RshStone/basic API Practice.html

## basic API Practice.html
<html>
  <head>
    <title>其少卿</title>
    <style>
      h1{background-color:yellow}
      h1{text-align:center}
      h2{text-align:center}
    </style>
  </head>
    <h1>随便写些什么</h1>
    <div class = "subtitle">
      <h2><a href = https://book.douban.com>好书推荐</a></h2></div>
  <div class = "books">
      <p>
        <ol>
          <li><a href = http://www.icourse163.org/course/ZJU-93001><b><em>数据结构与算法</em></b></a></li>
        <li><a href = https://book.douban.com/subject/6424904/><em><b>大话数据结构</b></em></a></li>
    <li><a href = https://book.douban.com/subject/3146174/><b><em>Java 核心技术</em></b></a>
  <ul>
    <li>卷1基础知识</li>
    <li>卷2能力提升</li>
    </ul>
</div>
<div class = "table1">
<table>
  <tr>
    <th>数据结构</th>
    <th>基础语言</th>
    <th>休闲读物</th>
  </tr>
  <tr>
    <td>陈越数据结构与算法</td>
    <td>C++ Premier</td>
    <td>活着</td>
  </tr>
</table>
  </div>
  <div id = "line">
  </li>
        <img src = "https://www.google.com.hk/url?sa=i&url=https%3A%2F%2Fblog.csdn.net%2Fweixin_40876133%2Farticle%2Fdetails%2F82707617&psig=AOvVaw0MZc5oGEwrRQqkSk9mdiOO&ust=1596248767509000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCPDPm5m49uoCFQAAAAAdAAAAABAD">
        </ol>
        <em>这是一条</em><b>华丽的分割线</b>
      </p>
</div>
<div class = "interests">
      <table>
        <tr>
          <th>兴趣</th>
          <th>独处</th>
          <th>现实</th>
        </tr>
        <tr>
          <th>看片？</th>
          <th>吃吃吃！</th>
          <th>读书</th>
          <th>运动</th>
        </tr>
      </table>
    </div>
  <body>
    <div id = "Java">
      <h2><em>Head Java First</em></h2>
    </div>
    <div id = "d1">
      Hello,World!
    </div>
    <div  id = "d2">
      Hello,Justin!
    </div>
    <p>
      <input type = "button" value = "change color" onclick = "changecolor()">
      <input type = "button" value = "change text" onclick = "changetext()">
    </p>
  </body>
</html>

## onxvpzo.markdown

      
    Raw
  

              onxvpzo.markdown
            
          
    oNxvPZo

A Pen by Justin Shi on CodePen.
License.

  
## script.js
function dochange(){
  alert('clicked button');
}
function changecolor(){
  var dd1 = document.getElementById("d1");
  var dd2 = document.getElementById("d2");
  dd1.className = "greenback";
  dd2.className = "yellowback"
}
function changetext(){
  var dd1 =
document.getElementById("d1");
  var dd2 = document.getElementById("d2");
  dd1.innerHTML = "Sunshine";
  dd2.innerHTML = "Flowers";
}

## style.css
.subtitle{
  font-size:14pt;
  font-family: Arial, Helvetica, sans-serif;
  font-color:orange;
  font-style: italic;
  font-weight: bold;
}
body{
  background-color:#B3D6F9;
}
.books{
  text-align:left;
  font-size:15pt;
  height:130px;
  border-style:solid;
  border-color:green;
  border-width:2px;
  padding:4px;
}
.greenback{
  background-color:green;
}
.yellowback{
  background-color:yellow;
}
	<html>
	<head>
	<title>其少卿</title>
	<style>
	h1{background-color:yellow}
	h1{text-align:center}
	h2{text-align:center}
	</style>
	</head>
	<h1>随便写些什么</h1>
	<div class = "subtitle">
	<h2><a href = https://book.douban.com>好书推荐</a></h2></div>
	<div class = "books">
	<p>
	<ol>
	<li><a href = http://www.icourse163.org/course/ZJU-93001><b><em>数据结构与算法</em></b></a></li>
	<li><a href = https://book.douban.com/subject/6424904/><em><b>大话数据结构</b></em></a></li>
	<li><a href = https://book.douban.com/subject/3146174/><b><em>Java 核心技术</em></b></a>
	<ul>
	<li>卷1基础知识</li>
	<li>卷2能力提升</li>
	</ul>
	</div>
	<div class = "table1">
	<table>
	<tr>
	<th>数据结构</th>
	<th>基础语言</th>
	<th>休闲读物</th>
	</tr>
	<tr>
	<td>陈越数据结构与算法</td>
	<td>C++ Premier</td>
	<td>活着</td>
	</tr>
	</table>
	</div>
	<div id = "line">
	</li>
	<img src = "https://www.google.com.hk/url?sa=i&url=https%3A%2F%2Fblog.csdn.net%2Fweixin_40876133%2Farticle%2Fdetails%2F82707617&psig=AOvVaw0MZc5oGEwrRQqkSk9mdiOO&ust=1596248767509000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCPDPm5m49uoCFQAAAAAdAAAAABAD">
	</ol>
	<em>这是一条</em><b>华丽的分割线</b>
	</p>
	</div>
	<div class = "interests">
	<table>
	<tr>
	<th>兴趣</th>
	<th>独处</th>
	<th>现实</th>
	</tr>
	<tr>
	<th>看片？</th>
	<th>吃吃吃！</th>
	<th>读书</th>
	<th>运动</th>
	</tr>
	</table>
	</div>
	<body>
	<div id = "Java">
	<h2><em>Head Java First</em></h2>
	</div>
	<div id = "d1">
	Hello,World!
	</div>
	<div id = "d2">
	Hello,Justin!
	</div>
	<p>
	<input type = "button" value = "change color" onclick = "changecolor()">
	<input type = "button" value = "change text" onclick = "changetext()">
	</p>
	</body>
	</html>
	function dochange(){
	alert('clicked button');
	}
	function changecolor(){
	var dd1 = document.getElementById("d1");
	var dd2 = document.getElementById("d2");
	dd1.className = "greenback";
	dd2.className = "yellowback"
	}
	function changetext(){
	var dd1 =
	document.getElementById("d1");
	var dd2 = document.getElementById("d2");
	dd1.innerHTML = "Sunshine";
	dd2.innerHTML = "Flowers";
	}
	.subtitle{
	font-size:14pt;
	font-family: Arial, Helvetica, sans-serif;
	font-color:orange;
	font-style: italic;
	font-weight: bold;
	}
	body{
	background-color:#B3D6F9;
	}
	.books{
	text-align:left;
	font-size:15pt;
	height:130px;
	border-style:solid;
	border-color:green;
	border-width:2px;
	padding:4px;
	}
	.greenback{
	background-color:green;
	}
	.yellowback{
	background-color:yellow;
	}