用HTML+CSS做一个漂亮简单的个人音乐网页

最新推荐文章于 2024-04-14 02:07:49 发布
最新推荐文章于 2024-04-14 02:07:49 发布
阅读量643 收藏 3
点赞数
分类专栏： 网页设计与制作 文章标签： javascript大作业 web课程与设计 web期末网页作业 web前端期末大作业
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38514421/article/details/128231932
版权

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目

🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。

二、✍️网站描述

🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。

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

  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结构代码


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>音乐</title>
<link rel="stylesheet" href="css/css.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="toubu">
  <div class="div_01">音乐阁</div>
  <div class="div_02">
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="yueqi.html">乐器</a></li>
      <li><a href="mingxing.html">明星</a></li>
      <li><a href="gequ.html">歌曲</a></li>
      <li><a href="liuyan.html">留言</a></li>
    </ul>
  </div>
</div>
<div id="tupian">
  <div id="banner">
    <div id="prev"></div>
    <div id="next"></div>
    <ul id="play">
      <li style="display: block;"><img src="img/tupian2.jpg" alt="" /></li>
      <li><img src="img/tupian3.jpg" alt="" /></li>
    </ul>
    <ul id="button">
      <li>
        <div style="background: #A10000;"></div>
      </li>
      <li>
        <div></div>
      </li>
    </ul>
  </div>
</div>
<div id="section">
  <div class="div_left">
    <h2>专辑系列</h2>
    <div class="item"> <a href="info3.html">
      <div class="pic"><img src="img/img_01.jpg" alt=""></div>
      </a>
      <div class="box">
        <h3>新地球GENESIS</h3>
        <h4>2014年12月27日</h4>
        <p>《手心的蔷薇》是林俊杰、邓紫棋合唱的一首歌曲，由林怡凤填词，林俊杰谱曲，Terence Teo编曲，收录在林俊杰2014年12月27日发行的专辑《新地球GENESIS》中</p>
      </div>
    </div>
    <div class="item"> <a href="info2.html">
      <div class="pic"><img src="img/img_02.jpg" alt=""></div>
      </a>
      <div class="box">
        <h3>《Jay》</h3>
        <h4>2000年11月7日发行</h4>
        <p>《Jay》是周杰伦的首张音乐专辑，由周杰伦制作、作曲，方文山、徐若瑄等人作词，收录了10首歌曲，2000年11月7日发行。
          2001年，该专辑获得台湾金曲奖最佳流行音乐演唱专辑奖、IFPI香港唱片销量大奖十大销量国语唱片等奖项</p>
      </div>
    </div>
    <div class="item"> <a href="info1.html">
      <div class="pic"><img src="img/img_03.jpg" alt=""></div>
      </a>
      <div class="box">
        <h3>Beyond</h3>
        <h4>海阔天空</h4>
        <p>《海阔天空》是中国香港摇滚乐队Beyond演唱的一首粤语歌曲，由黄家驹作词、作曲，Beyond、梁邦彦共同编曲，收录在Beyond1993年5月14日由华纳唱片发行的粤语专辑《乐与怒》中</p>
      </div>
    </div>
    <div class="btn"><a href="gequ.html">查看更多</a></div>
  </div>
  
</div>
<div id="jiaobu">
  <p>网页底部</p>
</div>
</body>
</html>

💒CSS样式代码

@charset "utf-8";

body,
h1,
h2,
h3,
h4,
ul,
ol,
p {
	margin: 0;
	padding: 0;
}

body {
	background-color: #f4f4f4;
	font-family: "Microsoft YaHei";
	font-size: 12px;
}

ul,
ol {
	list-style: outside none none;
}

a {
	text-decoration: none;
}

#toubu {
	width: 1000px;
	height: 60px;
	overflow: hidden;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

#toubu .div_01 {
	line-height: 60px;
	font-size: 20px;
	font-weight: bold;
}

#toubu .div_02 ul li {
	display: inline-block;
	line-height: 60px;
}

#toubu .div_02 ul li a {
	display: block;
	width: 80px;
	line-height: 60px;
	color: #000;
	font-size: 16px;
	text-align: center;
}

#toubu .div_02 ul li a:hover {
	background: #cfcfcf;
}

#toubu .div_03 {
	line-height: 60px;
}

#toubu .div_03 a {
	display: inline-block;
	font-size: 16px;
	width: 50px;
	line-height: 60px;
	text-align: center;
	color: #000;
}

