个人网站：基于html、css、js网页开发界面

1、注册

    
    
    
    
    



    

        
注册
        

            

                

                    
用户名:
                    

                        
                        *2 - 4位汉字
                    
                
                

                    
密码:
                    

                        
                        *字母开头，6 - 8位字符
                    
                
                

                    
确认密码:
                    

                        
                        *请再次输入密码
                    
                
                

                    
性别:
                    

                        
                        男
                        
                        女
                        
                    
                
                

                    
兴趣爱好:
                    

                        
                        阅读
                        
                        运动
                        
                        音乐
                        
                    
                
                

                    
职业:
                    

                        
                            请选择
                            学生
                            教师
                            工程师
                        
                        
                    
                
                

                    

                         我同意相关信息
                    
                
                

                    

                        注册
                    
                
            
        
        
已有账号？登录
    

2、登录

    
    
    
    
    



    

        
登录
        

            

                

                    
用户名:
                    

                        
                        *2-4位汉字
                    
                
                

                    
密码:
                    

                        
                        *字母开头，6-8位字符
                    
                
                

                    

                        登录
                    
                
            
        
        
没有账号？注册
    

3、主界面

    
    
    
    



    
    
个人网站
    
    
        
        
        
        尹依婷
		
    
    

        

            
个人简历
            

            
            





            
            查看详情
        
        

            
我的理想
            

            
            





            
            查看详情
        
        

            
我的生活
            

            
            





            查看详情
        
        

            
学习内容
            

            
            





            查看详情
        
    
    

        退出登录
    

4、个人简介界面

    
    
    
    


	
个人简介
	
	
	    
	    
	    
	    依依
	
    

        

            
个人信息
			

				

				
姓名：婷婷
				

				
出生年月：2005.03.06
				

				
学历：本科
				

				
民族：汉
			
        
        

			
联系方式
            

				

			    
qq：2382275991
				

                
电话：19151822256
				

                
微信：19151822256
				

                
地址：中南林业科技大学
				

				
毕业学校：中南林业科技大学
			
        
        

			
兴趣爱好
			

			
喜欢听音乐、学习、画画、看小说、追剧、动漫
          
        
        

            
特殊技能
			

			
会C/C++、java语言、sql
        
    
	

	        返回主界面
    

5、我的梦想界面

    
    
    
    


	 
	     
我的理想
		 
		 
		     
		     
		     
		     尹依婷
		 
	     

	         

	             
职业理想
	             

	                 
成为一名优秀的软件工程师。
	                 
创办一家科技公司，推动技术创新。
	                 
参与开源项目，为社区贡献力量。
	                 
成为一名技术导师，帮助更多人学习编程。
	             
	         
	         

	             
生活理想
	             

	                 
环游世界，体验不同的文化和风景。
	                 
拥有一个温馨的家庭，享受平凡的生活。
	                 
保持健康的生活方式，坚持锻炼和阅读。
	                 
学习一门乐器，丰富自己的精神世界。
	             
	         
	         

	             
学习理想
	             

	                 
掌握多门编程语言，成为全栈开发者。
	                 
学习人工智能和机器学习，探索未来科技。
	                 
提升英语水平，能够流利地与外国人交流。
	                 
阅读100本经典书籍，拓宽知识面。
	             
	         
	         

	             
社会理想
	             

	                 
帮助贫困地区的孩子获得教育机会。
	                 
参与环保活动，为保护地球贡献力量。
	                 
推动社会公平，关注弱势群体的权益。
	                 
成为一名志愿者，积极参与公益活动。
	             
	         
	     
	     

	         返回主界面
	     
	 
	 

6、我的生活界面

    
    
    
    


	
我的生活
	

	
	
	    
	    
	    
	    尹依婷
	
    

        

            
吃饭
			
        
        

			
运动
            
        
        

			
志愿
			
        
        

            
旅游
			
        
    
	

	        返回主界面
    

7、我的学习界面

    
    
    
    


	 
我的学习
	 
	 
	     
	     
	     
	     尹依婷
	 
	    

	        

	            
编程学习
	            

	                
HTML/CSS：掌握网页开发基础。
	                
JavaScript：学习前端交互逻辑。
	                
Python：掌握数据分析与人工智能。
	                
Java：深入学习后端开发。
	            
	        
	        

	            
设计学习
	            

	                
UI/UX设计：学习用户界面与用户体验设计。
	                
Photoshop：掌握图像处理技巧。
	                
Figma：学习原型设计与团队协作。
	                
Illustrator：掌握矢量图形设计。
	            
	        
	        

	            
语言学习
	            

	                
英语：提升听说读写能力。
	                
日语：学习基础语法与词汇。
	                
法语：掌握基础会话与写作。
	                
西班牙语：了解基础语法与文化。
	            
	        
	        

	            
其他技能
	            

	                
项目管理：学习敏捷开发与团队协作。
	                
数据分析：掌握Excel与SQL。
	                
写作：提升技术文档与博客写作能力。
	                
演讲：学习公开演讲与表达技巧。
	            
	        
	    
	    

	        返回主界面
	    
	
	
	

8、CSS格式

        /* 设置背景图片 */
        body {
            background-color: gray;
            background-image: url(img/d.jpg);
            background-size: cover; /* 使背景图片覆盖整个背景区域 */
            background-position: center; /* 将背景图片居中 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        /* 设置容器样式 */
       .container {
            border-radius: 10px;
            width: 500px;
            padding: 20px;
            background-image: url(img/个人网站.jpg);
            background-size: cover;
            background-position: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* 设置表格样式 */
        table {
            margin: auto;
            color: black;
        }

        /* 设置输入框样式 */
        input[type="text"],
        input[type="password"],
        select,
        textarea {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* 设置按钮样式 */
        button {
            width: 60%;
            padding: 10px;
            background-color: deepskyblue;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        /* 设置提示信息样式 */
        span {
            font-size: 13px;
            color: red;
        }

        /* 设置密码格式提示样式 */
        #passwordSpan {
            color: gray;
            /* 初始提示文字颜色 */
        }
    

9、相关页面展示