实验一 基于CSS+HTML+JS开发简单个人网站

最新推荐文章于 2024-05-22 20:44:17 发布
最新推荐文章于 2024-05-22 20:44:17 发布
阅读量1.1k 收藏 15
点赞数 23
分类专栏： Vue+Spring Boot前后端分离开发实战 文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73502929/article/details/136377559
版权

目录

一、实验目的

二、实验要求

1、个人网站分为四个部分：注册页面，登录界面，主界面，以及分界面。

2、个人简历界面：主要是css3实体样式；同样采用了四个盒子分别介绍四个内容。如图1-2，具体内容自定。

3、我的理想界面：列举我的理想，可以使用无序列表或者表格排列。

4、我的生活界面：主要内容采用展示照片墙或者视频来体现。

5、学习内容界面：采用list-style:none的有序列表。

6、具体操作步骤：

三、实验代码

四、实验结果

五、实验体会

一、实验目的

目的：熟悉在静态网页制作基本流程，熟练应用CSS+HTML+JS。

任务：使用CSS+HTML+JS，开发简易个人网站。

二、实验要求

1、个人网站分为四个部分：注册页面，登录界面，主界面，以及分界面。

1）注册页面需要使用到用户名及密码等信息，用到的标签有表格、文本框、单选按钮、复选按钮、下拉列表框等基本的标签；登录界面需要输入用户名和密码；

2）登陆成功后，可利用javascript判断输入用户名和密码的正确性，输入正确，则利用form标签中action转向主界面，如果输入不正确，可用警告框提醒用户：“输入不正确，再次输入”；

3）主界面类似图1-1，采用四个盒子分别代表个人简历，我的理想，我的生活，学习内容。每个盒子都采用float浮动。

图1-1 主界面

2、个人简历界面：主要是css3实体样式；同样采用了四个盒子分别介绍四个内容。如图1-2，具体内容自定。

图1-2个人简历界面

3、我的理想界面：列举我的理想，可以使用无序列表或者表格排列。

4、我的生活界面：主要内容采用展示照片墙或者视频来体现。

5、学习内容界面：采用list-style:none的有序列表。

6、具体操作步骤：

1）准备网站需要的素材：图片和视频；

2）可利用记事本或者Jbuilder编写各个页面。

3）注意各页面之间的转向或者链接关系

4）打开浏览器，观察各个页面运行结果。

2、实验安排方式：上机编码。

3、实验结果展示，包括代码（可分栏展示）和效果图。

三、实验代码

1、登录页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <style>
    .bjimg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
      object-fit: cover;
      }
 
    #login_box {
      width: 30%;
      height: 300px;
      background-color: #00000060;
      margin: auto;
      margin-top: 10%;
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
    }
 
     body {
                 background:url(".jpg")
	no-repeat;
	background-size: 1300px 750px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
      object-fit: cover;
}
    h2 {
      color: #ffffff90;
      margin-top: 5%;
    }
 
    #input-box {
      margin-top: 5%;
    }
 
    span {
      color: #fff;
    }
 
    input {
      border: 0;
      width: 60%;
      font-size: 15px;
      color: #fff;
      background: transparent;
      border-bottom: 2px solid #fff;
      padding: 5px 10px;
      outline: none;
      margin-top: 10px;
    }
 
    button {
      margin-top: 30px;
      width: 60%;
      height: 30px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #101008, #3f3a3e);
    }
   
    #sign_up {
      margin-top: 45%;
      margin-left: 60%;
    }
 
    a {
      color: #b94648;
    }
  </style>

</head>
<body>
  <div id="login_box">
    <h2>登录</h2>
    <div class="input_box">
      <input type="text" id="username"placeholder="请输入用户名">
    </div>
    <div class="input_box">
      <input type="text"id="password" placeholder="请输入密码">
    </div>
    <div>
      <button type="button" id="Button"value="立即登录" onclick="login()">立即登录</button>
      <br><br>
      <h>没有账号？<a href="注册.html">请注册</a></h>
 
  </div>
 
 
  <from action>
