1. Johngo学长首页
  2. 技术点详细复盘专题
  3. Python

大学生HTML个人网页作业作品：基于html css实现围棋网页（带报告4800字）

• Python • 阅读 46

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】

🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目

🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。

二、✍️网站描述

🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

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

三、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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个人网页作业作品：基于html css实现围棋网页（带报告4800字）
大学生HTML个人网页作业作品：基于html css实现围棋网页（带报告4800字）
大学生HTML个人网页作业作品：基于html css实现围棋网页（带报告4800字）
大学生HTML个人网页作业作品：基于html css实现围棋网页（带报告4800字）

; 五、⚙️ 网站代码

🧱HTML结构代码


doctype html>
<html>
<head>
<meta charset="utf-8">
<title>入门简介title>
<link href="css/入门简介.css" rel="stylesheet" type="text/css">
head>

<body>

    <header>
        <div class="head">
            <ul class="head_left">
                <li>设置首页li>
                <li>添加收藏li>
            ul>
            <ul class="head_right">
                <li>登录li>
                <li class="zhuce"><a href="注册界面.html">注册a>li>
                <li class="rumen"><a href="入门简介.html">入门a>li>
            ul>
        div>
        <audio class="backgroundmusic" src="audio/首页背景音乐.mp3" autoplay="autoplay" loop="loop" controls>audio>
    header>

    <nav>
        <div class="nav">
            <ul>
                <li><a class="shouyetiaozhuan" href="缘弈围棋网.html">a>li>
                <li><a class="qipuzixun" href="棋谱资讯.html">棋谱资讯a>li>
                <li><a href="#">对弈商城a>li>
                <li><a href="#">合作学校a>li>
                <li><a href="#">棋友会a>li>
                <li><a href="#">棋力排行榜a>li>
                <li><a href="#">世界赛事a>li>
            ul>
        div>
    nav>

    <div class="content">
        <div class="video">
            <div class="introduce">
                <p>一、星定式<br>星，是围棋盘上的一些固定位置。在现代19路围棋盘上，有九个星位，它们的坐标分别是（4，4）、（4，16）、（16，4）、（16，16）、（4，10）、（10，4）、（16，10）、（10，16）和（10，10）。棋盘最中心的一点，即坐标为（10，10）的星位又称作"天元"。
                星定式，是在围棋布局过程中，当一方首先占据了棋盘角上的星位之后，所引发的一些相对比较固定的，被公认为双方均不吃亏的下法。星定式与其他围棋定式一样，是棋手们经过无数次对弈实践所总结出的结果。然而，随着围棋的发展，星定式也在不断地变化和更新。下面来介绍一些常用的星定式。p>
            div>
            <div class="video1">
                <p>① 常见星定式——外势p>
                <video src="video/星定式——外势(常见）.mp4" controls>video>
            div>
            <div class="video2">
                <p>②常见星定式——实地p>
                <video src="video/星定式——实地（常见） 20-51-10.mp4" controls>video>
            div>
                <p class="introduce2">二、小目定式<br>小目的下法，看起来很安全，其实不然，它的变化实在太多，也相当复杂。从对它的挂来说，有小飞挂、大飞挂、一间挂、二间高挂等;守角也有小飞、大飞、一间、二间等不同守角至于各种夹攻更是不胜枚举。下面介绍四种最常用的小目定式。p>
            <div class="video3">
                <p>常见小目定式p>
                <video src="video/4个常见小目定式.mp4" controls>video>
            div>
        div>
    div>

    <footer>
        <div class="footer">
            <ul>
                <li><a href="#">家长监护a>li>
                <li><a href="#">比赛合作a>li>
                <li><a href="#">意见投诉a>li>
                <li><a href="#">客服中心a>li>
            ul><br>
            <p>Copyright©2021 缘弈围棋网xxx 版权所有<br>抵制不良游戏拒绝盗版游戏注意自我保护谨防受骗上当适度游戏益脑 沉迷游戏伤身合理安排时间享受健康生活p>
        div>
    footer>
body>
html>

💒CSS样式代码

