大一学生《Web编程基础》期末网页制作 HTML+CSS+JavaScript 网页设计实例 企业网站制作

news2024/11/8 21:04:18

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


⚽精彩专栏推荐👇🏻👇🏻👇🏻

【作者主页——🔥获取更多优质源码】
【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】


文章目录🌰

  • 一、网页介绍📖
  • 一、网页效果🌌
  • 二、代码展示😈
    • 1.HTML代码结构 🧱
    • 2.CSS样式代码 🏠
  • 三、个人总结😊
  • 四、更多干货🚀

一、网页介绍📖

1 网页简介:此作品为学生个人主页网页设计题材,HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码,这是一个不错的网页制作,画面精明,代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。

3.知识应用:技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了Logo(源文件)所需的知识点。


一、网页效果🌌

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


二、代码展示😈


1.HTML代码结构 🧱

代码如下(示例):以下仅展示部分代码供参考~

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
<!--     <link rel="stylesheet" href="css/iconfont.css"> -->
    <script language="JavaScript" src="js/iconfont.js"></script>
    <title>ONE PIECE</title>
</head>
<body>
    <header>
        <div class="navbar clearfix layout">
            <a href="#" class="logo">ONE PIECE</a>
            <ul class="nav">
                <li><a href="">Saying</a></li>
                <li><a href="1.html">Intro</a></li>
                <li><a href="2.html">Four emperor</a></li>
                <li><a href="3.html">Team</a></li>
                <li><a href="4.html">Contact</a></li>
            </ul>
        </div>
        <div class="introduce layout">
            <h1>Welcome to the new world</h1>
            <h2>「我是要成為海賊王的男人」</h2>
            <a class="button" href="#Saying">START YOUR JOURNEY</a>
        </div>
    </header>
    <main class="layout">
        <section id="Saying">
            <h2>Saying</h2>
            <p>你们知道这片海洋的尽头,有着世界最珍贵的宝物吗?而且得到它的人就可以成为海贼王,是不是让人热血沸腾?前所未有的冒险正等着我们!</p>
            <ul class="clearfix">
                <li>
                    <span class="iconfont icon-fon1"></span>
                    <h3>Title Language</h3>
                    <p>这世界,没错!一个追求自由任凭选择的世界,就在每个人的眼前无限地延伸。如果我们的梦想可以引导你的方向的话,就去追寻吧,在名为信念的旗帜下!</p>
                </li>
                <li>
                    <span class="iconfont icon-fon2"></span>
                    <h3>Title Language</h3>
                    <p>世代传承的意志、时代的变迁、人们的梦。这些都是阻挡不住的,只要人们继续追求自由的答案,这一切的一切都将永不停止。</p>
                </li>
                <li>
                    <span class="iconfont icon-fon3"></span>
                    <h3>Title Language</h3>
                    <p>财富、名声、势力---拥有全世界财富的海贼王哥尔罗杰,他在临刑前的一句话,让人们趋之若鹜、奔向大海!</p>
                </li>
            </ul>
        </section>
       
    </main>

    <footer class="layout">
        <p>Copyright © Your Website 2021</p>
        <div class="end">
            <a href="#"> Privacy Policy</a>
            <a href="#"> Terms of Use</a>
        </div>

    </footer>

</body>
</html>




2.CSS样式代码 🏠


/*reset*/
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family:PilGi, "Imprint MT Shadow","Brush Script MT";
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
/*reset*/
.clearfix::after{
    content: ' ';
    display: block;
    clear: both;
}
.layout{
    width: 1100px;
    margin: 0 auto;

}
.button{
    font-size: 20px;
    color: #fff;
    background: #f7ba3e;
    padding: 15px 25px;
    display: inline-block;
    border-radius: 5px;
}
.button:hover{
    background-color: #fdc42e;

}
body,html{
    height: 100%;
}
body{
    font:14px/1.5 "微软雅黑";
    background: #F7F7F7;
    color: #444;
}
header{
    height: 100%;
    min-heigt:800px;
    background: #000 url("../image/bg.png")  center center no-repeat;
    background-size: cover;
    position: relative;
    z-index: 2;
}
header::before{
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.3);
    z-index: -1;

}
header .logo{
    float: left;
    color: #f7ba3e;
    font-size: 32px;
    margin-top: 10px;
}
header .nav{
    float: right;
}
header .nav > li{
    float: left;
    margin: 10px;
}
header .nav > li > a{
    display: block;
    padding: 5px;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
}
header .nav > li > a:hover{
    background: #f7ba3e;
}
header .introduce{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fff;
}
header .introduce > h1{
    font-size: 32px;
}
header .introduce > h2{
    font-size: 50px;
    margin-top: 20px;
}
header .introduce .button{
    margin-top: 20px;
}