#tupian {
	width: 1000px;
	height: 500px;
	overflow: hidden;
	margin: 0 auto 40px;
}

#tupian img {
	width: 100%;
	height: 500px;
}

#section {
	width: 1000px;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
}

#section .div_left {
	width: 100%;
	height: auto;
	float: left;
}

#section .div_left h2 {
	width: 100%;
	height: 40px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 30px;
	color: rgba(0, 0, 0, .8);
}

#section .div_left .item {
	border-radius: 12px;
	float:left;
	width:31.3%;
	margin:1%;
	background: #fff;
	margin-bottom: 25px;
	overflow: hidden;
}

#section .div_left .item div.pic {
	width: 100%;
	height: 385px;
	overflow: hidden;
}

#section .div_left .item div.pic img {
	width: 100%;
	height: 385px;
	transition: all 0.4s linear;
}

#section .div_left .item div.pic:hover img {
	transform: scale(1.1);
}

#section .div_left .item .box {

	margin: 0 auto;
	padding: 25px ;
}

#section .div_left .item h3 {
	font-size: 20px;
	color: rgba(0, 0, 0, .8);
}

#section .div_left .item h4 {
	font-size: 12px;
	color: rgba(0, 0, 0, .6);
	padding-top: 10px;
}

#section .div_left .item p {
	font-size: 14px;
	color: rgba(0, 0, 0, .8);
	line-height: 1.6;
	padding: 30px 0;
}

#section .div_left .ww p {
	padding: 10px 0
}

#section .div_left .item a {
	font-size: 14px;
	color: #e54d42;
}

#section .div_left .item dl {
	display: flex;
	justify-content: space-between;
}

#section .div_left .item dl dd {
	display: flex;
	align-items: center;
	font-size: 13px;
}

#section .div_left .item dl dd img {
	padding: 0 2px 0 15px;
}

#section .div_left .btn {
	width: 100%;
	height: auto;
	padding: 20px 0;
	overflow: hidden;
	text-align: center;
}

#section .div_left .btn a {
	display: inline-block;
	width: 100px;
	height: 36px;
	line-height: 36px;
	border-radius: 36px;
	font-size: 14px;
	color: #fff;
	background: #0478BE;
}

#section .div_right {
	width: 345px;
	height: auto;
	float: right;
}

#section .div_right h2 {
	height: 40px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 30px;
	color: rgba(0, 0, 0, .8);
}

#section .div_right ul {
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-bottom: 25px;
	background: #fff;
	border-radius: 12px;
	text-align: center;
	padding-top: 20px;
}

#section .div_right ul li {
	display: inline-block;
	width: 100px;
	height: auto;
	padding-bottom: 30px;
}

#section .div_right ul li img {
	width: 50px;
	height: 50px;
	border-radius: 100%;
}

#section .div_right ul li h3 {
	padding: 5px 0;
}

#section .div_right ul li p {
	color: #777;
}

#section .div_right .btn a {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	text-align: center;
	line-height: 38px;
	border-radius: 5px;
	background: #e54d42;
	color: #fff;
	font-size: 14px;
}

#section .div_right .btn a:last-child {
	background: #0478be;
}

#jiaobu {
	width: 100%;
	height: auto;
	overflow: hidden;
	text-align: center;
	font-size: 14px;
	padding: 30px 0;
}

#jiaobu p {
	line-height: 1.8;
}

#jiaobu p img {
	vertical-align: middle;
	margin-right: 10px;
}

.inbanner {
	line-height: 300px;
	color: #fff;
	font-size: 30px;
	text-align: center;
	height: 300px;
	background: url(../img/a.jpg) no-repeat;
	background-size: cover;
	width: 1000px;
	margin: 20px auto;
	margin-top: 0;
	
	color: #fff;
}

#section .div_right.in ul li {
	width: 300px
}

.biaodan {
	width: 100%;
	margin-left: 210px;
	height: auto;
	margin-top: 50px;
}

.danbiaodan {
	width: 100%;
	margin-top: 20px;
}

.danbiaodan p {
	width: 100%;
	font-size: 14px;
	line-height: 34px;
	color: #555555
}

.layui-input {
	width: 578px;
	min-height: 32px;

	background: #fff;

}

.tijiao {
	width: 220px;
	height: 40px;
}

.tijiao button {
	background-color: #0478BE;
	text-align: center;
	width: 220px;
	margin-left: 175px;
	height: 40px;
	border-radius: 20px;
	font-size: 16px;
	color: #FFFFFF;
	border: none
}