body, ul, li, ol, dl, dd, dt, p，hl, h2, h3，h4, h5, h6, form, img{
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
body{
    background-image: url(../img/围棋背景图.png);
    background-size: cover;
    background-attachment: fixed;
}

header{
    width: 100%;
    background: #7E7979;
    height: 46px;
}
header .head{
    width: 1200px;
    margin: 0 auto;
}
header .head .head_left{
    float: left;
}
header .head .head_right{
    float: right;
}
header .head .head_left li{
    float: left;
    margin-right: 50px;
    color: #D1C9CA;
    height: 46px;
    line-height: 46px;
    cursor: pointer;
}
header .head .head_left li:hover{
    cursor: pointer;
    text-decoration: underline;
}
header .head .head_right li{
    float: right;
    margin-left: 50px;
    color: #D1C9CA;
    height: 46px;
    line-height: 46px;
    cursor: pointer;
}
header .head .head_right li a{
    color: #D1C9CA;
    text-decoration: none;
}
header .head .head_right li:hover{
    cursor: pointer;
    text-decoration: underline;
}
.backgroundmusic{
    height: 30px;
    margin-left: 215px;
    margin-top: 6px;
    border: solid hsla(0,2%,48%,1.00);
}

nav{
    width: 100%;
    background: hsla(0,6%,79%,1.00);
    height: 100px;
    position: absolute;
    border-bottom: solid hsla(0,2%,48%,1.00);
}
nav .nav{
    width: 1200px;
    margin: 0 auto;
}
nav ul{
    float: left;
}
nav ul li{
    float: left;
    margin-right: 50px;
    font-size: 25px;
    height: 50px;
    line-height: 95px;
}
.nav ul li a{
    text-decoration: none;
    color: hsla(0,0%,0%,1.00);
    font-size: 28px;
    font-family: 楷体;
}
.nav ul li a:hover{
    color: hsla(0,0%,100%,1.00);
}
.shouyetiaozhuan{
    display: inline-block;
    height: 100px;
    width: 170px;
    background: url(../img/缘弈围棋网.png) no-repeat center left;
    background-size: 100%;
}
.shouyetiaozhuan:hover{
    cursor: pointer;
    box-shadow: 0px 5px 5px 5px hsla(0,2%,48%,1.00);
}

.content{
    width: 1200px;
    height: 1800px;
    margin: 0 auto;
    position: relative;
    top: 200px;
}
.video{
    width: 1200px;
    height: 1800px;
}
.introduce{
    text-align: left;
    font-size: 20px;
    font-weight: 800;
    line-height: 40px;
    width: 900px;
    height: 350px;
    position: absolute;
    top: 10px;
    left: 200px;
}
.video1{
    width: 435px;
    height: 440px;
    margin: 0 auto;
    position: absolute;
    top: 380px;
    left: 200px;
    float: left;
}
.video1 p{
    text-align: left;
    font-size: 25px;
    font-weight: 800;
    font-style: oblique;
}
.video1 video{
    position: absolute;
    top: 75px;
}
.video2{
    width: 435px;
    height: 500px;
    margin: 0 auto;
    position: absolute;
    top: 380px;
    left: 660px;
}
.video2 video{
    position: absolute;
    top: 75px;
}
.video2 p{
    text-align: left;
    font-size: 25px;
    font-weight: 800;
    font-style: oblique;
}
.introduce2{
    text-align: left;
    font-size: 20px;
    font-weight: 800;
    line-height: 40px;
    width: 900px;
    height: 200px;
    position: absolute;
    top: 980px;
    left: 200px;
}
.video3{
    width: 435px;
    height: 500px;
    margin: 0 auto;
    position: absolute;
    top: 1200px;
    left: 423px;
}
.video3 p{
    text-align: center;
    font-size: 25px;
    font-weight: 800;
    font-style: oblique;
}

footer{
    width: 100%;
    height: 180px;
    background: hsla(0,2%,48%,1.00);
    text-align: center;
    color: #fff;
    margin-top: 480px;
}
footer .footer{
    width: 1200px;
    height: 127px;
    margin: 0 auto;
    position: relative;
}
footer p{
    line-height: 50px;
}
footer ul{  text-align: center;}
footer ul li a{
    float: left;
    margin-right: 50px;
    font-size: 20px;
    height: 50px;
    line-height: 60px;
    padding-left: 12.2%;
    color: #fff;
}
footer ul li a:hover{
    color: hsla(0,0%,0%,1.00);
}

六、🥇 如何让学习不再盲目

第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识

第三、学到了就要用到

有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容， &#x8BF7; &#x201C;&#x1F44D;&#x70B9;&#x8D5E;&#x201D; &#x201C;&#x270D;&#xFE0F;&#x8BC4;&#x8BBA;&#x201D; &#x201C;&#x1F499;&#x6536;&#x85CF;&#x201D;一键三连哦！

  1. &#x1F497;&#x3010;&#x1F447;&#x1F3FB;&#x1F447;&#x1F3FB;&#x1F447;&#x1F3FB;&#x5173;&#x6CE8;&#x6211;| &#x1F4AC;&#x83B7;&#x53D6;&#x66F4;&#x591A;&#x6E90;&#x7801; | &#x4F18;&#x8D28;&#x6587;&#x7AE0;&#x3011;带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

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

大学生HTML个人网页作业作品：基于html css实现围棋网页（带报告4800字）

Original: https://blog.csdn.net/VX_WJ88950106/article/details/128313476
Author: IT芷君
Title: 大学生HTML个人网页作业作品：基于html css实现围棋网页（带报告4800字）

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/778225/

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
0

【自取】最近整理的，有需要可以领取学习：



Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言 刷题答案下载！

大家都在看

亲爱的 Coder【最近整理，可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球