section{
    margin-top: 100px;
    text-align: center;
    background-color: #F7F7F7;
}
section:first-of-type{
    /*background-color: #FFF;*/
    box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.1);


}
section > h2{
    font-size: 40px;
}
section > p{
    margin-top: 10px;
    margin-bottom: 50px;
}
section > ul .iconfont{
    font-size: 60px;
}
section > ul > li{
    width: 33.33%;
    float: left;
    padding: 10px 20px;
}
section > ul p{
    margin-top: 10px;
}
section .family figure{
    width: calc(33.33% - 20px);
    margin: 10px;
    height: 400px;
    float: left;
    background-color: #fff;
    box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.3);
    border-radius: 20px;
}
section .family a{
    position: relative;
    display: block;
    height: 330px;

}
section .family img{
    width: 100%;
    height: 100%;
    border-top-left-radius:20px ;
    border-top-right-radius:20px ;
}
section .family figcaption{
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
}
section .family p{
    color: #666;
    margin-top: 5px;
    font-style: italic;
}
section .family a:hover::before {
    content: '⎈';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(253,208,72,0.8);
    color: #fff;
    font-size: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius:20px;
    border-top-right-radius:20px;

}

.describe{
    display: block;
    margin-top: 50px;
    text-align: center;
    border-radius: 20px;

}
.down{
    margin: 10px auto;
    list-style: none;
    display: flex;
    padding-left: 0;
    flex-direction: column;
    /*flex-wrap: wrap;*/
    position: relative;
    z-index: 99;
}
.down:after{
    content: ' ';
    display: block;
    height: calc(100% - 200px);
    width: 0;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    border:1px solid #ccc;
}
.down > li > span{
    box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.1);
    background-color: #fdc42e;
    border: 6px solid #eee;
    width:150px;
    height: 150px;
    color: #FFFFFF;
    border-radius: 50%;
    display: block;
    float:left;
    position:relative;
    right:50%;
}
.down > li{
    display: block;
    width: 150px;
    height: 200px;
    float:left;
    position:relative;
    left:50%;

}
.down > li img{
    height: 100%;
    width: 100%;
    border-radius: 50%;
    display: block;
}
.matter{
    width: 300px;
    height: 100px;
    float:left;
    position:relative;
    top:-50%;
    right:-90%;
    font-size: 18px;

}
.matter-left{
    float:right;
    position:relative;
    top:-50%;
    left:-180%;
}
.matter > p{
    color: #999;
    font-style: oblique;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:4;
}
.matter > h4,
.matter > p{
    float:left;
    margin: 0;
    text-align: left;

}
.matter-left > h4,
.matter-left > p{
    float:right;
    margin: 0;


}


section .group figure{
    width: calc(33.33% - 60px);
    margin: 30px;
    height: 300px;
    float: left;
    background-color: #fff;
    box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.3);
    border-radius: 50%;
    border: 5px solid #fff;
}
section .group p{
    position: relative;
    display: block;
    height: 100%;


}
section .group img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

section .group figcaption{
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
}
.icon:hover{
    background: #fdc42e;
}
.icon {
    width: 3em;
    height: 3em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    margin:10px;
    background: #222;
    border-radius: 50%;
}
section .p{
    font-style: inherit;
    width: 70%;
    margin: 100px auto;

}
.contact{
    width: 100%;
    height: 400px;
    background: #fff url("../image/plat.jpg") no-repeat center center;
    background-size: cover;
    box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.1);
    font-size: 20px;
}
.contact .private,
.email,
.cellphone{
    text-align: left;
    width: 45%;
}
.contact .message{
    text-align: right;
    display: inline-block;
    width: 45%;
    float: right;
}
.contact .message textarea{
    margin-top: 20px;
    width: 100%;
    height: 180px;
    font-size: 20px;
}
input[type="text"],
input[type="email"],
input[type="phone" ]{
    height: 50px;
    width: 100%;
    margin-top: 20px;
    border-radius: 5px;
    background: #F7F7F7;
    font-size: 20px;
}
.submit{
    display: inline-block;
    height: 50px;
    width: 200px;
    margin-top: 50px;

}
.submit > input[type="submit"]{
    background: #fdd048;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid darkgoldenrod;
    color: #fff;
    font-size: 20px;
}
.submit > input[type="submit"]:hover{
    background: #fdc42e;
}
footer{
    height: 100px;
}
footer p{
    margin-top: 30px;
    float: left;

}
footer .end{
    float: right;
    margin-top: 30px;

}
footer .end a{
    color: #fdc42e;
}
footer a:hover{
    text-decoration: underline;
}