<script type="text/javascript">
    
    //判断登录是否成功
    function login(){
      //获取注册时存储在localStorage中的值
             var username1=localStorage.getItem("username1").value;
             var password1=localStorage.getItem("password1").value;
             var username=document.getElementById("username").value;
             var password=document.getElementById("password").value;
            
        //判断输入的信息和注册的信息是否一致
        if(username!='' && password!=''){
          if (username==''&& password==''){
               window.location.href="我的理想.html";
            }
            if (username=="" && password=="1234"){
               window.location.href="我的主页.html";
            }
            else{
                alert("用户名或密码错误，请重新输入！");
            }
           }
        else{
            alert("用户名或密码不能为空！");
        }
    }
</script>
</div>
</body>
</html>

2、注册页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册</title>
  <style>
    .bjimg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
      object-fit: cover;
      }
 
    #login_box {
      width: 30%;
      height: 300px;
      background-color: #00000080;
      margin: auto;
      margin-top: 10%;
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
    }
    tr{ 
         border: 1px solid beige;
      }
     td{ 
        border: 1px solid aliceblue;
      }
     body{
                 background:url("moon.jpg")
	no-repeat;
	background-size: 1300px 750px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
      object-fit: cover;
}
    h2 {
      color: #ffff;
      margin-top: 5%;
    }
 
    #input-box {
      margin-top: 5%;
    }
 
    span {
      border: 0;
      width: 60%;
      font-size: 15px;
      color:rgb(203, 197, 197);
      background: transparent;
      padding: 10px 3px;
      outline: none;  
      margin-top: 10px;
    }
 
    input {
      border: 0;
      width: 60%;
      font-size: 15px;
      color: #fff;
      background: transparent;
      border-bottom: 2px solid #fff;
      padding: 5px 10px;
      outline: none;
      margin-top: 10px;
    }
 
    button {
      margin-top: 10px;
      width: 60%;
      height: 30px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #4b1919, #3f3a3e);
    }
   
    #sign_up {
      margin-top: 45%;
      margin-left: 60%;
    }
    
    a {
      color: #fff;
    }
  </style>
</head>
<video src=".mp4" class="bjimg" autoplay loop muted></video>
<body>
  <div id="login_box">
   
  <h2>注册</h2>
    <div class="input_box"> 
      <input type="text" id="username1" placeholder="请输入用户名">
     <br>
    <input type="password"id="password1" placeholder="请输入密码"> <br><br>
    </div>
        <span>年级班级：</span>
        <span colspan="7">
            <select>
                <option>19级</option>
                <option>20级</option>
                <option>21级</option>
            </select>
            <select>
                <option>一班</option>
                <option>二班</option>
                <option>三班</option>
                <option>四班</option>
                <option>五班</option>
                <option>六班</option>
            </select>
      <br>
      <span> 性别:&nbsp&nbsp</span>
      <span>男</span>
      <span><input style="width: auto;" type="radio" name="sex" value="男" id="sex_man"></span>
      <span>女</span>
      <span><input style="width: auto;" type="radio" name="sex" value="女" id="sex_woman"></span><br>
    <button type="button" id="Button"value="注册" onclick="register()">注册</button>
    <br><br>
    <span>
        已有账号？
<a href="登录.html">请登录</a>
    </span>  
</div>
<form  action>
    <script type="text/javascript">
 
        function register(){  
                var username1=document.getElementById("username1").value;
                var password1=document.getElementById("password1").value;
                //localStorage存储注册信息
                localStorage.setItem("username1",username1);
                localStorage.setItem("password1",password1);
        if(username1=='' || password1==''){
             alert("用户名或密码不能为空！"); 
            }
            else{
                 window.location.href="登录.html";
            }
        }      
    </script>
    </div>
</html>

3、我的主页页面

