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

news2025/7/10 0:12:33

目录:

实验要求

实验代码

1.注册

2.登录

3.主页

4.个人简介

5.我的理想

6.我的生活

7.学习内容

总结


实验要求

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

实验学时:4    实验类型:设计

目的与任务

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

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

内容、要求与方法步骤

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

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

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

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

      图1-1 主界面

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

图1-2个人简历界面

我的理想界面:列举我的理想,可以使用无序列表或者表格排列。

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

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

具体操作步骤:

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: #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;
      }

    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>
<from 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>

2.登录 

登录密码为1 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: #00000060;
      margin: auto;
      margin-top: 10%;
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
    }

    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>
<video src="登录背景.mp4" class="bjimg" autoplay loop muted></video>
<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=='1' && password=='2'){
               window.location.href="主页.html";
            }
            else{
                alert("用户名或密码错误,请重新输入!");
            }
           }
        else{
            alert("用户名或密码不能为空!");
        }
    }
</script>
</div>
</body>
</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("羊村.jpg")
            no-repeat;
            background-size:120% 100%;
          }
        
			
		/*设置div的基础样式*/
			div{width: 240px;
				height: 320px;
				
			}
		/*设置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"> 
			
			<p>个人信息</p><br>
            <span>&nbsp*姓名:包包大人
				<br/><br/>&nbsp*性别:女
				<br/><br/>&nbsp*家乡:
				<br/><br/>&nbsp*民族:汉族
			</span>
			</div>
			<div id="div02">
				<p>联系方式</p><br>
				<span>&nbsp*电话号码:*
					<br/><br/>&nbsp*QQ:*
					<br/><br/>&nbsp*微信:*
					<br/><br/>&nbsp*地址:*
				</span>
			</div>
		 
		<div id="div03">
			<p>兴趣爱好</p><br>
            <span>&nbsp*喜欢包包夫人
				<br/><br/>&nbsp*打游戏
				<br/><br/>&nbsp*拍照
				<br/><br/>&nbsp*喝奶茶
			</span>


		</div>
		<div id="div04">
			
			<p>特长技能</p><br>
            <span>&nbsp*干饭
				<br/><br/>&nbsp*暂时无
				<br/><br/>&nbsp*无
				<br/><br/>&nbsp*无
			</span>
		</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("羊村.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="狗狗动图.gif" alt="朱依"width="250" height="250">
        </li>
        <li>
            <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>
        /* 重置默认样式 */
        *{
            margin:0;
            padding: 0;
        }
        h1{text-align: center; font-family: "宋体"; 
    }
        
         h2{text-align: right; 
            font-family: "宋体";
            margin-right:15px;
            margin-top:0; color:#3e3b3b;
            font-size: 15px;
        }
        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;
         }
        .list{
           width: 1250px;
           height:550px;
           display: flex;
           margin:20px auto
           ;
	  background-color: #ffffff90;
           flex-wrap: wrap;
        }
        .list li{
            width:310px;
            height:250px;
            background-color:#ffffff90;
            
            border-radius: 10px;
            margin-top:5px;
            box-shadow: 0 0 0px #dedede;
 
            list-style: none;
            transition: all .2s;/*控制时间*/
        }
        .list img{
            margin-left: 20px;
            margin-top:14px;
        }
 
        .title{
            font-size:20px;
            color:#333333;
        }
        .smalltitle{
           
            
			text-align: right;
			display: block;
			font-size: 17px;
			text-align: center;
			color: rgb(6, 6, 6);
			

        }
        .list li:hover{
            box-shadow: 10px 10px 10px #fff;
            transform:scale(1.1);
        }
    </style>
</head>