三、个人总结😊

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

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

四、更多干货🚀

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

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

3.以上内容技术相关问题😈欢迎一起交流学习🔥在这里插入图片描述

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

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

相关文章

【Docker】第 1 章 Docker概述

1.1 Docker是什么 使用最广泛的开源容器引擎一种操作系统级的虚拟化技术依赖于Linux内核特性&#xff1a;Namespace&#xff08;资源隔离&#xff09;和Cgroups&#xff08;资源限制&#xff09; 一个简单的应用程序打包工具 1.2 Docker设计目标 提供简单的应用程序打包工具开…

传奇架设需要准备以下条件

传奇架设其实很简单 很多网友非常爱玩这款游戏&#xff0c;可能还有朋友不知道怎么架设这款游戏 今天特意写篇传奇架设教程&#xff0c;希望大家都能打造出真正属于自己的传奇 首先传奇架设需要准备以下几个软件 准备工具&#xff1a; 1、传奇服务端&#xff08;版本&#…

select组件切换tags时,联动的select组件内容清空

前言 记录在项目开发中遇到问题的解决方案&#xff0c;方便以后遇到快速解决&#xff01; 问题描述 在该react hooks 页面中&#xff0c;图纸计划附件表格是一个子组件。其中 【单体】和【专业】两个下拉select选择框&#xff0c;数据来源依赖于【厂区】。 后端给的接口&#…

9微电网两阶段鲁棒优化经济调度方法(MATLAB程序)

联系2645521500 复现文章&#xff1a; 微电网两阶段鲁棒优化经济调度方法——刘一欣&#xff08;中国电机工程学报&#xff09; 主要内容&#xff1a; 针对微电网内可再生能源和负荷的不确定性&#xff0c;建立了min-max-min 结构的两阶段鲁棒优化模型&#xff0c;可得到最…

SpringCloud微服务网关gateway

SpringCloud微服务网关gateway 网关简介 大家都都知道在微服务架构中&#xff0c;一个系统会被拆分为很多个微服务。那么作为客户端要如何去调用这么多的微服务呢&#xff1f; 如果没有网关的存在&#xff0c;我们只能在客户端记录每个微服务的地址&#xff0c;然后分别去用…

word电子版签名

word电子版签名 问题 word如何实现电子版签名 解决方案一 1 在纸上使用签字笔签名并进行拍照 2 对图片进行使用电子扫描 对于图片进行使用电子扫描&#xff0c; 可选择的app与微信小程序较多&#xff0c;可自行选择&#xff0c;对于app&#xff0c; 笔者推荐全能扫描王&a…

康沣生物通过上市聆讯:年亏损过亿 高瓴与比邻星是股东

雷递网 雷建平 12月7日康沣生物科技&#xff08;上海&#xff09;股份有限公司&#xff08;简称&#xff1a;“康沣生物”&#xff09;日前通过聆讯&#xff0c;准备在港交所上市。年亏损过亿康沣生物是一家专注于冷冻消融微创介入治疗技术在心血管领域应用的企业。康沣生物CEO…

我的年度用户体验趋势报告——由 ChatGPT AI 撰写

Our yearly UX trends report, but written by the ChatGPT AI作为今年用户体验集体计划的一部分&#xff0c;我们刚刚发布了年度用户体验状态报告。只是为了好玩&#xff0c;我们想测试ChatGPT人工智能对新一年用户体验趋势的看法&#xff0c;看看哪些预测一致&#xff0c;哪些…

移植第二天知识点整理

一&#xff1a; uboot源码移植准备工作 1.在家目录下创建一个<demo>文件夹 2.将en.SOURCES-stm32mp1-openstlinux-5.10-dunfell-mp1-21-11-17_tar_v3.1.0.xz文件夹拷贝到demo目录下 3.对en.SOURCES-stm32mp1-openstlinux-5.10-dunfell-mp1-21-11-17_tar_v3.1.0.xz进行解…

探秘微信业务优化:DDD从入门到实践