<html>
	<head>
		<title>主页</title>
		<meta charset="UTF-8"/>
		<style type="text/css">/*设置图片样式*/
        #div_box {
      width: 1100px;
      height: 500px;
	  font-family: "宋体";
      background-color: #ffffff90;
      margin: auto;
      margin-top: 3%;
      text-align: center;
      border-radius: 10px;
      padding: 20px 50px;
    }
       
       body{
	background:url(".jpg")
	no-repeat;
	background-size: 1300px 650px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
      object-fit: cover;
      }
		  h{
            text-align: center;
              margin-top:0px;
              font-size: 20px;
			  color:rgb(9, 8, 8);
              font-family: "宋体"; 
          }
		  h1{
            text-align: center;
              margin-top:30px;
              font-size: 30px;
			  color:rgb(13, 11, 11);
              font-family: "宋体"; 
          }
		/*设置div的基础样式*/
			div{ 
            width: 250px;
            height: 250px;
            border-radius: 50%;
        }
 
		/*设置header和footer的样式*/
			#header,#footer{
				width: 1190px;
				margin: auto;
				margin-top: 100px;
			}
		/*设置子div的样式*/
			#div01{
				border: solid 0px #ffffff90 ;
				float: left; 
               
				margin-right: 20px;
 
            }
 
 
			#div02{
				border: solid 0px #ffffff90;
				float: left;
                
				margin-right: 20px;
 
		}
			#div03{
				border: solid 0px #ffffff90 ;
				float: left; 
				margin-right: 20px;
			}
			#div04{
				border: solid 0px  #ffffff90;
				float: left;
 
			} 
            #log
            {
                color:rgb(100, 50, 355);
				font-size: 55px;
            } 
			img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
		
	</style>
	<style>
	a:visited {color:rgb(2, 1, 1);}
	a:hover {color:rgb(24, 21, 198);}</style>
	</head>   
	<body>
        <div id="div_box">
        <h1>欢迎来到我的主页</h1>
		<div id="header">
				<div id="div01"> 
                <img src=".jpg" alt="" class="img"><br>
			<h><a href="个人简介.html">个人简介</a></h>	
				</div>
				<div id="div02">
                    <img src=".jpg" alt="" class="img"><br>
					<h><a href=".html">我的理想</a></h>
				</div>
	     	
			<div id="div03">
                <img src=".jpg" alt=""class="img"><br>
				<h><a href="我的生活.html">我的生活</a></h>
			</div>
			<div id="div04">
                <img src=".jpg" alt=""class="img"><br>
				<h><a href="学习内容.html">学习内容</a></h>
               
			</div>
		</div>
           
        </p>  
	</body>
</html>

4、个人简介

<html>
	<head>
		<title>个人简介</title>
		<meta charset="UTF-8"/>
		<style type="text/css">/*设置图片样式*/
        #div_box {
			width: 1050px;
		  height: 500px;
		  margin: 10px 50px;
		  background-color: #ffffff90;
		  border: 1px solid #FFFFFF90;
		  
      color: rgb(7, 7, 7);
	  font-family: "宋体";
      text-align: center;
      border-radius: 10px;
      padding: 20px 50px;
    }
	
	h2{text-align: right; 
            font-family: "宋体";
             color:#100f0f;
            font-size: 18px;
			margin-right:15px;
        }
       body {
            background:url("wonderland.jpg")
            no-repeat;
            background-size:120% 100%;
          }
        
			
		/*设置div的基础样式*/
			div{width: 240px;
			       height: 360px;
				
			}
		/*设置header和footer的样式*/
			#header,#footer{width: 1050px;
				margin: auto;
				margin-top: 30px;
				
			}
		/*设置子div的样式*/
			#div01{
				border: solid #ffffff90;
				float: left; 
                background-color: #ffffff90 ;
				margin-right: 20px;
            }
			#div02{
				border: solid  #ffffff90 ;
				float: left;
                background-color:  #ffffff90;
				margin-right: 20px;
 
		}
			#div03{
				border: solid   #ffffff90;
				float: left; 
                background-color:  #ffffff90;
				margin-right: 20px;
			}
			#div04{
				border: solid  #ffffff90 ;
				float: left;
                background-color:  #ffffff90;
 
			} 
            
		div p{
			text-align: right;
			display: block;
			font-size: 25px;
			text-align: center;
			color: rgb(6, 6, 6);
			font-weight: bold;
 
		}
		div span{
			display: block;
			font-size: 18px;
			text-align: left;
			color: rgb(5, 5, 5);
			font-weight: bold;
		}
 