<body>  <h1>照片墙</h1>
  <h2>点此返回我的主界面?<a href="主页.html">返回</a></h2> 
    <ul class="list">
      
        <li>
            <img src="包包大人.jpg" alt=""width="260" height="200">
            
            <p class="smalltitle">超级喜欢包包大人</p>
        </li>
        <li>
            <img src="可爱猫猫.jpg" alt=""width="260" height="200">
           
            <p class="smalltitle">可爱猫猫</p>
        </li>
        <li>
            <img src="偶像.jpg" alt=""width="260" height="200">
            
            <p class="smalltitle">最喜欢的偶像</p>
        </li>
        <li>
            <img src="食物二.jpg" alt=""width="260" height="200">
           
            <p class="smalltitle">生日聚餐</p>
        </li>
        <li>
            <img src="月饼.jpg" alt=""width="260" height="200">
            <p class="smalltitle">2021年中秋节收到的月饼</p>
        </li>
        <li>
            <img src="风景.jpg" alt=""width="260" height="200">
            <p class="smalltitle">2020年武汉玩纪念</p>
        </li>
        <li>
            <img src="美食三.jpg" alt=""width="260" height="200">
            
            <p class="smalltitle">和室友聚餐</p>
        </li>
        <li>
            <img src="包包大人开车.jpg" alt=""width="260" height="200">
            
            <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("羊村.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>
    </div> 
</head>
</body>
</html>


总结 

j2ee老师布置的实验,简单的个人网站,以上附代码和实现界面,虽然我分了七个点,但是每个界面用的代码都是差不多的,对了,图片和代码记得放在同一个文件夹下,因为我淋过雨,所以为有缘看到的学弟学妹撑伞,我水平很低,仅供参考。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405223.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue3-Pinia的基本使用

什么是Pinia呢&#xff1f; Pina开始于大概2019&#xff0c;是一个状态管理的库&#xff0c;用于跨组件、页面进行状态共享&#xff08;这和Vuex、Redux一样&#xff09;,用起来像组合式API&#xff08;Composition API&#xff09; Pinia和Vuex的区别 PInia的最初是为了探索…

web期末作业网页设计——我的家乡(网页源码)

作品介绍 1.网页作品简介方面 &#xff1a;HTML网站模板。主要有&#xff1a;首页 家乡简介 风景名胜 特色美食 站长介绍 在线调查 等总共 6 个页面html下载。 2.网页作品编辑&#xff1a;此作品为学生个人主页网页设计题材&#xff0c;代码为简单学生水平 htmlcss 布局制作&am…

超详细的VSCode下载和安装教程以及解决VSCode下载速度特别慢的问题

文章目录1. 引言2. 下载VSCode3. 解决VSCode下载速度特别慢4. 安装VSCode1. 引言 今天用WebStorm运行前端代码时&#xff0c;发现不太好打断点。 于是&#xff0c;打算改用VSCode来运行前端代码&#xff0c;但前提是要安装VSCode&#xff0c;如下便是超详细的VSCode安装教程以…

小程序中使用echarts(硬货,全网最详细教程!)

echarts是一个基于JS的数据可视化图标库&#xff0c;它提供了直观&#xff0c;生动&#xff0c;可交互&#xff0c;可个性定制的数据可视化图表。一般在vue中会使用到&#xff0c;并且官网也详细的说明了如何在vue中使用&#xff0c;但是今天我想来探讨的是&#xff0c;如何在微…

你评论,我赠书~【哈士奇赠书 - 15期】〖HTML5+CSS3+JavaScript从入门到精通(微课精编版)(第2版)〗等你来拿

文章目录❤️‍&#x1f525; 赠书活动 - 《HTML5CSS3JavaScript从入门到精通&#xff08;微课精编版&#xff09;&#xff08;第2版&#xff09;》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 抽奖方式与截止时间❤️‍&#x1f525; 赠书活动 → 获奖名单❤️‍&#x…

Parsing error: No Babel config file detected for xxx Either disable config file checking...报错解决方法

Parsing error: No Babel config file detected for xxx Either disable config file checking…报错解决方法 使用Vue3创建项目&#xff0c;创建完成后发现会报错&#xff0c;如下图&#xff1a; 翻译了一下&#xff0c;其实已经告诉我们解决方法了&#xff1a; Either disa…

node.js中Express简介

Express简介 1.什么是Express 官方给出的概念&#xff1a;Express是基于Node.js平台&#xff0c;快速、开放、极简的web开发框架。 通俗理解&#xff1a;Express的作用和Node.js内置的http模块类似&#xff0c;是专门用来创建web服务器的 Express的本质&#xff1a;就是一个n…

CSS设置背景颜色透明的两种方法

在css中设置背景颜色透明的方法有两种&#xff1a; 一种是通过rgba方法设置&#xff0c;另一种是通过backgroundh和opacity设置 下面分别是css中 两种方法实现的背景颜色透明实例 1&#xff0c;通过background和opacity设置背景颜色透明 background属性中属性值比较简单…

Vue+ELementUI主页布局----侧边栏布局(el-aside)

第一节Login.vue登录表单知识&#xff1a; Element-UIvue实现登录表单_我爱布朗熊的博客-CSDN博客 具体Element-UI地址&#xff1a; Element - The worlds most popular Vue UI framework 目录 一、布满整个页面 二、主页Header布局 三、主页左侧带单布局 四、axios请求…

前端练手项目合集40.0个,附源码,2022年最新

今天分享40个博主平时收集整理的前端练手项目&#xff0c;都是一些适合前端新手的小项目合集。 1、【网易云音乐首页制作】 2、【实战项目之今日头条】 3、【实战项目之拉勾网】 4、【ReactNative项目之美食APP】 5、【uni-APP项目实战教程】 6、【React项目管理后台系统】 7、…

uni-app 怎么实现路由拦截

前言 随着业务的需求&#xff0c;项目需要支持H5、各类小程序以及IOS和Android&#xff0c;这就需要涉及到跨端技术&#xff0c;不然每一端都开发一套&#xff0c;人力成本和维护成本太高了。团队的技术栈主要以Vue为主&#xff0c;最终的选型是以uni-appuview2.0作为跨端技术…

vue中实现路由跳转的三种方式(超详细整理)

vue中实现路由跳转的三种方式 一、使用vue-router vue-router 本质是一个第三方的包 用的时候需要下载 步骤 &#xff08;7步法 &#xff09;&#xff1a; 下载vue-router模块到当前工程 yarn add vue-router在main.js中引入VueRouter函数 // 引入路由 import VueRouter from…

【TypeScript】TS 看这一篇就够了

文章目录&#x1f9d1;‍&#x1f4bb;TypeScript基本概念TypeScript 是什么&#xff1f;为什么要有typescript安装编译 TS 的工具包编译并运行 TS 代码创建基于TS的vue项目&#x1f9d1;‍&#x1f4bb;TypeScript基础类型注解TypeScript类型概述TypeScript原始数据类型数组类…

Vue实现登录功能全套详解(含封装axios)

目录 Vue项目中实现登录大致思路&#xff1a; 用到的关键文件 一、安装插件 二、创建store 三、封装axios qs vue 插件 api.js的作用 四、路由拦截 五、登录页面实际使用 Vue项目中实现登录大致思路&#xff1a; 1、第一次登录的时候&#xff0c;前端调后端的登陆接…

vite入门/徒手搭建vite/配置vite/使用vite脚手架/vite步骤

以下内容全部以图片形式展示&#xff08;自己动手尝试一下印象岂不是更深&#xff1f;&#xff09; 当然啦&#xff0c;也有完整的&#xff0c;自己拉代码https://github.com/ispaomoya/build-vite.git 文章有点长&#xff0c;你忍一下 目录 一、了解一下webpack和vite 二、…

node.js安装及环境配置超详细教程【Windows系统安装包方式】

文章目录Step1&#xff1a;下载安装包Step2&#xff1a;安装程序Step3&#xff1a;查看Step4&#xff1a;环境配置最后补充&#xff1a;Step1&#xff1a;下载安装包 https://nodejs.org/zh-cn/download/ 根据自己电脑系统及位数选择&#xff0c;我的电脑是Windows系统、64位…

微信小程序登录方法,授权登陆及获取微信用户手机号

✅作者简介&#xff1a; 大家好五一快乐&#xff0c;我是痴心阿文&#xff0c;你们的学友哥&#xff0c;今天给大家分享微信小程序登录方法&#xff01; &#x1f4c3;个人主页&#xff1a;痴心阿文的博客_CSDN博客-TypeScript.js,笔记,CSS领域博主 &#x1f525;本文前言&…

微信小程序获取当前的位置

微信小程序获取位置信息的方式有两种&#xff0c;一种是调用微信官方的接口来获取&#xff0c;如getLocation,这种方式只能获取经纬度 微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html 另一种是使用的第三方平台的&#xff0…

Web前端 | HTML引入CSS样式的三种方式

✅作者简介&#xff1a;一位材料转码农的选手&#xff0c;希望一起努力&#xff0c;一起进步&#xff01; &#x1f4c3;个人主页&#xff1a;每天都要敲代码的个人主页 &#x1f525;系列专栏&#xff1a;Web前端 目录 一&#xff1a;CSS 1. CSS概述 2. HTML引入CSS样式的…

Vue2.0搭建脚手架(vue-cli)

目录 前言 一、npm安装 二、搭建脚手架 1.安装脚手架vue-cli 2.搭建项目 前言 vue大概内容&#xff1a; Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上…