web期末作业设计网页：明星网站设计——蔡徐坤(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品网页设计作业 web网页设计与开发 html实训大作业

最新推荐文章于 2024-06-05 16:29:44 发布

深巷积木青春

最新推荐文章于 2024-06-05 16:29:44 发布

阅读量756

点赞数 13

文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_62153875/article/details/134830742

版权

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。

作品目录

一、📚网站介绍

二、🔗网站效果

🧩1.图片演示

三、💒网站代码

二、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站首页</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<audio src="media/music.mp3" controls="controls" loop="true" autoplay="true" hidden="true">
    <embed src="media/music.mp3" />
    <bgsound src="media/music.mp3"/>
	</audio>
</head>

<body>
<a name="top" id="top"></a>
<div id="header">
   <ul>
    <li><a href="index.html">网页首页</a></li>
    <li><a href="contact.html">留言板</a></li>
    <li><a href="index01.html">个人图片</a></li>
    <li><a href="index02.html">主要作品</a></li>
  </ul>
</div>
<div id="img"><img src="images/banner3.jpg" width="1400" height="450" /></div>
<div id="concent1">
  <div id="lc">
  <h3>个人信息</h3>
  <table width="100%" align="center">
  <tr>
    <td align="center">&nbsp;</td>
    </tr>
  <tr>
    <td align="center"><a href="#"><img src="images/xz.jpg" width="80%" /></a></td>
    </tr>
  <tr>
    <td align="center">中文名：蔡徐坤</td>
    </tr>
  <tr>
    <td align="center">出生地：浙江温州</td>
    </tr>
  <tr>
    <td align="center">出生日期：1998年8月2日</td>
    </tr>
  <tr>
    <td align="center">毕业院校：深圳市南山区第二实验学校</td>
    </tr>
  <tr>
    <td align="center">职    业：歌手、演员、音乐制作人</td>
    </tr>
  <tr>
    <td align="center">经纪公司：蔡徐坤工作室 </td>
      </tr>
      <tr>
    <td align="center">主要成就：第十五届MAHB年度先生盛典年度先生奖
2019智族GQ年度人物盛典年度人气偶像奖
中牙友好大使暨中牙杰出青年领袖人物
2020TMEA音乐盛典年度最具号召力歌手、最具影响力创作歌手
   </td>
      </tr>
      <tr>
    <td align="center">&nbsp;</td>
      </tr>
       
  
</table>

   
  </div>
  <div id="rm">
    <p>&nbsp;</p>
    <p>蔡徐坤（KUN），1998年8月2日出生于浙江省温州市，户籍湖南吉首 ，中国内地男歌手、演员、原创音乐制作人、MV导演 。</p>
  <p>2012年8月，蔡徐坤参演的偶像剧《童话二分之一》播出，由此开始步入大众视线。2018年1月，参加竞演类综艺节目《偶像练习生》并以总票数第一正式出道，成为限定男团NINE PERCENT队长 [3] ；8月，发行首张EP《1》，获2018亚洲新歌榜年度盛典最受欢迎潜力男歌手奖 ；随后，他还发行原创单曲《Wait Wait Wait》，并携手格莱美奖最佳MV获奖导演戴夫·迈尔斯打造歌曲MV。2019年1月，被授予“中牙友好大使暨中牙杰出青年领袖人物”称号 ；3月，成功开启横跨三个国家、六座城市的海外公演《ONE》 ；7月，发行首张数字专辑《YOUNG》 ；10月，携手中国儿童少年基金会共同设立“葵计划爱心基金”。</p>
  <p>2020年3月，加盟《青春有你第二季》担任青春制作人代表  ；4月9日，原创公益歌曲《Home》全网上线 ；随后，加盟户外竞技真人秀《奔跑吧第四季》担任常驻MC ；7月，获第27届东方风云榜最佳男歌手等三个奖项。2021年1月，获得第二届TMEA腾讯音乐娱乐盛典年度最具影响力唱作歌手和年度最具号召力歌手两个奖项，单曲《情人》获得年度十大金曲奖；4月13日，发行个人创作专辑《迷》 ；7月17日，于北京凯迪拉克中心举办首场个人巡回演唱会，同年获第三届TMEA腾讯音乐娱乐盛典年度最具影响力制作人等多项荣誉  。</p>
  <p>2023年1月24日，参加《奋进新征程——2023中国网络视听年度盛典》，演唱歌曲《默片》。</p>
  <p>&nbsp;</p>
<video width="100%" controls autoplay loop >
  			<source src="media/1.mp4" type="video/ogg">
 			<source src="media/1.mp4" type="video/mp4">
			Your browser does not support the video tag.
		</video>  <p>&nbsp;</p>
  </div>
</div>
<div id="footer">深巷积木青春 © 版权所有 </div> 
</body>
</html>

🏠CSS样式部分代码

@charset "utf-8";
/* CSS Document */

body {
	font-size: 14px;
	color: #333;
	padding: 0px;
	width: 1400px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #F8F7FC;
}
h2 {
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	height: 50px;
	padding-top: 0px;
	padding-right: 100px;
	padding-bottom: 0px;
	padding-left: 0px;
	line-height: 50px;
}
h2 em  {
	font-style: normal;
	float: right;
	font-size: 14px;
	color: #3A556D;
}
h2 a  {
	text-decoration: none;
}
h3 {
	background-image: none;
	padding: 0px;
	height: 55px;
	width: 345px;
	font-size: 18px;
	color: #3A556D;
	font-weight: bold;
	text-align: center;
	line-height: 55px;
	letter-spacing: 3px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	border: 3px dashed #3A556D;
	border-radius: 10px;
}
.p {
	text-align:center;
}
.p span {
	line-height: 60px;
	vertical-align:middle;
}
.input {
	width: 300px;
	height:30px;
	vertical-align:middle;
	outline:none;
border:1px solid #e0e0e0;
}
.button {
	height: 40px;
	width: 150px;
	margin-right: auto;
	margin-left: auto;
	color: #FFFFFF;
	background-color: #009966;
	margin-top: 40px;
	outline: none;
	border: none;
	border-radius: 5px;
}






.img {
	width:100%;
}
.img2 {
	padding: 0px;
	margin-top: 30px;
	margin-right: 0px;
	margin-bottom: 30px;
	margin-left: 50px;
}



#header {
	height: 70px;
	background-image: none;
	padding-top: 80px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 200px;
	border-bottom-width: 3px;
	border-bottom-style: dashed;
	border-bottom-color: #3A556D;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
#header ul {
	list-style-type: none;
	padding: 0px;
	width: 1150px;
	margin: 0px;
}
#header ul li {
	float: left;
	width: 25%;
	margin: 0px;
	padding: 0px;
	height: 58px;
	line-height: 58px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #AA010B;
}
#header ul li a {
	color: #3A556D;
	text-decoration: none;
	display: block;
	height: 55px;
	width: 50%;
	font-weight: bold;
}
#header ul li a:hover {
	background-image: none;
	color: #FFF;
	background-color: #3A5587;
	border-radius: 10px;
}




