程序创新大会报名表2.0（html+css）

最新推荐文章于 2023-07-09 10:41:54 发布

王宇辉

最新推荐文章于 2023-07-09 10:41:54 发布

阅读量332

点赞数

分类专栏： java知识体系文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_42688085/article/details/123134388

版权

本文是Java学习项目的前端部分回顾，主要内容包括HTML和CSS的应用，展示了程序创新大会报名表的实现。文章提供了需求介绍、代码截图和思路分析，附带了百度网盘的资料链接，包含笔记、代码和其他相关资源。

摘要由CSDN通过智能技术生成

写再前面的话

1，本文为Java学习五部分第二部分所有项目回顾（前端练习系列-对应Java体系第二部分第二阶段内容）这些再前面的博客里有，再写会重复的。但是一想到我设计的第五部分第一阶段本来就要把那些值得记录的项目练习单独整理一遍。所以，理应如此，我会写的更好的。
2，整体项目系列博客（包括整体快递e站系列，数据库练习系列，前端练习系列，Javaweb系列，SSM系列，微服务系列，实战系列，等）
3，完整的Java体系链接（比你想的更多的Java内容），感谢一下开课吧。

需求介绍：

在这里插入图片描述

代码运行成功截图：

在这里插入图片描述

思路分析：

整个前端系列都没有让我写这里的想法，而且我以后应该也不会写前端。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大会报名表</title>
		<style>
		/*去除浏览器的默认样式*/
			*{
     
				margin: 0;
				padding: 0;
				color: #333;
			}
			a{
     
				text-decoration: none;
				color: #333;
			}
			body {
     
            text-align: center;
            background-image: url("./img/3.png");
            background-size: 100% 100%;
            font-family: LiSu;
            background-attachment: fixed"
        	}
			.titleColor{
     
				color:#ffa133;
			}
			.w1200{
     
				background-color: lavenderblush;
				margin: 0 auto;
			}
			
			.head-nav{
     
				background-color: khaki;
				height: 60px;
			}
			.logo{
     
				background-color: lightcyan;
				margin: 0 auto;
			}
			.chanal-nav{
     
				background-color: lightgreen;
				height: 45px;
				margin: 0 auto;
			}
			.type{
     
				background-color: #ffa133;
				font-size: 24px;
				font-weight: bold;
				width: 190px;
				margin: auto;
				padding-left: 18px;
				box-sizing: border-box;
				float: left;
			}
			.nav{
     
				list-style: none;
				float: left;
			}
			.nav a{
     
				font-size: 4px;
			}
			.nav li{
     
				float: left;
				padding: 0 15px;
			}
			.split{
     
				color: #aaa;
				height:45px;
			}
			
			.bg-lightgray{
     
				background-color: #f6f6f6;
				height: 1000px;
			}
			.clear{
     
				clear: both;
			}	
		</style>
	</head>
	<body>
		
		<!----首页---顶部深灰色背景  start-->
			<div class="w1200" >
				<h1 align="center">哈尔滨学院</h3>
			</div>

		<!----首页---顶部深灰色背景 end -->
		<!----上部分--logo +搜索+导航  start-->
		<div class="head-nav">
			<div class="w1200 logo" img><img src="./img/1.png" usemap="#myMap"  width="1750px" height="120px"/></div>
			<div class="w1200 chanal-nav">
				<h2