目的:把我们学校的主页网站个性化,为了方便自我,为了学习。
2018年11月28日版本:
最简单的html5文档:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
HTML 标题 段落 链接 图片的语法:段落应该是一行为一个段落吧
<!DOCTYPE HTML>
<html>
<head>
<meta?charset="utf-8">
<title>吾本虚无演示</title>
</head>
<body>
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p><a href="https://blog.csdn.net/qq_42807924">这是一个链接</a><p>
<p><img src="file:///D:/wubenstu/stulip_files/wuben.jpg" width="80" height="50" /><p>
<p><a href="https://blog.csdn.net/qq_42807924"><img src="file:///D:/wubenstu/stulip_files/wuben.jpg" width="80" height="50" /></a><p>
</body>
</html>
浏览器运行结果:
开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。
<a>这是一个无属性的链接</a>
<a href="https://blog.csdn.net/qq_42807924">这是一个链接</a>
<p href="https://blog.csdn.net/qq_42807924">这是一个段落。</p>
超文本链接
这是一个超文本链接
<hr>
分割线
<a>这是一个无属性的链接</a>
<a href="https://blog.csdn.net/qq_42807924">这是一个链接</a>
<p href="https://blog.csdn.net/qq_42807924">这是一个段落。</p>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<!-- 这是一个注释 -->
标题大小与字体大小的关系
1到6号标题与1到6号字体逆序对应,比如1号字体对应6号标题,2号字体对应5号标题。
<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>
<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>
<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>
<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>
<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>
<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>
<p>这个<br>段落<br>演示了分行的效果</p>
这个
段落
演示了分行的效果
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
跳转:
<a id="tips">第一点</a>
<a href="#tips">访问到第一点</a>
HTML 元素
元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
<meta> 标签
- 使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
在 或者 的JavaScript
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 或 部分中,或者同时存在于两个部分中。
通常的做法是把函数放入 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
使用JavaScript写猜数字游戏:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猜数字游戏</title>
</head>
<body>
<h1>欢迎来到猜数字游戏!</h1>
<p>输入1-10的数字</p>
<input id="demo" type="text">
<script>
function randomFrom(lowerValue,upperValue)
{
return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
y=randomFrom(1,10);
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("请输入阿拉伯数字哦");
}
else
{
if(x<y)
{
alert("输入的数字小了");
}
else if(x>y)
{
alert("输入的数字大了");
}
else
{
alert("呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤")
y=randomFrom(1,10);
}
}
}
</script>
<button type="button" onclick="myFunction()">确定</button>
</body>
</html>
猜数字2.0版本:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猜数字游戏</title>
</head>
<body>
<h1>欢迎来到猜数字游戏!</h1>
<p>输入1-10的数字</p>
<input id="demo" type="text">
<script>
function randomFrom(lowerValue,upperValue)
{
return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
y=randomFrom(1,10);//开启网页就产生了随机数
function restart()
{
y=randomFrom(1,10);//肯定要重新产生随机数
alert("游戏重启成功")
document.getElementById("demo").value='';//清空输入框
}
function showout()
{
alert("这就放弃了?弱爆了!数字是:" +y + "呀")//传递变量,合并文本输出
}
function myFunction()//判断
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("请输入阿拉伯数字哦");
}
else
{
if(x<y)
{
alert("输入的数字小了");
}
else if(x>y)
{
alert("输入的数字大了");
}
else
{
alert("呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤")
y=randomFrom(1,10);//猜对了再来呗
}
}
}
</script>
<button type="button" onclick="myFunction()">确定</button><br><br>
<button type="button" onclick="restart()">重启</button> <button type="button" onclick="showout()">放弃</button>
</body>
</html>
可以复制代码到菜鸟教程提供的在线网页测试哟(帮忙打广告吧)
http://www.runoob.com/try/try.php?filename=tryjs_oper_add
显示时间:
<!--@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function getTime() {
var dateObj = new Date();
var year = dateObj.getFullYear();//年
var month = dateObj.getMonth()+1;//月 (注意:月份+1)
var date = dateObj.getDate();//日
var day = dateObj.getDay();
var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var week = weeks[day];//根据day值,获取星期数组中的星期数。
var hours = dateObj.getHours();//小时
var minutes = dateObj.getMinutes();//分钟
var seconds = dateObj.getSeconds();//秒
if(month<10){
month = "0"+month;
}
if(date<10){
date = "0"+date;
}
if(hours<10){
hours = "0"+hours;
}
if(minutes<10){
minutes = "0"+minutes;
}
if(seconds<10){
seconds = "0"+seconds;
}
var newDate = year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds+"   "+week;
document.getElementById("date1").innerHTML = "时间显示:" + newDate;//在div中写入时间
setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
}
</script>
<title>实时显示时间</title>
</head>
<body onload="getTime()">
<div id="date1"></div>
</body>
</html>
加上CSS渲染:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
猜数字游戏3.0:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猜数字游戏</title>
<script>
function getTime() {
var dateObj = new Date();
var year = dateObj.getFullYear();//年
var month = dateObj.getMonth()+1;//月 (注意:月份+1)
var date = dateObj.getDate();//日
var day = dateObj.getDay();
var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var week = weeks[day];//根据day值,获取星期数组中的星期数。
var hours = dateObj.getHours();//小时
var minutes = dateObj.getMinutes();//分钟
var seconds = dateObj.getSeconds();//秒
if(month<10){
month = "0"+month;
}
if(date<10){
date = "0"+date;
}
if(hours<10){
hours = "0"+hours;
}
if(minutes<10){
minutes = "0"+minutes;
}
if(seconds<10){
seconds = "0"+seconds;
}
var newDate = year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds+"   "+week;
document.getElementById("date2").innerHTML = "" + newDate;//在div中写入时间
setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
}</script>
<script>
function randomFrom(lowerValue,upperValue)
{
return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
y=randomFrom(1,10);//开启网页就产生了随机数
function restart()
{
y=randomFrom(1,10);//肯定要重新产生随机数
alert("游戏重启成功")
document.getElementById("demo").value='';//清空输入框
}
function showout()
{
alert("这就放弃了?弱爆了!数字是:" +y + "呀")//传递变量,合并文本输出
}
function myFunction()//判断
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("请输入阿拉伯数字哦");
}
else
{
if(x<y)
{
alert("输入的数字小了");
}
else if(x>y)
{
alert("输入的数字大了");
}
else
{
alert("呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤")
y=randomFrom(1,10);//猜对了再来呗
document.getElementById("demo").value='';//清空输入框
}
}
}
</script>
<style>
body
{
background-image:url('./stulip_files/ironback.jpg');
background-repeat:no-repeat;
background-position:top;
background-attachment:scroll;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
font-family:arial;/*字体*/
text-align:center;
color:#74b49b;
}
div {
background-color: #ffffd2;
width: 250px;
border-left: 14px;
padding: 10px;
margin: 10px;
border-left-style:solid;
border-color:#98bf21
}
button {
background-color: #ffffff;
border:0px solid #add2c9;
width:60px;
font-size:28px;
color:#343434;
}
#rcorners1 {
border-radius: 5px;
background: #add2c9;
padding: 0px;
width:80px;
}
#rcorners2 {
border-radius: 5px;
background: #c56868;
padding: 0px;
width:80px;
}
</style>
<body onload="getTime()"><!--网页打开的时候调用时间 -->
<div id="date2"></div> <!--时间显示 -->
<h1>欢迎来到猜数字游戏!</h1>
<p>输入1-10的数字</p>
<p><input id="demo" type="text">
<button id="rcorners1" type="button" onclick="myFunction()">确定</button></p><br><br>
<p><button id="rcorners1" type="button" onclick="restart()">重启</button> <button id="rcorners2" type="button" onclick="showout()">放弃</button> </p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>aaaaaaaaa</p>
</body>
</html>
运行结果。
猜数字4.0:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猜数字游戏</title>
<script>
function getTime() {
var dateObj = new Date();
var year = dateObj.getFullYear();//年
var month = dateObj.getMonth()+1;//月 (注意:月份+1)
var date = dateObj.getDate();//日
var day = dateObj.getDay();
var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var week = weeks[day];//根据day值,获取星期数组中的星期数。
var hours = dateObj.getHours();//小时
var minutes = dateObj.getMinutes();//分钟
var seconds = dateObj.getSeconds();//秒
if(month<10){
month = "0"+month;
}
if(date<10){
date = "0"+date;
}
if(hours<10){
hours = "0"+hours;
}
if(minutes<10){
minutes = "0"+minutes;
}
if(seconds<10){
seconds = "0"+seconds;
}
var newDate = year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds+"   "+week;
document.getElementById("date2").innerHTML = "" + newDate;//在div中写入时间
setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
}</script>
<script>
function randomFrom(lowerValue,upperValue)
{
return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
y=randomFrom(1,10);//开启网页就产生了随机数
function restart()
{
y=randomFrom(1,10);//肯定要重新产生随机数
alert("游戏重启成功")
document.getElementById("demo").value='';//清空输入框
}
function showout()
{
alert("这就放弃了?弱爆了!数字是:" +y + "呀")//传递变量,合并文本输出
}
function myFunction()//判断
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("请输入阿拉伯数字哦");
}
else
{
if(x<y)
{
alert("输入的数字小了");
}
else if(x>y)
{
alert("输入的数字大了");
}
else
{
alert("呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤")
y=randomFrom(1,10);//猜对了再来呗
document.getElementById("demo").value='';//清空输入框
}
}
}
</script>
<script type="text/jscript">
function airport(c){
c.style.color="#ffffff";
}
function airporthover(c){
c.style.color="#666666";
}
</script>
<style>
body
{
background-image:url('./stulip_files/ironback.jpg');
background-repeat:no-repeat;
background-position:top;
background-attachment:scroll;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
font-family:arial;/*字体*/
text-align:center;
color:#74b49b;
}
div {
background-color: #ffffd2;
width: 250px;
border-left: 14px;
padding: 10px;
margin: 10px;
border-left-style:solid;
border-color:#98bf21
}
button {
background-color: #ffffff;
border:0px solid #add2c9;
width:60px;
font-size:28px;
color:#343434;
}
#rcorners1 {
border-radius: 5px;
background: #add2c9;
padding: 0px;
width:80px;
}
#rcorners2 {
border-radius: 5px;
background: #c56868;
padding: 0px;
width:80px;
hover background:#ffffff;
}
#showspace button:hover{ background:#c56868;}
</style>
<body onload="getTime()"><!--网页打开的时候调用时间 -->
<div id="date2"></div> <!--时间显示 -->
<h1>欢迎来到猜数字游戏!</h1>
<p>输入1-10的数字</p>
<p><input id="demo" type="text">
<button id="rcorners1" type="button" onclick="myFunction()" onmouseover="airport(this)" onmouseout="airporthover(this)">确定</button></p><br><br>
<p><button id="rcorners1" type="button" onclick="restart()" onmouseover="airport(this)" onmouseout="airporthover(this)">重启</button>
<button id="rcorners2" type="button" onclick="showout()" onmouseover="airport(this)" onmouseout="airporthover(this)">放弃</button></p>
</body>
</html>
加入js实现鼠标点击文本框自动选中内容的方法,记录得分。参考:https://www.jb51.net/article/71317.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猜数字游戏</title>
<script>
function getTime() {
var dateObj = new Date();
var year = dateObj.getFullYear();//年
var month = dateObj.getMonth()+1;//月 (注意:月份+1)
var date = dateObj.getDate();//日
var day = dateObj.getDay();
var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var week = weeks[day];//根据day值,获取星期数组中的星期数。
var hours = dateObj.getHours();//小时
var minutes = dateObj.getMinutes();//分钟
var seconds = dateObj.getSeconds();//秒
if(month<10){
month = "0"+month;
}
if(date<10){
date = "0"+date;
}
if(hours<10){
hours = "0"+hours;
}
if(minutes<10){
minutes = "0"+minutes;
}
if(seconds<10){
seconds = "0"+seconds;
}
var newDate = year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds+"   "+week;
document.getElementById("date2").innerHTML = "" + newDate;//在div中写入时间
setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
}</script>
<script>
function randomFrom(lowerValue,upperValue)
{
return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
y=randomFrom(1,10);//开启网页就产生了随机数
cout=1;
function restart()
{
y=randomFrom(1,10);//肯定要重新产生随机数
alert("游戏重启成功")
document.getElementById("demo").value='';//清空输入框
cout=0
document.getElementById("couter").innerHTML="得分:"+cout;
}
function showout()
{
alert("这就放弃了?弱爆了!数字是:" +y + "呀")//传递变量,合并文本输出
cout=0
document.getElementById("couter").innerHTML="得分:"+cout;
}
function myFunction()//判断
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("请输入阿拉伯数字哦");
}
else
{
if(x<y)
{
alert("输入的数字小了");
}
else if(x>y)
{
alert("输入的数字大了");
}
else
{
alert("呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤")
y=randomFrom(1,10);//猜对了再来呗
document.getElementById("demo").value='';//清空输入框
cout=cout+1;
document.getElementById("couter").innerHTML="得分:"+cout;
}
}
}
</script>
<script type="text/jscript">
function airport(c){
c.style.color="#ffffff";
}
function airporthover(c){
c.style.color="#666666";
}
</script>
<script type="text/javascript">
function Myselect_txt(){
if (document.form1.title.focus){
document.form1.title.select();}
}
function Myselect_txtarea(){
if (document.form1.content.focus){
document.form1.content.select();}
}
</script>
<style>
body
{
background-image:url('./stulip_files/ironback.jpg');
background-repeat:no-repeat;
background-position:top;
background-attachment:scroll;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
font-family:arial;/*字体*/
text-align:center;
color:#74b49b;
}
#div1 {
background-color: #ffffd2;
width: 250px;
border-left: 14px;
padding: 10px;
margin: 10px;
border-left-style:solid;
border-color:#98bf21
}
button {
background-color: #ffffff;
border:0px solid #add2c9;
width:60px;
font-size:28px;
color:#343434;
}
#rcorners1 {
border-radius: 5px;
background: #add2c9;
padding: 0px;
width:80px;
}
#rcorners2 {
border-radius: 5px;
background: #c56868;
padding: 0px;
width:80px;
hover background:#ffffff;
}
#showspace button:hover{ background:#c56868;}
</style>
<body onload="getTime()"><!--网页打开的时候调用时间 -->
<ol>
<li id="div1"><div id="date2"></div></li>
<li id="div1"><div id="couter">得分:0</div></li>
</ol>
<h1>欢迎来到猜数字游戏!</h1>
<p>输入1-10的数字</p>
<form name="form1">
<p><input name="title" id="demo" type="text" onClick="Myselect_txt()">
<button id="rcorners1" type="button" onclick="myFunction()" onmouseover="airport(this)" onmouseout="airporthover(this)">确定</button></p><br><br>
<p><button id="rcorners1" type="button" onclick="restart()" onmouseover="airport(this)" onmouseout="airporthover(this)">重启</button>
<button id="rcorners2" type="button" onclick="showout()" onmouseover="airport(this)" onmouseout="airporthover(this)">放弃</button></p>
</form>
</body>
</html>
最后版本5.0,不改了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猜数字游戏</title>
<script>
function getTime() {
var dateObj = new Date();
var year = dateObj.getFullYear();//年
var month = dateObj.getMonth()+1;//月 (注意:月份+1)
var date = dateObj.getDate();//日
var day = dateObj.getDay();
var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var week = weeks[day];//根据day值,获取星期数组中的星期数。
var hours = dateObj.getHours();//小时
var minutes = dateObj.getMinutes();//分钟
var seconds = dateObj.getSeconds();//秒
if(month<10){
month = "0"+month;
}
if(date<10){
date = "0"+date;
}
if(hours<10){
hours = "0"+hours;
}
if(minutes<10){
minutes = "0"+minutes;
}
if(seconds<10){
seconds = "0"+seconds;
}
var newDate = year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds+"   "+week;
document.getElementById("date2").innerHTML = "" + newDate;//在div中写入时间
setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
}</script>
<script>
function randomFrom(lowerValue,upperValue)
{
return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
y=randomFrom(1,10);//开启网页就产生了随机数
cout=1;
times=0
function restart()
{
y=randomFrom(1,10);//肯定要重新产生随机数
alert("游戏重启成功")
document.getElementById("demo").value='';//清空输入框
cout=0
times=0
document.getElementById("couter").innerHTML="得分:"+cout;
}
function showout()
{
alert("这就放弃了?弱爆了!数字是:" +y + "呀")//传递变量,合并文本输出
cout=0;
times=0;
times=0
document.getElementById("couter").innerHTML="得分:"+cout;
}
function myFunction()//判断
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
//alert("请输入阿拉伯数字哦");
document.getElementById("torf").innerHTML="请输入阿拉伯数字哦";
}
else
{
if(x<y)
{
//alert("输入的数字小了");
times=times+1
document.getElementById("torf").innerHTML="输入的数字小了,您输入了"+times+"次";
}
else if(x>y)
{
//alert("输入的数字大了");
times=times+1
document.getElementById("torf").innerHTML="输入的数字大了,您输入了"+times+"次";
}
else
{
//alert("呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤")
y=randomFrom(1,10);//猜对了再来呗
document.getElementById("demo").value='';//清空输入框
cout=cout+1;
times=0
document.getElementById("couter").innerHTML="得分:"+cout;
document.getElementById("torf").innerHTML="呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤";
}
}
}
</script>
<script type="text/jscript">
function airport(c){
c.style.color="#ffffff";
}
function airporthover(c){
c.style.color="#666666";
}
</script>
<script type="text/javascript">
function Myselect_txt(){
if (document.form1.title.focus){
document.form1.title.select();}
}
function Myselect_txtarea(){
if (document.form1.content.focus){
document.form1.content.select();}
}
</script>
<style>
body
{
background-image:url('./stulip_files/ironback.jpg');
background-repeat:no-repeat;
background-position:top;
background-attachment:scroll;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
font-family:arial;/*字体*/
text-align:center;
color:#74b49b;
}
#div1 {
background-color: #ffffd2;
width: 250px;
border-left: 14px;
padding: 10px;
margin: 10px;
border-left-style:solid;
border-color:#98bf21
}
#div2
{
background-color: #ffffd2;
}
button {
background-color: #ffffff;
border:0px solid #add2c9;
width:60px;
font-size:28px;
color:#343434;
}
#rcorners1 {
border-radius: 5px;
background: #add2c9;
padding: 0px;
width:80px;
}
#rcorners2 {
border-radius: 5px;
background: #c56868;
padding: 0px;
width:80px;
hover background:#ffffff;
}
#showspace button:hover{ background:#c56868;}
</style>
<body onload="getTime()"><!--网页打开的时候调用时间 -->
<ol>
<li id="div1"><div id="date2"></div></li>
<li id="div1"><div id="couter">得分:0</div></li>
</ol>
<h1>欢迎来到猜数字游戏!</h1>
<p>输入1-10的数字</p>
<form name="form1">
<p><input name="title" id="demo" type="text" onClick="Myselect_txt()">
<button id="rcorners1" type="button" onclick="myFunction()" onmouseover="airport(this)" onmouseout="airporthover(this)">确定</button></p>
<ol><div id="div2"><p id="torf">加油</p></div></ol>
<p><button id="rcorners1" type="button" onclick="restart()" onmouseover="airport(this)" onmouseout="airporthover(this)">重启</button>
<button id="rcorners2" type="button" onclick="showout()" onmouseover="airport(this)" onmouseout="airporthover(this)">放弃</button></p>
</form>
</body>
</html>