这是自己个敲的一个小网站

这是自己个敲的一个小网站

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;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- 1px;
border-color: lightgray;
}

img
{
90px;
height: 100px;
}
.d1{
     background-color: lightgray;
     position: relative;
     left: 250px;
     800px;
       display: grid;
       grid-template-columns: repeat(4,1fr);
       grid-template-rows: 50px;
}
.d2
{
display: grid;
100%;
height: 1100px;
grid-template-columns: 200px 50px 800px 50px 1fr;
grid-template-rows: 1000px 50px 100px;
}
div.d2_1
{
display: grid;
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 >

</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；

--------------------------------------分割线--------------------------------------------------------------------------------------

效果图
相关阅读:
.netcore 通过文件流形式导出Excel,部分列可写，其它列只读实例
 C# NPOI 锁定单元格设置只读
 C# NPOI导出Excel 表格宽度自适应，支持中文
 MySQL 5.7 开启binary log(logbin)及注意事项
 springboot 添加JWT接口认证
 MySql 按姓名排序
 .netcore3.1 访问静态文件，如图片、Excel等
 Ajax如何设置成同步请求
 项目发布到IIS远程服务器
 在Winform程序中使用Spire.Pdf实现页面添加印章处理（转）
原文地址：https://www.cnblogs.com/iillegal/p/9815749.html