這是自己個敲的一個小網站
1.主頁（index.html)
<!DOCTYPE html>
<html>
<head>
<title>我的第一個網站-首頁</title>
<meta charset="GB2312">
<link rel="stylesheet" type="text/css" href="../css/index.css">
<script>
function goToPage(param)
{
document.getElementById("myIframe").src=param;
}
</script>
</head>
<body>
<div class="Dd">
<h1>新華書店</h1>
<p class="p1" id="p1">歡迎進入 <request class="getform" name="id"></request></p>
<a class="a1" href="./login.html">登錄</a>
<a class="a2" href="./register.html">註冊</a>
</div>
<div>
<div class="d1">
<button name="1" onclick="goToPage(‘./1.html‘)">主頁</button>
<button name="2" onclick="goToPage(‘./2.html‘)">熱賣</button>
<button name="3" onclick="goToPage(‘./3.html‘)">新品</button>
<button name="4" onclick="goToPage(‘./4.html‘)">折扣</button>
</div>
<div class="d2">
<div class="d2_1">
<h2 class="h2_1">商品精選</h2>
<div class="d2_1_1"><img class="img2" src="../scr/book1.1.jpg"><p>解憂雜貨鋪</p></div>
<div class="d2_1_2"><img class="img2" src="../scr/book1.2.jpg"><p>哈利波特全集</p></div>
<div class="d2_1_3"><img class="img2" src="../scr/book1.3.png"><p>白夜行</p></div>
<div class="d2_1_4"><img class="img2" src="../scr/book1.4.jpg"><p>秘密</p></div>
</div>
<iframe id="myIframe" class="i1" src="./1.html" style="height: 600px;width:100%"></iframe>
</div>
</div>
<div></div>
<div></div>
</body>
</html>
--------------------------------------分割線--------------------------------------------------------------------------------------
主頁的css文件（index.css）
.t1{
grid-row: 1;
grid-column: 1; } .i1
{
grid-row: 1;
grid-column: 3;
}
th
{
height: 40px;
} td
{
border-style: solid;
border-width: 1px;
border-color: lightgray;
} img
{
width: 90px;
height: 100px;
}
.d1{
background-color: lightgray;
position: relative;
left: 250px;
width: 800px;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: 50px;
}
.d2
{
display: grid;
width: 100%;
height: 1100px;
grid-template-columns: 200px 50px 800px 50px 1fr;
grid-template-rows: 1000px 50px 100px;
}
div.d2_1
{
display: grid;
width: 150px;
height:1000px;
grid-template-columns: 10px 1fr 10px;
grid-template-rows:70px repeat(5,1fr);
border:1px solid lightgray; }
h2
{
grid-column: 2;
grid-row: 1;
}
div.d2_1_1
{
grid-column: 2;
grid-row: 2;
}
div.d2_1_2
{
grid-column: 2;
grid-row: 3;
}
div.d2_1_3
{
grid-column: 2;
grid-row: 4;
}
div.d2_1_4
{
grid-column: 2;
grid-row: 5;
} .a1
{
grid-column:3;
grid-row: 2;
}
.a2
{
grid-column: 4;
grid-row: 2; }
h1
{
text-align: center;
grid-column:2/6;
grid-row: 1;
margin:0px;
}
.Dd
{
display: grid;
grid-template-columns: 500px 100px 60px 60px 100px 400px;
grid-template-rows: 70px 40px;
}
.p1
{
grid-column: 1;
grid-row: 1;
} --------------------------------------分割線-------------------------------------------------------------------------------------- 效果圖
2.註冊登錄頁面（regist.html login.html)
<!DOCTYPE html>
<html>
<head>
<title>註冊</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/regist.css">
<script >
<!--
function myFunction()
{
if(myForm.pwd1.value==""||myForm.pwd1.value.lenght>10)
{
alert("請重新填寫密碼");
}
else if(myForm.pwd1.value!=myForm.pwd2.value)
{
alert("兩次輸入的密碼不一致");
}
else if(myForm.name.value=="")
{
alert("姓名不能為空");
}
else
{
myForm.submit();
}
}
-->
</script>
</head>
<body>
<h1 >歡迎註冊</h1>
<div class="d1">
<form class="f1" action="index.html" method="post" name="myForm"> <table class="t1">
<tr>
<td>email:</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>tel:</td>
<td><input type="tel" name="tel"></td>
</tr>
<tr>
<td>user:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password" name="pwd1"></td>
</tr>
<tr>
<td>確認密碼:</td>
<td><input type="password" name="pwd2"></td>
</tr>
</table> <div class="b">
sex：
<ul>
<li><input type="radio" name="r1" checked="true">male</li>
<li><input type="radio" name="r1">female</li>
</ul>
</div>
<div id="a"><input type="checkbox" name="c2" class="r2">我已同意《cc協議》；</div>
<div class="b">
<input type="reset" name="button" value="reget">
<input type="button" name="button" value="submit" onclick="myFunction()" size="2">
</div>
<div>
<hr>
<p>第三方登陸：</p>
<a href="https://web2.qq.com/"><img src="../scr/qq.png" width="60" height="50"></a>
<a href="https://wx2.qq.com/"><img src="../scr/wc.jpg" width="50" height="50"></a>
<a href="https://weibo.com/"><img src="../scr/wb.jpg" width="50" height="50"></a>
</div>
</form>
</div> <body>
</html> --------------------------------------分割線-------------------------------------------------------------------------------------- <!DOCTYPE html>
<html>
<head>
<title>login</title>
<meta charset="utf-8">
<script>
<!--
function myFunction()
{
if(myForm.id.value=="")
{
alert("賬號不能為空");
}
else if(myForm.pwd.value=="")
{
alert("密碼不能為空");
}
else
{
myForm.submit();
}
}
</script>
</head>
<body>
<form action="index.html" method="post" name="myForm">
<table>
<tr>
<td>賬號</td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr><td><input type="button" value="登錄" onclick="myFunction()"></td><td><input type="reset" name="reset"></td></tr>
</table>
</form> </body>
</html> --------------------------------------分割線-------------------------------------------------------------------------------------- 註冊頁面的修飾文件(regist.css) body
{
display: grid;
grid-template-columns: 1fr 300px 1fr;
grid-template-rows: 100px 1fr;
}
.d1
{
grid-column: 2;
grid-template-rows: 2;
}
h1
{
grid-column: 2;
grid-row: 1;
text-align: center; } --------------------------------------分割線-------------------------------------------------------------------------------------- 效果圖
--------------------------------------分割線-------------------------------------------------------------------------------------- 3.主頁內嵌的iframe窗口 --------------------------------------分割線-------------------------------------------------------------------------------------- 1.html <!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/1.css">
</head>
<body>
<table>
<tr>
<td>
<a href="">
<img src="../scr/book1.jpg">
<p></p>
</a>
</td>
<td>
<a href="">
<img src="../scr/book2.jpg">
<p></p>
</a>
</td>
<td>
<a href="">
<img src="../scr/book3.jpg">
<p></p>
</a>
</td>
</tr>
</table> </body>
</html> --------------------------------------分割線-------------------------------------------------------------------------------------- 2.html <!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/1.css">
</head>
<body>
<table>
<tr>
<td>
<a href="">
<img src="../scr/book2.1.jpg">
<p></p>
</a>
</td>
<td>
<a href="">
<img src="../scr/book2.2.jpg">
<p></p>
</a>
</td>
<td>
<a href="">
<img src="../scr/book2.3.jpg">
<p></p>
</a>
</td>
</tr>
</table> </body>
</html> --------------------------------------分割線-------------------------------------------------------------------------------------- 3，4的原理類似於1，2； --------------------------------------分割線-------------------------------------------------------------------------------------- 效果圖
這是自己個敲的一個小網站