#img {
	padding: 0px;
	height: 450px;
	margin: 0px;
	width: 300px;
}

#concent {
	height: 780px;
	padding-top: 50px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	border-top-width: 3px;
	border-top-style: dashed;
	border-top-color: #3A556D;
}
#concent p {
	padding: 0px;
	width: 1200px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	line-height: 250%;
	letter-spacing: 2px;
	text-indent: 25px;
}
#concent .sc {
	padding: 0px;
	height: 5px;
	width: 1300px;
	margin-top: 30px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-image: url(../images/sc.png);
	background-repeat: no-repeat;
}

#concent ul {
	margin: 0px;
	height: 450px;
	width: 500px;
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 100px;
	list-style-type: none;
	float: left;
}
#concent ul li {
	line-height: 38px;
	height: 38px;
	margin-top: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
	width: 500px;
	text-indent: 10px;
}
#concent1 {
	height: 100%;
	border-top-width: 3px;
	border-top-style: dashed;
	border-top-color: #3A556D;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#concent1 table {
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	line-height: 38px;
	height: 38px;
	text-align: center;
}
#concent1 #lc {
	height: 755px;
	width: 347px;
	float: left;
	margin: 0px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 3px;
}
#concent1 #lc ul {
	list-style-type: none;
	width: 100%;
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-left: 0px;
	height: 280px;
}
#concent1 #lc ul li {
	line-height: 45px;
	font-size: 14px;
	font-weight: bold;
	color: #3A556D;
	margin: 0px;
	padding:0px
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #3A556D;
	
}
#concent1 #lc ul li a {
	color: #3A556D;
	text-decoration: none;
}
#concent1 #lc ul li a:hover {
	color:#FF0000;
}
#concent1 #lc img {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 20px;
}





#concent1 #rm {
	width: 1000px;
	padding:0 0px 0 50px;
	float: left;
	height: 100%;
}
#concent1 #rm dl {
	width: 458px;
	height: 320px;
	padding: 10px;
	margin: 10px;
	float: left;
	text-align: center;
	border: 1px solid #E2E2E2;
}
#concent1 #rm dl dt {
	float:left;
	
}
#concent1 #rm dl dd {
	margin: 0px;
	line-height: 35px;;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#concent1 #rm ul {
	padding: 0px;
	list-style-type: none;
	width: 500px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	
	float:left;
	
}
#concent1 #rm ul li {
	line-height: 45px;
	margin: 0px;
	padding:0 20px 0 20px;
	height: 45px;
	letter-spacing: 2px;
	text-align: left;
}
#concent1 #rm p strong {
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 50px;
	height: 80px;
	line-height: 80px;
}



#concent1 #rm2 {
	width: 1050px;
	float: right;
	height: 100%;
}
#concent1 #rm2 dl {
	width: 480px;
	height: 580px;
	float: left;
}
#concent1 #rm2 dl dt {
	height: 480px;
	width: 300px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#concent1 #rm2 dl dd {
	margin: 0px;
	padding: 0px;
	text-align: center;
	line-height: 200%;
}
#concent1 p {
	padding: 0px;
	line-height: 250%;
	
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-indent: 25px;
	letter-spacing: 2px;
}
#concent1 #rm dl dd a {
	color: #333333;
	text-decoration: none;
}
#concent1 #rm dl dd a:hover {
	color: #FF0000;
}
#concent1 .tu {
	padding: 0px;
	float: left;
	height: 300px;
	width: 400px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 50px;
}
#concent1 .tu a {
	height: 300px;
	width: 400px;
	display: block;
}
#concent1 .tu a:hover {
	display: block;
	height: 300px;
	width: 400px;
	box-shadow: 0 12px 12px rgba(150,150,0,0.2);
	border: 3px solid #FFFF00;
}
#concent1 .tu a img {
	height: 300px;
	width: 400px;
}
#footer {
	margin: 0px;
	padding: 0px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	font-weight: normal;
	text-align: center;
	letter-spacing: 2px;
	background-color: #B0BAC6;
	clear: both;
}

五、🎁更多源码

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

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

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

深巷积木青春

关注

13
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
web期末作业设计网页：明星网站设计——蔡徐坤(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品网页设计作业 web网页设计与开发 html实训大作业

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
复制链接

扫一扫