</style>
</head>
<h2><body>点此返回我的主界面？<a href="我的主页.html">返回</a></h2>
<style>
    a:visited {color:#db1b1e;}
	a:hover {color:#480738;}
	</style>
	<div id="div_box">
	<h1>个人简介<h1/>
	<div id="header">
			<div id="div01"> 
			
			<ul>个人信息<br>
                                                                   <span><br></br><li>&nbsp姓名：</li>
				<br></br><li>&nbsp性别： </li>
				<br></br><li>&nbsp家乡：</li>
			                 <br></br><li>&nbsp民族：</li>
			</span>
                                                   </ul>
			</div>
			<div id="div02">
			<ul>联系方式<br>
				<span><br></br><li>&nbsp电话号码：</li>
				<br></br><li>&nbspQQ：</li>
				<br></br><li>&nbsp微信：</li>
				<br></br><li>&nbsp地址：***</li>
			</span>
                                                   </ul>
			</div>
		 
		<div id="div03">
			<ul>兴趣爱好<br>
                                                                   <span><br></br><li>&nbsp吉他</li>
				<br></br><li>&nbsp旅行</li>
				<br></br><li>&nbsp拍照</li>
				<br></br><li>&nbsp吃美食</li>
			</span>
                                                  </ul>
 
		</div>
		<div id="div04">	
			<ul>特长技能<br>
                                                                   <span><br></br><li>&nbsp吉他</li>
				<br></br><li>&nbsp腿毛特长</li>
				<br></br><li>&nbsp头发特短</li>
			</span>
                                                  </ul>
		</div>
	</div>
	</p>  
</body>
</html>

5、我的理想页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的理想</title>
    <style>
        /* 重置默认样式 */
 
        #div_box {
			width: 800px;
		  height: 400px;
		  
	  background-color: #ffffff90;
	  border: 1px solid #FFFFFF90;  
      color: rgb(7, 7, 7);
	  font-family: "宋体";
      text-align: center;
      padding: 50px 50px;
      margin: 30px 200px;/*上，左距离*/
      border-radius: 10px;/*改变形状*/
    }
 
 
        h1{
            text-align: center;
              margin-top:20px;
              font-size: 24px;
              font-family: "宋体"; 
          }
        
         h2{text-align: right; 
            font-family: "宋体";
            margin-right:15px;
            margin-top:0; color:#3e3b3b;
            font-size: 15px;
           }
        body{
	background:url("wonderland.jpg")
	no-repeat;
	background-size: 1300px 650px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
      object-fit: cover;
      }
        .list{
           width: 1100px;
            height:450px;
           display: flex;
           margin:20px auto;
           flex-wrap: wrap;
            }
        .list li{
            width:400px;
            height:350px;
            border-radius: 10px;/*矩形角圆弧度*/
            margin-top:5px;
            list-style: none;
                }
        .list img{
            margin-left: 30px;
            margin-top:10px;
                 }
        .title{
            font-size:20px;
            text-align: left;
            color:#333333;
             text-decoration:
             underline rgb(4, 0, 0); /*色下划线*/
              }
        .smalltitle{
			display: block;
			font-size: 17px;
            color: #060101 ;
			text-align: left;
                        
        }
    </style>
</head>
<body>
     <h2>点此返回我的主界面？<a href="我的主页.html">返回</a></h2>
    <div id="div_box">
    <h1>我的理想</h1>
    <ul class="list">
        <li>
            <img src="合照1.jpg" alt="图片加载失败"width="320" height="250">
        </li>
        <li>
            <p class="title"><b>理想生活</b></p>
            <p class="smalltitle">***</p>
            <p class="smalltitle">***</p>
            <p class="title"><b>短期目标</b></p>
            <p class="smalltitle">***</p>
            <p class="title"><b>现在的愿望</b></p>
            <p class="smalltitle">***</p>
        </li>
    </ul>
</body>
</html>

6、我的生活页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的理想</title>
    <style>
        /* 重置默认样式 */
 
        #div_box {
			width: 800px;
		  height: 400px;
		  
	  background-color: #ffffff90;
	  border: 1px solid #FFFFFF90;  
      color: rgb(7, 7, 7);
	  font-family: "宋体";
      text-align: center;
      padding: 50px 50px;
      margin: 30px 200px;/*上，左距离*/
      border-radius: 10px;/*改变形状*/
    }
 
 
        h1{
            text-align: center;
              margin-top:20px;
              font-size: 24px;
              font-family: "宋体"; 
          }
        
         h2{text-align: right; 
            font-family: "宋体";
            margin-right:15px;
            margin-top:0; color:#3e3b3b;
            font-size: 15px;
           }
        body{
	background:url("wonderland.jpg")
	no-repeat;
	background-size: 1300px 650px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
      object-fit: cover;
      }
        .list{
           width: 1100px;
            height:450px;
           display: flex;
           margin:20px auto;
           flex-wrap: wrap;
            }
        .list li{
            width:400px;
            height:350px;
            border-radius: 10px;/*矩形角圆弧度*/
            margin-top:5px;
            list-style: none;
                }
        .list img{
            margin-left: 30px;
            margin-top:10px;
                 }
        .title{
            font-size:20px;
            text-align: left;
            color:#333333;
             text-decoration:
             underline rgb(4, 0, 0); /*色下划线*/
              }
        .smalltitle{
			display: block;
			font-size: 17px;
            color: #060101 ;
			text-align: left;
                        
        }
    </style>