引言 | 本文作者从微信团队维护的带货类项目所遇卡点出发&#xff0c;尝试用领域驱动设计方法&#xff08;简称DDD&#xff09;&#xff0c;保障在快节奏、多人协作的项目迭代中&#xff0c;维持系统的可维护性、可拓展性、高内聚低耦合和稳定性。作者首先剖解相关概念原理&…

福建师范大学Android Room 技术浅谈

福建师范大学Android Room 技术浅谈 ## 前提告知该文章是用作课程评分,本文内容虽为原创&#xff0c;但也有参考。 1.Room的背景简介 处理大量结构化数据的应用可极大地受益于在本地保留这些数据。最常见的使用场景是缓存相关的数据&#xff0c;这样一来&#xff0c;当设备无…

JVM虚拟机内存结构详解,一文带你学习完80%的知识

程序计数器 定义 Program Counter Register 程序计数器&#xff08;寄存器&#xff09; 作用&#xff1a;是记录下一条 jvm 指令的执行地址行号特点&#xff1a; 是线程私有的&#xff0c;随着线程创建而创建&#xff0c;随着线程销毁而销毁不会存在内存溢出是一块较小的内存…

CVPR 2019|APCNet:基于全局引导的局部匹配度自适应金字塔上下文网络

&#x1f3c6;本篇论文发现了一种全局引导的局部匹配度&#xff08;Global-guided Local Affinity (GLA))特征&#xff0c;用于构造上下文语义信息。基于此特性&#xff0c;作者设计了自适应上下文模块&#xff0c;构建自适应金字塔上下文网络&#xff08;APCNet&#xff09;。…

手工测试2年面临职场危机,3个月进阶自动化测试后,老板终于留我了...

​前言 从学校到职场已经3年时间了&#xff0c;大学学的计算机专业&#xff0c;最开始事项从事java开发的&#xff0c;最终被现实打败&#xff0c;然后就从事了软件测试&#xff0c;现在已近过去了2年&#xff0c;为什么说是2年了&#xff0c;大学毕业有一段空窗期&#xff0c…

大数据面试之HDFS常见题目

大数据面试之HDFS常见题目 HDFS常见题目 1 HDFS读流程和写流程 1.1 读流程&#xff08;下载&#xff09; 文字描述&#xff1a; ​ 客户端将要读取的文件路径发送给 NameNode&#xff0c;NameNode 获取文件的元信息&#xff08;主要是 block 的存放位置信息&#xff09;返回…

美团外卖推荐智能流量分发的实践与探索

总第548篇2022年 第065篇美团外卖推荐团队在推荐算法的长期落地实践中&#xff0c;针对外卖业务情境化特点对排序模型进行深入探索与优化。本文介绍了面向情境化建模的“情境细分统一模型”建模思路&#xff0c;通过用户行为序列建模以及专家网络两个模块的优化&#xff0c;实现…

简单实用:css+html绘制常见图表

提到绘制图表&#xff0c;大家可能想到ECharts&#xff0c;其实&#xff0c;一些简单的图表可以直接通过csshtml实现&#xff0c;下面手把手带大家绘制&#xff0c;初学者也能轻松掌握。 1 csshtml绘制柱形图 我们先写一个超简单的html文件。 <div class"bargraph&q…

多维数组地址映射问题的求解(3维、4维为例)——数据结构

在上篇我大概介绍了多维数组的地址映射问题&#xff0c;但是不够完善&#xff0c;很多朋友还没有彻底学会&#xff0c;表示很头疼。这一方面的总结确实比较少&#xff0c;而且也很麻烦&#xff0c;但是不要怕&#xff0c;看完我的总结&#xff0c;相信你一定会有一直醍醐灌顶的…

《2022中国PaaS市场研究及选型评估报告》正式发布

《中智观察》第1741篇推送作者&#xff1a;海比研究院编辑&#xff1a;晓晓编审&#xff1a;赵满头图来源&#xff1a;中国软件网从2006年概念兴起至今&#xff0c;云计算已经在国内走过整整十五年的历程。云计算的三大模式SaaS、PaaS、IaaS从陌生到熟悉&#xff0c;从研发到应…

ML Journal6—OpenCV中的GUI功能

图像入门这是将在本教程中使用的图像borz.jpgimport cv2 as cv import sysimg cv.imread(borz.jpg) if img is None:sys.exit("Could not read the file.") cv.imshow("Display Window", img) k cv.waitKey(0) if k ord("s"):cv.imwrite(&quo…