【Java程序员来写一个简单的HTML前端—

官网页面：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>

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

将Java程序变成可执行文件的一个简单方法
将Java程序变成可执行文件的一个简单方法运行Java程序(SWING或SWT的桌面程序)可以直接执行.class文件或将所有的.class文件及相关的其他文件压缩成.jar文件,然后使用javaw ...
5年java程序员述职报告_一个5年Java程序员的年终总结，献给还在迷茫中的你
我越来越担心我作为一个Java程序员的未来. 恍然间,发现自己在这个行业里已经摸爬滚打了五年了,原以为自己就凭已有的项目经验和工作经历怎么着也应该算得上是一个业内比较资历的人士了,但是今年在换工作的过 ...
Java程序员如何写简历，给大家一个小建议？
一.首先是简历制作问题凭借在学生时代和同学对简历的打磨交流以及这段时间筛选HR发来的简历,我深深的意识到了简历的重要性.简历就是求职路上的通关文牒,高质量的简历可以通过一次次的简历筛选,从而得到笔试 ...
控制台编写JAVA程序教程_写一个java程序的步骤是什么？写java程序技巧
写Java程序是要按照步骤来的,这样才能写好一个java程序,那么接下来,我们就来给大家讲解一下写一个java程序的步骤是什么? (1)创建Java项目:"FileàNewàProjectà ...
震惊！阿里的程序员竟被一个简单的 SQL 查询难住了！
作者 | 唐磊责编 | Carol 来源 | 程序猿石头封图 | CSDN 付费下载于视觉中国最近工作上遇到一个"神奇"的问题,或许对大家有帮助,因此形成本文. 问题大概是, ...
java nutz_Nutz，Java程序员的另一个选择
Java 为什么不能是一门敏捷的语言呢? 起码 Java 是一门优美的编程语言,经过10多年的发展,它几乎已经被应用到了任何地方,在高端的企业服务器上, 手持设备的芯片里,车载设备,智能家电甚至火星车 ...
java里面queries怎么写,Java程序员在写SQL时常犯的10个错误
10 Common Mistakes Java Developers Make when Writing SQL Java developers mix object-oriented thinkin ...
Java 程序员必备的 15 个框架，前 3 个地位无可动摇！
2019独角兽企业重金招聘Python工程师标准>>> Java 程序员方向太多,且不说移动开发.大数据.区块链.人工智能这些,大部分 Java 程序员都是 Java Web/后端开 ...
程序员用学位证吗_没有学位如何成为一名优秀的Java程序员
程序员用学位证吗掌握Java的道路是漫长而棘手的. 但是,在我从事编码工作的那几年中,我获得了一两个提示. 但是,如何成为一名优秀的Java程序员不是一个简单的问题? 您不需要任何正式培训. 您无需 ...

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

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

最新文章

热门文章