Web前端大作业制作个人网页(html+css+javascript)-程序员宅基地

技术标签： HTML学生个人网页设计 dreamweaver web设计网页规划与设计 web前端期末大作业前端 html 课程设计 javascript HTML网页制作

学生HTML静态网页基础水平制作，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

【作者主页——获取更多优质源码】

【学习资料/简历模板/面试资料/ 网站设计与制作】

【web前端期末大作业——毕设项目精品实战案例】

# 一、网站题目个人网页设计、‍♂️个人简历制作、简单静态HTML个人网页作品、个人介绍网站模板、等网站的设计与制作。

二、️网站描述

个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。

一套A+的网页应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。。
页面清爽、美观、大方，不雷同。。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2） css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、网站演示

在这里插入图片描述

五、网站代码

HTML结构代码


<!doctype html>
<html>
!
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="tzyh" />
    <title>Resume</title>
    <link href="css/style.css" rel="stylesheet">
</head>
<SCRIPT language=JavaScript>
    document.oncontextmenu = new Function("event.returnValue=false;");
    document.onselectstart = new Function("event.returnValue=false;");
</SCRIPT>
<script type="text/javascript" src="../../chengpin/tzyh.js"></script>

<body>


    <!-- Copyright ?2005. Spidersoft Ltd -->
    <style>
        A.applink:hover {
      
            border: 2px dotted #DCE6F4;
            padding: 2px;
            background-color: #ffff00;
            color: green;
            text-decoration: none
        }

        A.applink {
      
            border: 2px dotted #DCE6F4;
            padding: 2px;
            color: #2F5BFF;
            background: transparent;
            text-decoration: none
        }

        A.info {
      
            color: #2F5BFF;
            background: transparent;
            text-decoration: none
        }

        A.info:hover {
      
            color: green;
            background: transparent;
            text-decoration: underline
        }
    </style>
    <!-- /Copyright ?2005. Spidersoft Ltd -->
    <center>
        <table width="960" border="0" class="main" cellspacing="0" cellpadding="0" style=" margin-bottom:20px;">
            <tr>
                <td height="76" colspan="3" class="branding">
                    <center><a href="index.html">
    		<img src="images/logo.png"  alt="Horus" /></center>
    </a> </td>
            </tr>
            <tr>
                <td height="125" colspan="3">
                    <table width="960" border="0" align="center" cellspacing="0" class="nav">

                        <tr>
                            <td></td>
                            <td width="120" height="125"><a class="active" href="index.html">首页</a></td>
                            <td width="120"><a href="x.html">个人简介</a></td>
                            
                            <td width="120"><a href="r.html">个人生活</a></td>
                            <td width="120"><a href="d.html">代表作品</a></td>
                            <td width="150"><a href="z.html">相册欣赏</a></td>
                            <td width="120"><a href="k.html">在线留言</a></td>
                            <td></td>
                        </tr>
                    </table>
                </td>
            </tr>


            <tr>
                <td height="870" colspan="3">
                    <table width="960" border="0" align="center" cellspacing="0">
                        <tr>
                            <td width="960" height="1270" style=" background:#fff;">
                                <div class="t1"><br>

                                    <h1 style="font-size:24px; line-height:50px; color:#000; text-indent:1em;">欢迎来到林依晨的部落格~</h1>
                                    <table border="0" cellspacing="0" cellpadding="0" style="padding:30px; line-height:30px; font-size:14px;">
                                        <tr>
                                            <td><img src="images/index.png" width="300" /></td>
                                            <td>
                                                <p style="padding-left:26px; font-size:14px; color:#f07a8b;">林依晨（Ariel Lin），1982年10月29日出生于台湾省台北市宜兰县，中国台湾女演员、歌手。2000年，林依晨参加台北捷运报举办的第一届捷运超美少女比赛并获得冠军。2001年，她考入国立政治大学韩文系，其后陆续参与MV及广告的拍摄。2002年，因主演个人首部电视剧作品《十八岁的约定》正式出道。2004年，凭借个人大银幕处女作《飞跃情海》入围金马奖最佳女主角。2006年，因主演古装神话爱情剧《天外飞仙》而成功进军内地市场。2008年，凭偶像剧《恶作剧2吻》获得金钟奖戏剧类最佳女主角，成为偶像剧史上折桂金钟视后的第一人。2009年5月，签约爱贝克思(<em>AVEX</em>)进军歌坛，10月，发行个人首张音乐专辑《幸福遇见》。2010年，发行第二张专辑《美好的旅行》。</p>
                                                <p style="padding-left:26px; font-size:14px; color:#f07a8b;">2011年，凭借都市爱情剧《我可能不会爱你》赢得颇高人气，并于2012年再次获得金钟奖戏剧类最佳女主角。2013年9月，林依晨正式暂别演艺圈，赴英国学习一年。2014年12月，林依晨于英国伦敦大学中央演讲与戏剧学院硕士学位毕业。2015年，主演都市爱情片《杜拉拉追婚记》。2016年，首次尝试大尺度类电影作品，主演职场爱情电影《234说爱你》。</p>
                                            </td>
                                        </tr>
                                    </table>



                                </div>

                                <div class="t2" style="padding-left:30px;">
                                    <h1 style="font-size:24px; line-height:50px; color:#000; text-align:center;">林依晨风采~~</h1>
                                    <table border="0" cellspacing="20" cellpadding="0">
                                        <tr>
                                            <td><img src="images/a1.jpg"></td>
                                            <td><img src="images/a2.jpg"></td>
                                            <td><img src="images/a3.jpg"></td>
                                        </tr>
                                        <tr>
                                            <td><img src="images/a4.jpg"></td>
                                            <td><img src="images/a5.jpg"></td>
                                            <td><img src="images/a6.jpg"></td>
                                        </tr>
                                        <tr>
                                            <td><img src="images/a7.jpg"></td>
                                            <td><img src="images/a8.jpg"></td>
                                            <td><img src="images/a9.jpg"></td>
                                        </tr>
                                    </table>




                                </div>

                            </td>
                        </tr>
                    </table>
                </td>
            </tr>


            <tr>
                <td id="footer" colspan="3">
                    <center>
                        <font color="white">林依晨个人网站</font>
                    </center>
                </td>
            </tr>
        </table>
        </center>

