【Java程序员来写一个简单的HTML前端——映纷创意官网】

最新推荐文章于 2023-05-22 19:57:19 发布
最新推荐文章于 2023-05-22 19:57:19 发布
阅读量1.2k 收藏
点赞数 2
分类专栏： 前端练习 文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72254454/article/details/126393980
版权

官网页面：INFINI | 映纷创意 (infinistudio.cn)

布局分析：

映纷创意.css

*{
	margin: 0;
	padding: 0;
}
body{
	background-color: #F2F2F2;
	/*color: rgb(173, 173, 173);*/
}
/*导航栏部分*/
.nav{
	/*border: 1px solid red;*/
	width: 100%;
	height: 100px;
	background-color: #000000;
	opacity: 0.75;
	box-shadow: 2px 2px 10px black;
	position: fixed;
	left: 0;
	top: 0;
	text-align: center;
	z-index: 99;
}
/*导航栏上图片*/
.nav .img{
	/*border: 1px solid blue;*/
	margin-top: 20px;
}
/*导航拦上链接*/
.nav .linked{
	/*border: 1px solid blue;*/
	position: absolute;
	bottom: 5px;
	width: 100%;
}
/*超链接部分*/
.nav .linked a{
	color: #898989;
	margin-left: 110px;
	text-decoration: none;
}
.nav .linked a:hover{
	color: #FFF;
}
/*网页主题内容*/
.bigContent{
	margin: 120px auto;
	width: 85%;
	/*border: 1px solid red;*/
}
/*轮播图部分*/
.scrollImg{
	width: 100%;
	height: 540px;
	background-image: url(../img/scrollImg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/*轮播图标题*/
.scrollImg .scrollTitle{
	/*border: 1px solid red;*/
	position: absolute;
	width: 100%;
	height: 35px;
	bottom: 0;
	text-align: center;
	line-height: 35px;
	background-color: #000000;
	opacity: 0.5;
	color: #F2F2F2;
	font-size: 16px;
}
/*页面指示器*/
.scrollCircle{
	width: 100%;
	height: 30px;
	text-align: center;
}
/*页面指示器圆圈*/
.scrollCircle span{
	width: 5px;
	height: 5px;
	border: 1px solid #999;
	display: inline-block;
	border-radius: 50%;
	background-color: #999;
	cursor: pointer;
	margin:0 8px;
}
/*页面指示器圆圈点击后变为空心圆圈*/
.scrollCircle span:active{
	background-color: #F2F2F2;
}
/*广告文本部分*/
.adsText{
	width: 100%;
	text-indent: 2em;
	font-size: 1em;
	color: #666;
	font-family: "微软雅黑";
	border-top: 1px solid #e8e8e8;
	border-bottom: 1px solid #e8e8e8;
	padding: 2% 0;
	margin-top: 50px;
}
/*广告图片盒子*/
.adsImg{
	margin: 20px auto;
	text-align: center;
}
/*广告图片*/
.adsImg img{
	width: 5%;
	margin: 0 0.7%;
}
/*整个item*/
.item{
	float: left;
	width: 30%;
	margin-left: 5%;
	margin-top: 50px;
	box-shadow: 2px 2px 10px gray;
	border-radius: 5px;
}
/*每一行的第一个item*/
.firstItem{
	margin-left: 0%;
}
/*图片部分*/
.itemImg img{
	width: 100%;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	vertical-align: top;
}
/*图片盒子*/
.itemImg{
	position: relative;
}
/*弹出的蒙层文本盒子*/
.itemMask{
	position: absolute;
	/*border: 1px solid red;*/
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.5;
	text-align: center;
	opacity: 0;
	transition: opacity 1s;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
/*蒙层弹出的提示文本*/
.itemMaskText{
	position: absolute;
	left: 25%;
	top: 25%;
	color: #FFFFFF;
}
/*鼠标移入item上,再显示蒙层*/
.item:hover .itemMask{
	opacity: 0.5;
}
/*底部文本*/
.itemFooter{
	height: 30px;
	width: 100%;
	background-color: #FFFFFF;
	text-align: center;
	line-height: 30px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	font-size: 0.98em;
	color: #666666;
}
/*解决item浮动坍塌*/
.content::after{
	content: "";
	display: block;
	clear: both;
}
/*底部*/
.footer{
	width: 100%;
	height: 220px;
	background-color: #e0e0e0;
	margin-top: 60px;
	position: relative;
}
/*底部左侧*/
.footer .footerLeft{
	float: left;
	width: 49%;
	text-align: right;
	margin-top: 15px;
}
/*底部左侧小图标*/
.footerLeft img{
	width: 30px;
	height: 30px;
}
/*底部右侧联系方式*/
.footerRight{
	float: right;
	margin-top: 15px;
	width: 49%;
	text-align: left;
	font-size: 14px;
	font-family: "微软雅黑";
	color: #666666;
	text-shadow: 1px 1px 1px white;
}
/*底部右侧图片*/
.footerRight img{
	width: 140px;
}
/*底部中间的线条*/
.footerLine{
	position: absolute;
	border-left: 1px solid #bcbcbc;
	left: 50%;
	height: 90%;
	top: 5%;
}

 映纷创意.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/映纷创意1.css" />
	</head>
	<body>
		<!--头部导航栏-->
		<div class="nav">
			<div class="img">
				<img src="img/title2.png" width="140px"/>
			</div>
			<div class="linked">
				<a href="#" style="margin-left: 0;color: #FFFFFF;">HOME</a>
				<a href="#">WORK</a>
				<a href="#">CONTACT</a>
				<a href="#">JOIN US</a>
			</div>
		</div>
		
		<!--大主体内容开始-->
		<div class="bigContent">
			<!--轮播图-->		
			<div class="scrollView">
				<div class="scrollImg">
					<div class="scrollTitle">
						清新绿实验室大揭秘
					</div>
				</div>
				<!--页面指示器-->
				<div class="scrollCircle">
					<span style="margin-left: 0;"></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>
				
			<!--广告-->	
			<div class="ads">
				<!--广告文本-->
				<div class="adsText">
					INFINI （映纷创意）是一家独立创新营销公司，
					致力于创造会流动的美好创意。
					我们从策略与洞察出发，不断探索营销和创意的
					多元表达，用创作精神为品牌提供更具生命力的
					跨媒体整合营销服务。
				</div>
				<!--广告图片-->
				<div class="adsImg">
					<img src="img/1.jpg"/>
					<img src="img/2.jpg"/>
					<img src="img/3.jpg"/>
					<img src="img/4.jpg"/>
					<img src="img/5.jpg"/>
					<img src="img/6.jpg"/>
					<img src="img/7.jpg"/>
					<img src="img/8.jpg"/>
					<img src="img/9.jpg"/>
					<img src="img/10.jpg"/>
					<img src="img/11.jpg"/>
					<img src="img/12.jpg"/>
					<img src="img/13.jpg"/>
					<img src="img/14.jpg"/>
				</div>
			</div>
				
			<!--中间内容部分-->
			<div class="content">
				<!--每一个item-->
				<div class="item firstItem">
					<!--上边图片部分-->
					<div class="itemImg">
						<img src="img/item.jpg" />
						<!--鼠标悬停时的蒙层效果-->
						<div class="itemMask">
							<div class="itemMaskText">
								<h1>优酷</h1>
								优酷2022全视频之夜开场
							</div>
						</div>
					</div>
					<!--底部标题-->
					<div class="itemFooter">
						优酷2022全视频之夜开场
					</div>
				</div>
				
				<!--每一个item-->
				<div class="item">
					<!--上边图片部分-->
					<div class="itemImg">
						<img src="img/item.jpg" />
						<!--鼠标悬停时的蒙层效果-->
						<div class="itemMask">
							<div class="itemMaskText">
								<h1>优酷</h1>
								优酷2022全视频之夜开场
							</div>
						</div>
					</div>
					<!--底部标题-->
					<div class="itemFooter">
						优酷2022全视频之夜开场
					</div>
				</div>
				
				<!--每一个item-->
				<div class="item">
					<!--上边图片部分-->
					<div class="itemImg">
						<img src="img/item.jpg" />
						<!--鼠标悬停时的蒙层效果-->
						<div class="itemMask">
							<div class="itemMaskText">
								<h1>优酷</h1>
								优酷2022全视频之夜开场
							</div>
						</div>
					</div>
					<!--底部标题-->
					<div class="itemFooter">
						优酷2022全视频之夜开场
					</div>
				</div>
				
				<!--每一个item-->
				<div class="item firstItem">
					<!--上边图片部分-->
					<div class="itemImg">
						<img src="img/item.jpg" />
						<!--鼠标悬停时的蒙层效果-->
						<div class="itemMask">
							<div class="itemMaskText">
								<h1>优酷</h1>
								优酷2022全视频之夜开场
							</div>
						</div>
					</div>
					<!--底部标题-->
					<div class="itemFooter">
						优酷2022全视频之夜开场
					</div>
				</div>
				
				<!--每一个item-->
				<div class="item">
					<!--上边图片部分-->
					<div class="itemImg">
						<img src="img/item.jpg" />
						<!--鼠标悬停时的蒙层效果-->
						<div class="itemMask">
							<div class="itemMaskText">
								<h1>优酷</h1>
								优酷2022全视频之夜开场
							</div>
						</div>
					</div>
					<!--底部标题-->
					<div class="itemFooter">
						优酷2022全视频之夜开场
					</div>
				</div>
				
				<!--每一个item-->
				<div class="item">
					<!--上边图片部分-->
					<div class="itemImg">
						<img src="img/item.jpg" />
						<!--鼠标悬停时的蒙层效果-->
						<div class="itemMask">
							<div class="itemMaskText">
								<h1>优酷</h1>
								优酷2022全视频之夜开场
							</div>
						</div>
					</div>
					<!--底部标题-->
					<div class="itemFooter">
						优酷2022全视频之夜开场
					</div>
				</div>
				
				<!--每一个item-->
				<div class="item firstItem">
					<!--上边图片部分-->
					<div class="itemImg">
						<img src="img/item.jpg" />
						<!--鼠标悬停时的蒙层效果-->
						<div class="itemMask">
							<div class="itemMaskText">
								<h1>优酷</h1>
								优酷2022全视频之夜开场
							</div>
						</div>
					</div>
					<!--底部标题-->
					<div class="itemFooter">
						优酷2022全视频之夜开场
					</div>
				</div>
				
				<!--每一个item-->
				<div class="item">
					<!--上边图片部分-->
					<div class="itemImg">
						<img src="img/item.jpg" />
						<!--鼠标悬停时的蒙层效果-->
						<div class="itemMask">
							<div class="itemMaskText">
								<h1>优酷</h1>
								优酷2022全视频之夜开场
							</div>
						</div>
					</div>
					<!--底部标题-->
					<div class="itemFooter">
						优酷2022全视频之夜开场
					</div>
				</div>
				
				<!--每一个item-->
				<div class="item">
					<!--上边图片部分-->
					<div class="itemImg">
						<img src="img/item.jpg" />
						<!--鼠标悬停时的蒙层效果-->
						<div class="itemMask">
							<div class="itemMaskText">
								<h1>优酷</h1>
								优酷2022全视频之夜开场
							</div>
						</div>
					</div>
					<!--底部标题-->
					<div class="itemFooter">
						优酷2022全视频之夜开场
					</div>
				</div>
				
			</div>
			
			<!--底部联系方式-->
			<div class="footer">
				<!--左侧图标-->
				<div class="footerLeft">
					<img src="img/contact1.jpg" />
					<img src="img/contact2.jpg" />
					<img src="img/contact3.jpg" />
				</div>
				<!--中间分隔线-->
				<div class="footerLine"></div>
				<!--右侧联系方式-->
				<div class="footerRight">
					<img src="img/footer_logo.jpg" />
					<div>INFINI | 映纷创意</div>
					<div>北京市朝阳区懋隆创意园</div>
					<div>TEL : 010-85394331</div>
					<div>QQ : 7585917</div>
					<div>Email : infinistudio@foxmail.com</div>
					<div>weibo : @InfiniStudio</div>
				</div>
			</div>
			
		<!--大主体内容结束-->
		</div>		
		
	</body>
</html>

God Zhang
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
java-前端页面模板
03-04
本模板未使用任何前端框架，简单易上手。简单修改后即可满足基本需求。登录、查询展示等功能页面都有。
程序员，都去写一写前端代码吧
四火专栏
01-19 226
你可以认为我是一个极端的人，就像有许多人专注于自己的领域而不屑于其它“肤浅”的工作范畴一样。比如我见过不少认为做portal没有技术含量的判定，做工程都是充满苦逼行为的言论，最近则还有那些“大数据”崇拜者的疯狂吐槽……我的极端则有些不同，我的极端在于我认为绝大多数优秀的程序员，都要尝试多方面的事情。并不只有底层开发或者机器学习充满睿智的挑战，我做了几年网站，很难说这就是我最初的兴趣，虽然也在接触...
html+css基础简单仿写映纷创意项目
m0_64333610的博客
12-24 587
仿写映纷创意
关于在java页面里写前端片段。
weixin_44227650的博客
02-11 728
关于在java页面里写前端片段 可以按照以下方法进行编写 ： out.println("<br><br><br><input type='button' class='bu' value='关闭' οnclick='window.close();'/></center>");
【Java EE】-博客系统(前端页面)
m0_63979882的博客
04-26 2116
博客系统 登陆页面，列表页面，详情页面，编辑页面。使用css修饰登录页面，列表页面，详情页面，使用弹性布局进行水平排列。在编辑页面中引入markdown编辑器。引入editor.md需要注意的事项，以及方法。
作为一个Java程序员你应该会什么.pdf
11-28
作为一个Java程序员你应该会什么.pdf
一个Java程序员应该掌握的10项技能
11-12
一个Java程序员应该掌握的10项技能一个Java程序员应该掌握的10项技能
520程序员前端表白代码，使用 HTML、CSS 和 JavaScript 编写一段浪漫的代码，用于表达爱意
05-16
这段浪漫代码是通过HTML、CSS和JavaScript编写的，通过结合这三种前端技术，我们创建了一个令人心动的情人节表白页面。包含了逐行打印文字、变色效果和玫瑰花的飘落等特效。它能够营造出浪漫的氛围，并用创意的方式...
PHP程序员简历模板 iOS程序员简历模板 Android程序员简历模板 Web前端程序员简历模板 Java程序员简历等等
最新发布
01-05
Web前端程序员简历模板 Java程序员简历模板 C/C++程序员简历模板 NodeJS程序员简历模板 架构师简历模板 通用程序员简历模板PHP程序员简历模板 iOS程序员简历模板 Android程序员简历模板 Web前端程序员简历模板 Java...
做一个拥有自己站点的java程序员.pdf
07-27
做一个拥有自己站点的java程序员
零基础入门JAVAweb——前端开发html篇
m0_57209839的博客
04-27 2019
作者简介 首页：小罗のdiary的博客_CSDN博客-单片机原理,java基本常识领域博主 职业：在校大学生 爱好：写博客，听歌，学习单片机，java，跑步 擅长：单片机的基本原理，java基本原理 欢迎━(*｀∀´*)ノ亻!来首页阅读我的博客 主要内容 主要是了解html文件的基本结构，然后对每个标记进行解读，代码编写，结果演示，简单且有效的理解html代码，这为以后javaweb打下坚实的基础 html文件的基本结构 html主要由四部分组成，每个部分都不可或缺，这四个部
映纷视觉小例子
Vivian_shuang的博客
07-06 2547
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> link rel="stylesheet"
JavaWeb开发-01-前端基础知识
wangjh11234的博客
05-22 1126
JavaWeb开发-01-前端基础知识
JavaWeb开发 —— HTML
hdakj22的博客
04-10 1909
什么是HTML、CSS、基本标签 & 样式以及标题排版、标题样式、超链接以及正文排版、页面布局以及表格标签、表单标签和表单项标签
1.1 Java HTML前端网页
m0_53879048的博客
02-22 806
1. 网页基本信息 Hyper Text Markup Language (超文本标记语言) W3C 的标准包括 ： 结构化标准语言（HTML、XML) 表现标准语言（CSS） 行为标准（DOM、ECMAScript） （1、1.1 ） <!-- DOCTYPE : 告诉浏览器，我们要使用什么规范 --> <!DOCTYPE html> ​ <html lang="en"> <!-- head 代表网页的头部--&g...
2019.4.17 映纷创意首页铺设练习
weixin_30780221的博客
04-18 203
效果图: 代码: 链接：https://pan.baidu.com/s/1nLxGLVKGP323cM29uktIWg 提取码：b3u3 图片包: 链接：https://pan.baidu.com/s/1an5g76jlA8jqB4OAFnS_5w 提取码：nnb6 请将图片包下载放入工程中 代码使用顶部引入css 按需求修改文件中写的图片地址 转载于:https://www.cnblo...
java中如何写前端代码怎么写_如何编写规范的、可维护的前端代码？
weixin_39940913的博客
02-27 3960
原标题：如何编写规范的、可维护的前端代码？简介：之前要在一个旧的 Web 页面上面增添一些新的功能。在开发的过程中，发现旧的前端代码中有很多常见的不合适的写法。结合这些问题，如何写出更好的，更规范的，更可维护的代码，就是这篇文章要阐述的内容。首先查看了该 Web 页面的 HTML 代码，发现了一些典型的问题：HTML 页面中包含了很多 Java 和 CSS 代码HTML 页面中引用了大量的外部 J...
简单快速的用Java动态生成jsp/html前端页面。
热门推荐
刘信晨
01-07 2万+
首先给大家说说动态生成jsp、html的好处，大家都应该见过“淘宝”和“京东”，在每个节日会将他们菜单栏变成与节日相匹配的图片，和页面。这样就避免了项目修改完成之后再从新部署。 首先给大家看一下看一下效果图: ![test.html](http://img.blog.csdn.net/20180107225231617?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5
JavaWeb——开发使用jsp还是html做前端页面
qq_42188457的博客
07-09 2292
开发使用jsp还是html做前端页面？ 一、概述 刚开始学习Javaweb开发的小伙伴都有一个疑惑：用jsp开发前端还是用HTML开发前端呢？ 这个疑惑的来源主要是：刚接触完前端但又不深入学习js，接着学习jsp，发现老师们都一直用着jsp做页面进行教学，发现自己一直没有使用过HTML文本做页面。 原因： 不明确区分HTML和jsp，不知道静态页面和动态页面的作用。 虽然jsp里面有HTML标签，但是HTML是静态页面，而jsp是动态页面 简单的说： 1. HTML不能直接访问数据库的信息(静态页面都不行)
程序员必修：数据结构与算法分析——Java版基础的重要性
在《数据结构与算法分析：Java语言描述中文第二版》这本书中，作者深刻地探讨了在IT编程学习过程中基础课程的重要性。他以自身经验为例，指出大学期间所学的离散数学、算法与数据结构、操作系统、计算机体系结构、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

God Zhang

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

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

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

打赏作者

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

抵扣说明：

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

余额充值