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