</body>

</html>

CSS样式代码


* {
    
    margin: 0;
    padding: 0;
}

body {
    
    font-family: Arial, '寰蒋闆呴粦', sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    background-color: #55462d;
    background-image: url(../images/bj.jpg);
}

.nav {
    
    height: 90px;
}

.nav tr {
    
    text-align: center;
}

.nav tr td a {
    
    color: #026a7b;
    padding: 9px 26px;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
}

.nav tr td a:hover,
.nav tr td a.active {
    
    background: pink;
}

.branding {
    
    position: relative;
    z-index: 9999;
}

#footer {
    
    height: 60px;
    color: #E8E1AA;
    font-weight: bold;
    background: url("../images/border-yellow.png") repeat-x left top;
}

.t1 {
    
    clear: both;
    padding-bottom: 20px;
    margin-bottom: 40px;
    background: url("../images/hr2.png") no-repeat bottom center
}

.main tr td table tr td .t1 table tr td p {
    
    text-align: justify;
}

六、如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。

七、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “️评论” “收藏” 一键三连哦！

2.【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题欢迎一起交流学习

本文链接：https://blog.csdn.net/m0_65484028/article/details/135512495

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

【无标题】jetbrains idea shift f6不生效_idea shift +f6快捷键不生效-程序员宅基地

文章浏览阅读347次。idea shift f6 快捷键无效_idea shift +f6快捷键不生效

node.js学习笔记之Node中的核心模块_node模块中有很多核心模块,以下不属于核心模块,使用时需下载的是-程序员宅基地

