学生HTML个人网页作业作品 个人主页博客web网页设计制作 web大学生个人网站作业模板

一、作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

---

二、作品效果

▶️视频演示

https://live.csdn.net/v/embed/240025

(title-I64JP-个人博客带js轮播带音乐(11页))]

截图演示

11.png

10.png

09.png

08.png

07.png

06.png

05.png

04.png

03.png

02.png

01.png

---

三、 作品代码

HTML代码

  

    

      

        

          

            
  
            
  
            
  
          
        
          
    
  
  

  

    
首页
    
摄影展示
    
个人爱好
    
日志
    
读物推荐
    
联系我们
  
  



  

    
基本信息
  
  

    
  
    

      
姓名：XXX
      
性别：男
      
电话：XXXXXXX
      
邮箱：XXXXXXX
    
    

      
    
  

人生格言 : 迷茫的时候就努力一下试试~

• 

• 

个人博客

CSS代码

@charset "utf-8";

/* CSS Document */

html {
    background: #ebe716
}

form .in {
    margin-bottom: 10px;
}

form .in p {
    margin-bottom: 10px;
}

form .in .phone {
    width: 100%;
    height: 40px;
    border: 1px solid #666;
}

form .in .phone.oh {
    height: 90px;
}

form .but {
    width: 140px;
    height: 40px;
    color: #fff;
    background: #000;
    border: none;
}

.riz {
    width: 600px;
    height: 200px;
    margin: 0 auto;
}

.right {
    margin-top: 50px;
}
.banner img{ display:block}
.focus{height:435px;overflow:hidden;position:relative;}
/* focus_s */
.focus_s{position:absolute;left:50%;bottom:5%;height:13px;overflow:hidden;width:110px;z-index:9;margin:0 0 0 -30px;}
.focus_s li{float:left;cursor:pointer;height:13px;width:12px;overflow:hidden;margin-right:10px;background:url(../images/dian.png) no-repeat;}
.focus_s li.active{background-position:-12px 0;}
/* focus_m */
.focus_m ul{opacity:1;filter:alpha(opacity=100);}
.focus_m li{width:100%;height:435px;position:absolute;top:0;left:0;}
/* focus_l focus_r */
.focus_l,.focus_r{position:absolute;display:block;width:50px;height:75px;overflow:hidden;z-index:2;top:150px;}
.focus_l{left:0;}
.focus_r{right:0;}
.focus_l b,.focus_r b{position:absolute;z-index:1;display:block;width:50px;height:75px;overflow:hidden;background:#000;opacity:0.3;filter:alpha(opacity=30);cursor:pointer;}
.focus_l span,.focus_r span{display:inline-block;position:relative;z-index:2;width:22px;height:33px;top:21px;cursor:pointer; margin-right:28px;}
.focus_l span{left:12px;background-image:url(../images/l.png);_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/l.png');}
.focus_r span{left:16px;background:url(../images/r.png) 0 0 no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r.png');}
.focus_l:hover b,.focus_r:hover b{opacity:0.5;filter:alpha(opacity=50);}

---

四、更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app