学生网页设计制作作业_网页制作作业成品_网页设计作业

一、作品介绍

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

---

二、作品效果

▶️视频演示

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

(title-I79BG-个人网站)]

截图演示

07.png

06.png

05.png

04.png

03.png

02.png

01.png

---

三、 作品代码

HTML代码

    
    
    

        

        

            个人首页
            生活瞬间
            学习记录
            学校生活
            规划人生
            旅行打卡
            访客留言
        
    
    
    
    
    

        

        
小猪猪
        
没有什么是一顿饭解决不了的
        

            
男20岁狮子座
        
        

            个人首页
            生活瞬间
            学习记录
            学校生活
            规划人生
            旅行打卡
            访客留言
        
    
    
    
    
    

        
        

            
            
生活瞬间
            
只要追求幸福和自身的完美，选择适合我们的生活。你会发现即使忙碌也可以很充实，对生活的经历也会更加清晰。只要抱有希望就会奔向美好的明天。
        
        
        

            
学习记录
            
有时候，我们只是需要换一扇窗户看风景。生活有微笑有苦楚，不想说不等于无言，只有心里明了，也许永远选择沉默，选择承受。沉默多了，承受也就越多，不如轻轻打开另一扇窗户，放逐心情，也许就是另一个轻松美丽的世界。从一扇窗户到另一扇窗户，从一个世界到另一个世界，需要的是一份勇气，一抹心境。只有按生活本来面貌去生活，我们才能成为真正完善的人。人生就是一场漫长对抗，就看你能够追逐多久，坚持多久。
        
        
        

            
            
学校生活
            
有时候，我们只是需要换一扇窗户看风景。生活有微笑有苦楚，不想说不等于无言，只有心里明了，也许永远选择沉默，选择承受。
        
        
        

            
        
        
        

            
            
旅行打卡
            
趁阳光正好，趁微风不燥，趁现在还年轻，还可以走很长很长的路，还能诉说很深很深的思念。去寻找那些曾出现在梦境中的路径、山峦与田野。
        
        
        

            
        
        
    
    
    
    
    

        

            个人首页
            生活瞬间
            学习记录
            学校生活
            规划人生
            旅行打卡
            访客留言
        
        

            Copyright @ 2021 wo.com All Rights Reserved. 个人网站 版权所有
        
    
    
    

CSS代码

/*life*/
.life{width:830px;background-color:#fff;margin-top:20px;float:right;
}
.life h3{width:810px;height:30px;line-height:30px;margin:15px 0 0 20px;float:left;
}
.life h3 span{margin-right:2px;
}
.life article{width:830px;margin-top:15px;float:left;
}
.life article section{width:250px;margin:0 0 20px 20px;float:left;
}
.life article section img{width:250px;height:180px;float:left;
}
.life article section p{width:250px;height:35px;line-height:35px;background-color:#fafafa;text-align:center;float:left;
}

/*study*/
.study{width:830px;background-color:#fff;margin-top:20px;float:right;
}
.study h3{width:810px;height:30px;line-height:30px;margin:15px 0 0 20px;float:left;
}
.study h3 span{margin-right:2px;
}
.study article{width:830px;margin-top:15px;float:left;
}
.study article section{width:385px;margin:0 0 20px 20px;background-color:#fafafa;float:left;
}
.study article section p{width:345px;font-size:14px;line-height:25px;margin:20px 20px;float:left;
}

/*school*/
.school{width:830px;background-color:#fff;margin-top:20px;float:right;
}
.school h3{width:810px;height:30px;line-height:30px;margin:15px 0 0 20px;float:left;
}
.school h3 span{margin-right:2px;
}
.school article{width:830px;margin-top:15px;float:left;
}
.school article section{width:250px;margin:0 0 20px 20px;float:left;
}
.school article section img{width:250px;height:180px;float:left;
}
.school article section p{width:250px;height:35px;line-height:35px;background-color:#fafafa;text-align:center;float:left;
}

/*plan*/
.plan{width:830px;background-color:#fff;margin-top:20px;float:right;
}
.plan h3{width:900px;height:30px;line-height:30px;margin:15px 0 0 20px;float:left;
}
.plan h3 span{margin-right:2px;
}
.plan article{width:830px;margin-top:15px;float:left;
}
.plan article img{width:250px;margin:0 0 20px 20px;float:left;
}

/*travel*/
.travel{width:830px;background-color:#fff;margin-top:20px;float:right;
}
.travel h3{width:810px;height:30px;line-height:30px;margin:15px 0 0 20px;float:left;
}
.travel h3 span{margin-right:2px;
}
.travel article{width:830px;margin-top:15px;float:left;
}
.travel article section{width:250px;margin:0 0 20px 20px;float:left;
}
.travel article section img{width:250px;height:180px;float:left;
}
.travel article section p{width:250px;height:35px;line-height:35px;background-color:#fafafa;text-align:center;float:left;
}

/*word*/
.word{width:830px;height:765px;background-color:#fff;margin-top:20px;float:right;
}
.word h3{width:810px;height:30px;line-height:30px;margin:15px 0 0 20px;float:left;
}
.word h3 span{margin-right:2px;
}
.word form{width:830px;margin:50px 0;float:left;
}
.word p{width:600px;line-height:30px;margin:20px 0 0 80px;float:left;
}
.word p label{width:130px;height:30px;text-align:right;margin-right:10px;float:left;
}
.word p input{width:400px;height:30px;float:left;
}
.word p span{margin-right:30px;float:left;
}
.word p textarea{width:400px;height:260px;line-height:20px;float:left;
}
.word p input.submit{width:190px;color:#FFF;background-color:#a7d2e2;letter-spacing:3px;border:0;
}
.word p input.reset{width:190px;color:#FFF;background-color:#a7d2e2;letter-spacing:3px;border:0;margin-left:20px;
}

/*footer*/
.footer{width:1100px;color:#3c8aae;background-image:url(../images/footer.jpg);background-size:100% 100%;margin-top:20px;float:left;
}
.footer_nav{width:1100px;height:120px;margin-top:40px;float:left;
}
.footer_nav a{font-size:15px;font-weight:bold;color:#3c8aae;margin:0 86px 0 20px;float:left;
}
.footer_nav a:nth-last-child(1){margin-right:0;
}
.footer_copyright{width:1100px;height:38px;line-height:38px;text-align:center;float:left;border-top:1px solid #3c8aae;
}

---

四、更多源码

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

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

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