文章浏览阅读135次。Ecmacript 中没有DOM 和 BOM核心模块Node为JavaScript提供了很多服务器级别，这些API绝大多数都被包装到了一个具名和核心模块中了，例如文件操作的 fs 核心模块，http服务构建的http 模块 path 路径操作模块 os 操作系统信息模块// 用来获取机器信息的var os = require('os')// 用来操作路径的var path = require('path')// 获取当前机器的 CPU 信息console.log(os.cpus._node模块中有很多核心模块,以下不属于核心模块,使用时需下载的是

数学建模【SPSS 下载-安装、方差分析与回归分析的SPSS实现(软件概述、方差分析、回归分析)】_化工数学模型数据回归软件-程序员宅基地

文章浏览阅读10w+次，点赞435次，收藏3.4k次。SPSS 22 下载安装过程7.6 方差分析与回归分析的SPSS实现7.6.1 SPSS软件概述1 SPSS版本与安装2 SPSS界面3 SPSS特点4 SPSS数据7.6.2 SPSS与方差分析1 单因素方差分析2 双因素方差分析7.6.3 SPSS与回归分析SPSS回归分析过程牙膏价格问题的回归分析_化工数学模型数据回归软件

利用hutool实现邮件发送功能_hutool发送邮件-程序员宅基地

文章浏览阅读7.5k次。如何利用hutool工具包实现邮件发送功能呢？1、首先引入hutool依赖<dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.7.19</version></dependency>2、编写邮件发送工具类package com.pc.c..._hutool发送邮件

docker安装elasticsearch，elasticsearch-head，kibana，ik分词器_docker安装kibana连接elasticsearch并且elasticsearch有密码-程序员宅基地

文章浏览阅读867次，点赞2次，收藏2次。docker安装elasticsearch，elasticsearch-head，kibana，ik分词器安装方式基本有两种，一种是pull的方式，一种是Dockerfile的方式，由于pull的方式pull下来后还需配置许多东西且不便于复用，个人比较喜欢使用Dockerfile的方式所有docker支持的镜像基本都在https://hub.docker.com/docker的官网上能找到合..._docker安装kibana连接elasticsearch并且elasticsearch有密码

数据结构与算法(Python版)三：变位词判断问题_所谓“变位词”是指两个词之间存在组成字母的重新排列关系。如:heart和earth,pyth-程序员宅基地

文章浏览阅读370次。算法分析的概念程序和算法的区别算法是对问题解决的分步描述。程序是采用某种编程语言实现的算法算法分析主要就是从计算资源消耗的角度来评判和比较算法更高效利用计算资源，或者更少占用计算资源的算法就是好算法。计算资源指标一种是算法解决问题过程中需要的存储空间或内存存储空间收到问题自身数据规模的变化影响要区分哪些存储空间是问题本身描述所需，哪些是算法占用不容易另一种是算法的执行时间可以对程序进行实际运行测试，获得真实的运行时间运行时间检测Python中有一个time模块，可以获取计算机系统当前_所谓“变位词”是指两个词之间存在组成字母的重新排列关系。如:heart和earth,pyth

随便推点

Swift4.0_Timer 的基本使用_swift timer 暂停-程序员宅基地

文章浏览阅读7.9k次。//// ViewController.swift// Day_10_Timer//// Created by dongqiangfei on 2018/10/15.// Copyright 2018年飞飞. All rights reserved.//import UIKitclass ViewController: UIViewController { ..._swift timer 暂停

元素三大等待-程序员宅基地

文章浏览阅读986次，点赞2次，收藏2次。1.硬性等待让当前线程暂停执行，应用场景：代码执行速度太快了，但是UI元素没有立马加载出来，造成两者不同步，这时候就可以让代码等待一下，再去执行找元素的动作线程休眠，强制等待 Thread.sleep(long mills)package com.example.demo;import org.junit.jupiter.api.Test;import org.openqa.selenium.By;import org.openqa.selenium.firefox.Firefox.._元素三大等待