</head>
<body>
     <h2>点此返回我的主界面？<a href="我的主页.html">返回</a></h2>
    <div id="div_box">
    <h1>我的理想</h1>
    <ul class="list">
        <li>
            <img src="合照1.jpg" alt="图片加载失败"width="320" height="250">
        </li>
        <li>
            <p class="title"><b>理想生活</b></p>
            <p class="smalltitle">***</p>
            <p class="smalltitle">***</p>
            <p class="title"><b>短期目标</b></p>
            <p class="smalltitle">***</p>
            <p class="title"><b>现在的愿望</b></p>
            <p class="smalltitle">***</p>
        </li>
    </ul>
</body>
</html>

7、学习内容页面

<!DOCTYPE html>
<html>
    <head>
    <title>学习内容</title>
<meta charset="UTF-8"/>
<style type="text/css">  
body{
	background:url("wonderland2.jpg")
	no-repeat;
	background-size: 1300px 650px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
      object-fit: cover;
      }
    div.transbox
		{
		  width: 800px;
		  height: 500px;
		  margin: 40px 230px;
		  background-color: #ffffff90;
		  border: 1px solid #FFFFFF90;
		  opacity:0.8;
		} 
       
		h1{text-align: center; 
            font-family: "宋体";
             color:#060000;
			  margin-top:20px;
            font-size: 24px;
			
        }
		h2{text-align: left; 
            font-family: "宋体";
             color:#100f0f;
            font-size: 20px;
			margin-left:3cm;
        }
		h3{text-align: right; 
            font-family: "宋体";
             color:#100f0f;
            font-size: 18px;
			 margin-top:2px;
			margin-right:15px;
        }
		p{text-align: right; 
            font-family: "宋体";
             color:#020001;
            font-size: 18px;
			margin-right:15px;
        }	
</style>
<body>
<head>
	<h3>点此返回我的主界面？<a href="我的主页.html">返回</a></h3>
    <div class="transbox">
	<h1>#每日学习内容#</h1>
		<h2>
			<li>巩固当日学习的专业知识</li>
			<li>保持锻炼</li>
			<li>早睡</li>
			<li>学习日语</li>
            <li>学习英语</li>
    </div> 
</head>
</body>
</html>

四、实验结果

1、注册

2、登录

3、我的主页（略）

4、个人简介