.c {
	float: left;
	margin: 20px 0;
	width: 100%;
	font-size: 14px;
	line-height: 24px;
}

.c img {
	float: left;
	width: 300px
}

.c.fr img {
	float: right
}

.c div {
	float: right;
	width: 640px
}

.c div p {
	text-indent: 0;
	margin-top: 10px
}

.fr div {
	float: left
}

#banner {
	width: 1200px;
	height: 500px;
	margin: 0px auto;
	position: relative;
}

#banner #play {
	width: 1200px;
	height: 500px;
	list-style: none;
	position: absolute;
	top: 0px;
	left: 0px;
}

#banner #play li {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
}

#banner #play li img {
	border-radius: 10px;
	float: left;
}

#button {
	position: absolute;
	bottom: 20px;
	left: 470px;
	list-style: none;
}

#button li {
	margin-left: 10px;
	float: left;
}

#button li div {
	width: 12px;
	height: 12px;
	background: #DDDDDD;
	border-radius: 6px;
	cursor: pointer;
}

#tupian img {
	width: 100%;
}


.list{
	width: 1000px;
	margin: 0 auto;
}
.list ul li{
	width: 50%;
	float: left;
	padding: 0 10px;
	box-sizing: border-box;
	margin: 15px 0;
}
.list ul li img{
	width: 100%;
	height: 360px;
	display: block;
	object-fit: cover;
	border: 1px solid #555555;
}

.list-1{
	width: 1000px;
	margin: 0 auto;
}
.list-1 ul li{
	position: relative;
	width: 50%;
	float: left;
	box-sizing: border-box;
	height: 300px;
	margin-top: 40px;
}
.list-1 ul li img{
	
	width: 98%;
	height: 220px;
	object-fit: cover;
}
.list-1 ul li p{
	font-size: 18px;
}
.list-1 ul li  a{
	width: 100px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	background-color: #0478BE;
	border-radius: 10px;
	display: inline-block;
	color: #fff;
	margin-top: 20px;
}

.tin{
	width: 700px;
	margin: 50px auto;
}
.tin img{
	width: 100%;
	height: auto;
}
audio{
	margin: 20px auto;
	border: 1px solid #ccc;
}

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

21年程序员总结给编程菜鸟的16条忠告

  1. 入门期间不要盲目看太多书，找一本网上或身边有经验程序员推荐的教材，先系统的学习。
  2. 多看帮助文档，帮助文档就像一个游戏的玩法说明通关秘籍，该看就看别太自信。
  3. 菜鸟容易被对象、属性、方法等词汇迷惑？那是你连最基础知识都还没掌握。
  4. 不要忽视没一个看起来不起眼的问题，经常总结做到举一反三。
  5. 没积累足够知识和经验前，你是开发不出一个完整项目的。
  6. 把最新技术挂在嘴边，还不如把过时技术牢记心中。
  7. 活到老学到老，只有一招半式是闯不了江湖的。
  8. 看得懂的书，仔细看；看不懂的书，硬着头皮也要看完。
  9. 书读百遍其义自见，别指望读一遍就能掌握。
  10. 请把教程里的例子亲手实践下，即使案例中有完整源码。
  11. 把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。
  12. 不要漏掉教程中任何一个习题——请全部做完并做好笔记。
  13. 水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。
  14. 每学到一个难点的时候，尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。
  15. 做好保存源文件的习惯，这些都是你的知识积累。
  16. 遇到问题不要张口就问，要学会自己找答案，比如google、百度和w3cschool上都有很多编程相关资料，你只要输入关键字就能找到你的答案。

七、🎁更多干货

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

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

3.

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

在这里插入图片描述

