HTML+JavaScript+CSS做一個介面
下面是一個web介面主要是前端沒有後端功能：關於JavaScript幾種比較常見的樣式
Javaweb(1),html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
進入頁面載入的方法
*/
window.onload=function()
{
var date=new Date(),time=date.getTime();
setInterval(function() {set(time);time = Number(time);time += 1000;},1000);
setTodayDate(date);
}
/*
設定日期的方法，針對年月日星期的顯示
*/
function setTodayDate(today)
{
var years,months,dates,weeks, intYears,intMonths,intDates,intWeeks,today,timeString;
intYears = today.getFullYear();//獲得年
intMonths = today.getMonth() + 1;//獲得月份+1
intDates = today.getDate();//獲得天數
intWeeks = today.getDay();//獲得星期
years = intYears + '年 ';
if(intMonths < 10){
months = '0' + intMonths + '月';
}else{
months = intMonths + '月';
}
if(intDates < 10){
dates = '0' + intDates + '日 ';
}else{
dates = intDates + '日 ';
}
var weekArray = new Array(7);
weekArray[0] = '星期日';
weekArray[1] = '星期一';
weekArray[2] = '星期二';
weekArray[3] = '星期三';
weekArray[4] = '星期四';
weekArray[5] = '星期五';
weekArray[6] = '星期六';
weeks =weekArray[intWeeks] + ' ';
timeString = years + months + dates + weeks;
document.getElementById('time').innerHTML=timeString;
}
/*
設定北京時間的方法，針對時分秒的顯示
*/
function set(time)
{
var beijingTimeZone = 8;
var timeOffset = ((-1 * (new Date()).getTimezoneOffset()) - (beijingTimeZone * 60)) * 60000;
var now = new Date(time - timeOffset);
document.getElementById('bjtime').innerHTML = p(now.getHours())+':'+p(now.getMinutes())+':'+p(now.getSeconds());
}
/*
格式化時間的顯示方式
*/
function p(s)
{
return s < 10 ? '0' + s : s;
}
</script>
<style type="text/css">
#main-top{
width: 100%;
height: 150px;
}
#main-right{
width: 30%;
height: 950px;
float: left;
text-align: center;
/* background-color: aquamarine; */
}
#main-middle
{
float:left;
width: 70%;
height: 950px;
/* background-color: antiquewhite; */
}
#main-footer
{
width: 100%;
clear:both;/*清除左右浮動*/
margin-top:20px;
position:relative;/*避免底部留白*/
height: auto;
}
body
{
background-image: url(back.png);
}
#topnav{
width: 100%;
overflow: hidden;
background-color: white;
border: 1px solid black;
border-radius: 10px;
opacity: 0.4;
text-align: center;
}
#footer{
width: 100%;
overflow: hidden;
border-radius: 10px;
text-align: center;
}
a{
font-size: 40px;
color: black;
text-decoration: none;
}
.afooter
{
font-size: 30px;
color:teal ;
font-weight: bold;
text-decoration: none;
}
h1{
font-size: 60px;
text-align: center;
}
ul{
background-color: white;
padding-left: 70px;
opacity: 0.4;
text-align: left;
font-size:40px ;
text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);
list-style-type: none;
border: 1px solid white;
border-radius: 10px;
}
.a-left{
font-size: 35px ;
}
#photo{
height: 50px;
width: 50px;
}
#photo1{
height: 300px;
width: 300px;
opacity: 0.9;
border-radius: 20px;
}
.li-k{
font-size: 30px;
text-align: center;
}
.left-ul
{
background-color: white;
padding-left: 70px;
opacity: 0.4;
font-size:40px ;
width: auto;
text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);
list-style-type: none;
border: 1px solid white;
border-radius: 10px;
}
.left-ul1
{
background-color: white;
padding-left: 70px;
opacity: 0.4;
font-size:30px ;
width: auto;
text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);
list-style-type: none;
border: 1px solid white;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="main-top">
<h1>個人簡歷</h1>
<div id="topnav">
<a href="javawebWork(1.1).html"target="mainframe"> 個人資訊 </a>
<a href="https://www.cnblogs.com/jyt604743080/p/15536266.html"> 獲得獎勵 </a>
<a href=""> 聯絡 </a>
<a href="javawebWork(1.2).html" target="mainframe"> 學習經歷 </a>
</div>
</div>
<div id="main-middle">
<iframe name="mainframe" src="javawebWork(1.1).html"frameborder="0"width="1500"height="920" ></iframe>
</div>
<div id="main-right">
<br>
<br>
<br>
<a style="color: white;opacity: 0.5;"id="time"></a><a style="color: white;opacity: 0.5;"id="bjtime"></a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1 style="color: aliceblue; opacity: 0.5;">
記得留言那:
</h1>
<div>
<textarea style="opacity: 0.4;"name="" id="" cols="70" rows="20"></textarea>
</div>
</div>
<div id="main-footer">
<div id="footer">
<a href="#"class="afooter">石家莊鐵道大學 資訊科學與技術學院 622宿舍著emm</a>
</div>
</div>
</body>
</html>
Javweb(1.1).html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Show Time Page</title>
</head>
<body>
<div id="tabDiv" style="width: 1000px">
<div id="tabContent1" style="display: block">
<table style="margin-top:100px;margin-left:200px;border-width: 0; width: 100%;font-size: 30px;color:antiquewhite;">
<tr>
<td rowspan="3" style="width: 400px; text-align: center"><img alt="我在這呢別急" src="11.jpg" style="width: 300px;opacity:0.9" /></td>
<td colspan="3" rowspan="3">
<table border="1" style="border-left-color:aqua; border-bottom-color: aqua; width: 850px; border-top-style: solid; border-top-color: aqua; border-right-style: solid; border-left-style: solid; height: 380px; border-right-color: aqua; border-bottom-style: solid">
<tr>
<td style="width: 50%">姓名：江銀濤</td>
<td style="width: 50%">生日：2002.09.21</td>
</tr>
<tr>
<td style="width: 50%">國籍：中華人民共和國</td>
<td style="width: 50%">出生地：山東省菏澤市</td>
</tr>
<tr>
<td style="width: 50%; height: 29px">身高：183cm</td>
<td style="width: 50%; height: 29px">體重：85kg</td>
</tr>
<tr>
<td style="width: 50%">血型：B</td>
<td style="width: 50%">星座：處女座</td>
</tr>
<tr>
<td colspan="2">
<p>江銀濤於2002年9月21日出生於山東省菏澤市單縣人民醫院，2014年畢業天於孝義市第九中學，2017年畢業於孝義市第二中學，2020年進入了石家莊鐵道大學，正式步入了自己的大學生涯。</p>
<p>由於自小身體狀態不好在小學時期報名了跆拳道這一專案。訓練時間長達4年，並在之中參加多次市級省級比賽並取得不錯的成績。</p>
<p>對於軍旅生涯非常期望的，對於每一次軍訓都是十分的刻苦認真。長空礪劍灑熱血，萬里雲天祭忠魂。</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</div>
</div>
</body>
</html>
javawebwork（1.3）.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Show Time Page</title>
</head>
<body>
<div id="tabDiv" style="width: 1000px;margin-top: 100px;margin-right: 100px;">
<div id="tabContent1" style="display: block">
<table border="1" style="border-left-color:aqua; border-bottom-color: aqua; width:1300px; border-top-style: solid; border-top-color: aqua; border-right-style: solid; border-left-style: solid; height: 700 px; border-right-color: aqua; border-bottom-style: solid;color: aqua;">
<tr> <td><p>以下內容純屬瞎造：</p>
<p>1、布克獎</p>
<p> 布克獎是英國最重要的文學獎項，享有很高的聲譽。這一獎項每年頒發給在過去12個月中出版傑出小說的作者。</p>
<p>2、柯恩獎</p>
該獎項成立於1993年，由約翰·S·科恩基金會和英國藝術委員會共同頒發。這個獎項只授予英國文學，是一個非常著名的獎項。</br>
3、普利策獎</br>
普利策獎設立於1917年，由哥倫比亞大學頒發。該獎項每年在美國頒發，以表彰在寫作、新聞和音樂方面的成就， 它們以出版商約瑟夫·普利策的名字命名。
</br>
4、Ashok Chakra</br>
它是和平時期的軍事裝飾，用來獎勵勇敢、勇敢或自我犧牲的行為。這是印度和平時期頒發給士兵、陸軍、空軍、 陸軍、海軍和許多其他合法部隊的最高獎項之一。
</br>
5、國際筆會獎
</br>
國際筆會獎於1921年在倫敦成立，由非政府組織國際筆會頒發，這個獎是世界上最古老的國際文學組織的榮譽，國 際筆會有不同型別的獎項。
</br>
6、金棕櫚獎
</br>
金棕櫚獎成立於1955年，旨在表彰電影導演。很多頒獎典禮都是為電影明星舉辦的，但導演卻不多，所以這是一個非常有聲望的獎項。
</br>
7、拉蒙·麥格塞塞獎
</br>
拉蒙·麥格塞塞獎成立於1957年，由菲律賓頒發給已故總統拉蒙·麥格塞塞。這個獎項是授予在文學、公共服務、創意 藝術、社群領導。
</br>
8、奧斯卡金像獎
</br>
奧斯卡金像獎是在1929年設立的，由電影學院和藝術與科學學院共同頒發。這是一個世界知名的電影獎項，旨在鼓勵優秀電影的創作與發展。
</br>
9、卡林加獎
</br>
卡林加獎於1951年創立，該獎項由印度政府教科文組織頒發，以表彰科學的傳播和普及。聯合國教科文組織在每年 的世界科學日上頒發這一獎項。
</br>
10、諾貝爾獎
</br>
諾貝爾獎於1901年設立，以科學家、瑞典工程師阿爾弗雷德·諾貝爾命名，諾貝爾獎是一項偉大的成就，也是在醫藥、和平、科學和經濟領域上最令人尊敬和最有聲望的獎項。
</td></tr> </table>
</div>
</div> </body>
</html>