5、我的生活(略）

6、我的理想（略）

7、学习内容

五、实验体会

       学习Vue+Sprig前后端开发，html、css和javascript是基础，在这次实验中，我学习到了页面的跳转方法和超链接的使用，以及各种标签的使用，如何让页面看起来更加的美观，使用什么样的标签比较方便，这些基础知识对后续的开发有着举足轻重的作用。

        另外，图片和HTML文件要在同一个目录下，不然打开HTML看不到图片。

Suc_zhan
关注
  • 23
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于django+html+css+js的电子商务网站
01-10
写在前面 本期内容：基于Django+HTML+CSS+JS的电子商务网站 实验环境： - vscode或pycharm - python(3.11.4) - django 实验目标 使用Django+HTML+CSS+JS开发一个含登陆界面的电子商务网站。本项目共分为六大模块： 1. 用户信息界面 2. 商品信息界面 3. 购物车界面 4. 送货地址界面 5. 订单界面 6. 支付界面 需求分析 1. 用户信息界面 用户信息模块包括：用户注册，用户登录，显示用户信息和修改用户密码。 - 注册信息要输入用户名、密码和邮箱。注册信息要求用户名必须唯一，如果用户名在数据库中已经存在，就会显示相应的错误提示信息。 - 在用户登录的时候，如果用户名和密码输入有误，就必须提示相应的错误信息。 - 用户登录程序后，应该允许用户查看自己的用户信息和收货信息。 - 允许修改密码，修改用户密码的时候，必须提供旧密码、新密码和新密码的确认信息。 ……
使用Javascript语言，来判断用户名和密码是否输入正确，并能跳转到相应页面，成功跳转到首页，失败不跳转
weixin_46578270的博客
03-22 2996
使用Javascript语言，来判断用户名和密码是否输入正确，并能跳转到相应页面，成功跳转到首页，失败不跳转 学习了部分HTML5基础，在此做了一些笔记。 HTML5代码 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="widh=device-width,initial-scale=1.0,user-scalale=0,maximun-
CSS+HTML+JS----开发简单个人网站
༄༊星河༣
12-30 8971
个人网站分为三个部分，登录界面，主界面，以及分界面。 登陆界面主要核心js代码: <script> function checkLogon(){ var name = document.getElementById("username").value; var pass = document.getElementById("password").value; //判断非空 if((name==null ||
基于django+html+css+js的在线博客网站
01-11
写在前面 本期内容：基于Django+Html+Css+JavaScript的在线博客网站 实验环境： - vscode或pycharm - python(3.11.4) - django 实验目标 使用Django+HTML+CSS+JS开发一个含登录界面的在线博客网站，用户可以通过网站发布博客，管理员可以登录后台管理博客。 本项目共分为六大模块： 1. 用户注册页面 2. 用户登录页面 3. 主页面 4. 博客发布页面 5. 博客搜索页面 6. 后台管理页面 实验内容 安装依赖库 在正式开始之前，我们需要先安装本次实战项目所依赖的库： - django：一个高级的Python Web框架。 安装命令： pip install -i https://pypi.tuna.tsinghua.edu.cn/simple django ……
(Web开发基础实验+报告)基于HTML+CSS+JavaScript实现简单的网页制作+源代码+文档说明+实验报告
01-15
<项目介绍> (Web开发基础实验+报告)基于HTML+CSS+JavaScript完成简单的网页制作+源代码+文档说明+实验报告 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
验证登录账号和密码的输入正确性（JavaScript实现）
weixin_45631954的博客
05-19 7728
代码 <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <form> 账号 <input type="text" name="username"id="username" style="height: 28px;"><br> 密码
用div+css设计注册界面,js校验输入用户名、密码、Email、年龄、邮编的合法行
LL__Sunny的博客
12-18 7999
1.利用div + css 设计 2.用js校验输入的合法性：用户名长度为8-10位；密码为6-8位；Email必须是一个合法的邮箱；年龄为0-150的整数；邮编为6位数字。
HTML + CSS + JavaScript 实现注册页面信息验证 详细教程（表单验证）
射手座轩木酱的代码天地~
05-13 1万+
本文介绍使用HTML + CSS + JavaScript 实现注册页面信息验证的详细方法。完整代码见文章末尾。对注册信息进行判断，判断其是否符合要求。（如：密码6-12位字符，不能有空格等）这里拿用户名和密码进行验证：用户名和密码都是6-12位字符，不能有空格。我们可以使用三个块标签，可以将这三个部分分别放到每个块标签中。不过这个时候还没有验证功能，下面将实现这一功能。（用户名/密码格式是否正确）创建一个注册页面，如下图。第一部分：两个段落文本。第三部分：登录/有账号。
用JS完成注册页面的一个简单校验
灵活的钱辰昌。
06-11 1680
function checkUsername(){ document.getElementById("usernameSpan").innerHTML="请输入数字或字母"; } function checkUsername2(){ var username=document.getElementById("username").value; if(username != ""){ d
利用JS验证用户名是否合法
热门推荐
williamgavin的博客
01-25 1万+
验证分为两部分，第一部分是前端验证（如下所示），另外一种是服务器端验证。以下代码只实现了验证用户名是否合法，如果不合法就阻止提交。 JS验证用户名是否合法 html> head> title>表单验证title> meta http-equiv="content-type" content="text/html; charset=utf-8" /> style type = "
人机交互大作业-基于Html+Css+JavaScript开发实现的模仿qq和中国银行界面+源代码+文档说明+实验报告
01-15
人机交互大作业--基于Html+Css+JavaScript实现的模仿qq和中国银行界面+源代码+文档说明+实验报告 模拟qq和中国银行界面、报告 .推荐从start.html页开始浏览 4.QQ实现基本登录，提示登录信息不完整，密码报错，聊天等...
毕业设计，基于SpringMVC+Hibernate+MySql开发的实验室预约管理系统，内含Java完整源代码
01-20
毕业设计，基于SpringMVC+Hibernate+MySql开发的实验室预约管理系统，内含Java完整源代码 JSP基于SpringMVC和Hibernate的实验室预约管理系统毕业源码案例设计 功能说明： 学生角色包含以下功能：查看实验室排课表,...
使用JavaScript设计web登陆界面 用户名 密码判断
lishaman的专栏
08-03 1万+
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 UserID and Password*/ function pass
js登录页验证用户名密码
m0_59169193的博客
04-23 1万+
需求： 接受用户输入的用户名和密码，若用户名为"admin",密码为"123456",则提示用户登录成功。 var sww = 'admin'; // 设置用户名名称 var sty = '123456'; // 设置密码 do { // 使用 do while循环 先执行一次循环体，也就是下面的 用户名和密码输入框以及if分支。 var str = prompt('请输入用户名:'); // 弹出用户名输入框
请你用js实现微信小程序的登录逻辑，验证用户的登录名，密码，并查看用户输入的用户名和密码符合要求...
weixin_35756892的博客
12-29 478
首先，需要在小程序中使用 wx.login API 获取用户的登录凭证 code。然后，可以将 code 发送到服务器，使用服务器 SDK 调用微信提供的接口，通过 code 换取 session_key 和 openid。 然后，可以在服务器端验证用户输入的用户名和密码是否正确，并根据需要进行下一步的操作。例如，可以使用 openid 查询数据库中是否存在相应的用户记录，如果存在，则可以将用户的...
黑猴子的家：Eclipse 创建 JavaWeb 项目
黑猴子的博客
11-19 256
1、File -> New -> Other 2、Dynamic Web Project -> Next 3、Finish 4、修改tomcat 5、创建index.jsp 1)WebContent -> New -> Other 2)JSP File -> Next 3)index.jsp ->...
Javascript 验证表单密码、用户名是否输入--JS的简单应用
琅枫的博客
04-20 5001
分析：在这里我们运用了常见的if判断语句只需对用户名、密码设定不能为null(空)进行判定， 即可实现此功能。 HTML表单代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js验证表（是否输入单用户名、密码）</title> <style type="text/css"> *{paddi
移动端/PC端布局-flex布局
最新发布
微木
05-22 195
flex布局详解
基于CSS+HTML+JS开发简单个人网站 实验小结
04-24
你好，我可以为您解答关于基于CSS、HTML和JS开发简单个人网站的实验小结。 首先，开发一个简单的个人网站需要掌握基本的HTML、CSS和JS知识，这些技能在web开发中非常重要。 在实验过程中，您需要定义网站的页面结构和设计页面布局，然后使用HTML代码创建页面的基本内容。接着，您可以使用CSS样式来美化页面，使它看起来更吸引人。最后，使用JS代码可以添加交互式元素，例如表单或动画等。 在开发网站的过程中，一些最佳实践包括注重用户体验和良好的代码结构。您需要将代码模块化，使用清晰的注释来使代码易于理解和维护。此外，确保您的网站可以响应不同设备的屏幕大小，以便用户可以在任何设备上访问您的网站。 总之，开发一个简单的个人网站需要您熟悉HTML、CSS和JS技术，并注重良好的用户体验和代码结构。希望我的回答可以对您有所帮助，如果您还有任何关于此主题的问题，请随时联系我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值