STU学生网页设计
关注
专栏目录
html+css设计一个音乐网站
12-21
完整代码+实训报告）， 有问题请教私聊联系
很漂亮个人主页自带音乐源码
banzhuan678的博客
12-10 958
简介： 喜欢的可以下载，直接上传服务器压缩包解压就完事了，修改index.html内代码即可，可以自行添加后台。 本源码非常适合个人主页。 网盘下载地址： http://kekewangLuo.cc/tNOhZN1ShSf0 图片：
很漂亮动态个人主页自带音乐源码
www_5438xiazai的博客
12-10 1011
简介： 很漂亮个人主页自带音乐源码，喜欢的可以下载，直接上传服务器压缩包解压就完事了，修改index.html内代码即可，可以自行添加后台。本源码非常适合个人主页。 网盘下载地址： http://kekewl.org/4RBvXB3Txtf0 图片： [外链图片转存中…(img-574vJtz9-1639111448122)] ...
css文件插入背景音乐,在HTML中添加背景音乐
weixin_42561143的博客
08-03 9905
方法一：在源代码中编写以下几句代码将能实现在HTML网页内添加背景音乐；src="http://demo.mimvp.com/html5/take_you_fly.mp3">你的浏览器版本太低，不支持audio标签说明：1、使用autoplay="autoplay"，则背景音乐将在音网页打开后就自动马上播放。2、使用controls="controls"，则为了在页面内显示显示控件，如播放按...
css公共样式插入音乐,【超全】常用的css公共样式
weixin_39781930的博客
08-04 230
自己做前端也3年了，每次写项目的时候都会遇到一个简单的样式修改却要自己去取一个类名，然后添加样式。而且不同的地方又要复用。所以干脆静下心整理了一下自己在做项目的时候经常用到的样式。直接添加类名就可以得到自己希望的样式了，既简单也方便维护。大家需要可以保留，直接使用。此份不是基础默认设置。因为基础默认设置网上太多了。看后面是不是需要再整理一份全面的基础默认样式设置。@mainColor: #609a...
css文件插入背景音乐,关注css背景音乐代码
weixin_30695935的博客
08-03 2533
1.如何隐藏播放器而不影响音乐播放在css 文件的空白处添加以下代码：#mod_bgmusic{display:none}不显示播放器，但不影响音乐的播放。2.让baidu空间背景音乐支持多首歌曲了将音乐的网址写到一个记事本文件里，保存扩展名为mp3(1.mp3)，然后将这个文件找个空间传上去。回到空间中将背景音乐的地址设置为你刚刚做的文件就可以。格式如下(最好是wma文件，因为比较快)3.超酷背...
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
### 一、旅游网站设计与实现的关键知识点 #### 1.1 HTML5基本结构与语义化标签的应用 ...此外，对于已经有一定基础的学生而言，这些项目也能提供一个检验自己能力的机会，通过亲手实现这些功能，进一步巩固所学知识。
用HTML+CSS做一个漂亮简单的花店网页【免费的学生网页设计成品】
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
用HTML+CSS做一个漂亮简单的音乐网站
08-10
根据给定文件中的【标题】,【描述】,...总之，通过合理运用HTML、CSS和JavaScript，结合合适的工具和资源，可以创建一个既美观又实用的音乐网站。同时，遵循一定的设计原则，注重用户体验，可以使网站更具竞争力。
用HTML+CSS做一个漂亮简单的节日网页【元宵节】
08-10
例如，设计一个简单的留言表单，让用户留下祝福语或者对节日的感受。 ### 3. 页面间的交互与链接 - **超链接**: 利用`<a>`标签，可以在网页间建立超链接，方便用户浏览不同的内容。例如，每个节日都可以有一个独立...
html5唯美爱情表白动画网页代码
03-27
html5唯美爱情表白动画网页代码
java加一个音乐特效代码_博客园添加背景音乐,背景效果!
weixin_33404438的博客
02-27 295
博客园添加背景音乐,背景效果申请博客园JS权限申请话术 实例尊敬的博客园管理员：请求申请开通js权限，希望能够把自己的博客修饰的漂亮点，点缀自定义js插件效果，希望管理员可以批准，谢谢！开通以后就可以使用js代码进行装饰了流程图 添加网易云背景音乐单曲添加打开网易云登录账户,搜索自己喜欢的歌曲 复制代码到博客园 看看效果 添加歌单为背景音乐创建歌单 把喜欢的音乐添加到歌单 拷贝代码到博客园...
在HTML中插入音频和视频（详解）
热门推荐
Jin_Xiang123的博客
12-10 1万+
本篇文章主要介绍在HTML中插入音频和视频以及部分理论知识 和标签分别代表音频和视频元素，其中src属性指定要播放的音频或视频文件的URL。controls属性指示浏览器显示播放器控件，允许用户暂停、播放、音量控制等。可以通过其他属性和标签来设置进度条、播放列表、自动播放等功能。
html5添加音乐包括暂停
weixin_30879169的博客
08-03 101
<audio id="musicfx" loop="loop" autoplay="autoplay"> <source src="Besame Mucho.mp3" type="audio/mpeg"> </audio> <!-- <img src="images/music.png" onclick="document.getElemen...
JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果
最新发布
2201_75604580的博客
04-14 603
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
【网页设计】HTML做一个属于我的音乐页面（纯html代码）
网页设计与制作 | HTML+CSS+JS
01-05 845
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结
Web课程设计：音乐网站设计——风车乐栈在线音乐播放网站模板(1页) HTML+CSS+JavaScript
qq_524614081的博客
01-12 625
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 一、👨‍🎓
html5实现音频播放效果,用html5实现音频播放器
weixin_29502483的博客
06-07 322
许佳慧 - 公主范播放暂停上一首下一首//播放var myaudio=document.getElementById("audio")var btn1 = document.getElementById("btn-play");btn1.onclick = function(){if(myaudio.paused){myaudio.play();}}//var btn2 = document.ge...
用html+css做一个漂亮简单的个人网页
06-28
### 回答1： 好的，我可以为您提供一些关于用HTML和CSS制作漂亮简单个人网页的建议。 首先，您可以考虑使用一个简单的布局，例如使用一个顶部导航栏和一个主要内容区域。您可以使用HTML中的div元素来创建这些区域，并使用CSS来设置它们的样式。 其次，您可以选择一个漂亮的字体和颜色方案来增强您的网页的视觉吸引力。您可以使用CSS中的字体和颜色属性来设置这些样式。 另外，您可以添加一些图片和图标来增强您的网页的视觉效果。您可以使用HTML中的img元素来添加图片，并使用CSS来设置它们的大小和位置。 最后，您可以添加一些交互元素，例如按钮和链接，以使您的网页更加动态和易于导航。您可以使用HTML中的a和button元素来创建这些元素，并使用CSS来设置它们的样式。 希望这些建议能够帮助您制作一个漂亮简单的个人网页。 ### 回答2： 首先，设计一个布局，固定头部，主内容区域，和底部。可以采用响应式设计，使网页适配不同的设备。接下来，选择合适的颜色和字体，设置统一的风格。可以使用CSS框架如Bootstrap来加快开发速度并提高网页效果。 在头部区域，添加网站的标志和导航栏。导航栏应包括一些链接，如“主页”，“关于我”，“联系我”，并通过css实现实现悬浮高亮。 在主要内容区域，可以展示自己的介绍，工作经验以及项目经验，使用列表或网格将这些信息分组展示。可以包括一些图片或视频来帮助衬托内容。如有需要，可以包括一些动画效果，使页面动态化。 在底部区域，添加个人社交链接和版权信息。在CSS中设置适当的间距和颜色，使页面看起来更加生动。 最后，进行一些测试，确保网页不仅在电脑上显示良好，同时也在移动端上适配良好。此时，你就可以通过推广你的个人网站，展示你的网页制作技能，同时也展示更多你的工作经验和个人魅力。 ### 回答3： HTML和CSS是网页开发的两个基本组成部分，用它们来设计一个漂亮简单的个人网页是非常容易的。下面我将从网页结构、布局、配色和样式几个方面介绍如何用HTML和CSS设计一个漂亮简单的个人网页。 首先，确定网页的结构。一个合理的网页结构应该包含头部、主体和底部三个部分。头部通常包括网页标题、导航栏和页眉等元素；主体则是展示内容的核心部分；底部则包括版权信息等。在HTML中可以使用<header>、<main>和<footer>标签分别来定义这三个部分。 其次，设计网页布局。根据网页内容的不同，可以采用不同的布局方式。常见的布局方式有：单栏布局、两栏布局、三栏布局和板块式布局等。在CSS中，可以使用float属性或flex布局等来实现布局。 然后，选择合适的配色方案。一个漂亮的网页需要有统一、和谐的配色方案。可以选择一些常用的配色方案，如类似于蓝紫色调或暖和色调等。也可以使用一些配色工具，如Adobe Color等来自定义配色方案。需要注意的是，颜色的使用要注意整体感和协调性。 最后，添加样式。样式是营造网页整体风格的核心措施。可以选择一些现成的CSS框架，如Bootstrap、Tailwind CSS等来加速样式的添加。也可以通过自主编写CSS代码来实现样式的设置。需要注意的是，样式的设置要整体协调，视觉效果美观。 综上所述，用HTML和CSS设计一个漂亮简单的个人网页，需要从结构、布局、配色和样式等方面综合考虑，选择适合自己的方式实现，并确保整体协调、美观、易用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

STU学生网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值