大学生HTML个人网页作业作品：基于html css实现围棋网页（带报告4800字） |
您所在的位置：网站首页 › 前端页面制作工具 › 大学生HTML个人网页作业作品：基于html css实现围棋网页（带报告4800字） |
大学生HTML个人网页作业作品：基于html css实现围棋网页（带报告4800字）
|
🎉精彩专栏推荐 💭文末获取联系✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主💂 作者主页: 【主页——🚀获取更多优质源码】🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷代码) 继续更新中…】🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！ 📂文章目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站演示 五、⚙️ 网站代码 * 🧱HTML结构代码 💒CSS样式代码 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨🎓网站题目🍵茶文化网站、🏳️🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。 二、✍️网站描述🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。 🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定) 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。 所有页面相互超链接，可到三级页面，有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>
入门简介title>
head>
设置首页li>
添加收藏li>
ul>
登录li>
注册a>li>
入门a>li>
ul>
div>
audio>
header>
a>li>
棋谱资讯a>li>
对弈商城a>li>
合作学校a>li>
棋友会a>li>
棋力排行榜a>li>
世界赛事a>li>
ul>
div>
nav>
一、星定式星，是围棋盘上的一些固定位置。在现代19路围棋盘上，有九个星位，它们的坐标分别是（4，4）、（4，16）、（16，4）、（16，16）、（4，10）、（10，4）、（16，10）、（10，16）和（10，10）。棋盘最中心的一点，即坐标为（10，10）的星位又称作"天元"。 星定式，是在围棋布局过程中，当一方首先占据了棋盘角上的星位之后，所引发的一些相对比较固定的，被公认为双方均不吃亏的下法。星定式与其他围棋定式一样，是棋手们经过无数次对弈实践所总结出的结果。然而，随着围棋的发展，星定式也在不断地变化和更新。下面来介绍一些常用的星定式。p> div> ① 常见星定式——外势p> video> div> ②常见星定式——实地p> video> div> 二、小目定式小目的下法，看起来很安全，其实不然，它的变化实在太多，也相当复杂。从对它的挂来说，有小飞挂、大飞挂、一间挂、二间高挂等;守角也有小飞、大飞、一间、二间等不同守角至于各种夹攻更是不胜枚举。下面介绍四种最常用的小目定式。p> 常见小目定式p> video> div> div> div> 家长监护a>li> 比赛合作a>li> 意见投诉a>li> 客服中心a>li> ul> Copyright©2021 缘弈围棋网xxx 版权所有抵制不良游戏拒绝盗版游戏注意自我保护谨防受骗上当适度游戏益脑 沉迷游戏伤身合理安排时间享受健康生活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.如果我的博客对你有帮助、如果你喜欢我的博客内容， 请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！ 💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！3. 以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
Original: https://blog.csdn.net/VX_WJ88950106/article/details/128313476Author: IT芷君Title: 大学生HTML个人网页作业作品：基于html css实现围棋网页（带报告4800字） 相关阅读 Title: gradle7.0 打包插件发布到本地maven仓库网上找了好久，终于找到两种可以满足要求的方式。 方式1、发布插件到本地指定目录参考文章链接gradle 7.x 如何开发一个自定义 Plugin – 掘金 gradle 7.x 如何开发一个自定义 Plugin新建一个 Groovy Model as 没法直接创建 groovy model，可以先创建一个 java model，然后修改 gradle 配置
plugins {
id 'groovy'
id 'maven-publish'
}
dependencies {
implementation gradleApi()
implementation localGroovy()
implementation 'com.android.tools.build:gradle:3.5.2'
implementation 'org.javassist:javassist:3.28.0-GA'
}
这一步可能会报错： Build was configured to prefer settings repositories over project repositories but repository 'Gradle Libs' was added by unknown code可以在 settings.gradle 中，把这句话注释掉
创建 Plugin 首先创建固定目录文件： resources/META-INF/gradle-plugins/package.properties
文件中写入如下内容： implementation-class=xyz.mlya.javaassist.ModifyPlugin这个是作为我们的入口文件。
发布 Plugin 到本地 maven 仓库
publishing {
publications {
maven(MavenPublication) {
groupId = 'xyz.mlya.javaassist'
artifactId = 'modify'
version = '1.0.0'
from components.java
}
}
repositories {
maven {
url = "../repo"
}
}
}
这个时候，我们运行 gradle 命令 ./gradlew publish （注意是publish task任务，而不是其他任务，比如publishToMavenLocal task任务） 执行成功后，我们会看到，在我们的项目目录下，会创建 repo 目录，里面有我们的包名的路径和里面的 jar 文件。
在项目中引入这个 Plugin 在 settings.gradle 中，添加本地仓库，注意，是往 PluginManagement 中添加仓库 pluginManagement { repositories { maven { url('./repo') } gradlePluginPortal() google() mavenCentral() } }
在项目中引入 Plugin，还需要在项目的 build.gradle 中引入： buildscript { dependencies { classpath 'xyz.mlya.javaassist:modify:1.0.0' } }这里我还是使用 buildscript 的方式引入（因为对 gradle 不熟悉），起码能 work 起来，有什么好的建议可以提给我，感激不尽。 然后，在 app model 里引入 plugin plugins { id 'com.android.application' id 'xyz.mlya.javaassist' } 复制代码再 sync 一下，我们会看到控制台输出了我们的那句话，说明我们的插件引入成功了。
方式2：发布插件到本地maven仓库
这个之前自己要写过，参考链接为：开发Gradle插件并上传至本地maven库_小刘学安卓的博客-CSDN博客 Original: https://blog.csdn.net/liuqinhou/article/details/127825484Author: 小刘学安卓Title: gradle7.0 打包插件发布到本地maven仓库 原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/279948/ 转载文章受原作者版权保护。转载请注明原作者出处！ |
【本文地址】