参考自青岛思途java讲师臧老师
demo415.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/demo415.css" />
</head>
<body>
<!-- 头部 -->
<header>
<div class="nav">
<div class="container clearfix">
<div class="logo fl">
<img src="img/logo.jpg">
</div>
<ul class="clearfix">
<li><a href="#">网站首页</a></li>
<li><a href="#">客片欣赏</a></li>
<li><a href="#">样片大赏</a></li>
<li><a href="#">最新资讯</a></li>
<li><a href="#">拍摄场景</a></li>
<li><a href="#">公司简介</a></li>
</ul>
</div>
</div>
</header>
<!-- 一楼 -->
<div class="floor1">
<div class="container">
<div class="title">
<h1>风尚堂摄影作品展示</h1>
<h2>WORKS APPLICATION</h2>
</div>
<div class="pic clearfix">
<div class="lft">
<div></div>
<div></div>
</div>
<div class="ctr"></div>
<div class="rgt">
<div></div>
<div></div>
</div>
</div>
</div>
</div>
<!-- 二楼 -->
<div class="floor2">
<div class="container">
<div class="title">
<h1>唯美场景展示</h1>
<h2>STYLE SHOW</h2>
</div>
<div class="pic clearfix">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
<!-- 三楼 -->
<div class="floor3">
<div class="container">
<div class="title">
<h1>新闻资讯</h1>
<h2>LATEST NEWS</h2>
</div>
<div class="news-info">
<div class="lft clearfix">
<div class="elem">
<div class="pic fl">
<img src="img/news.jpg" >
<div class="cover">
<div class="day">15</div>
<div class="year">2022-04</div>
</div>
</div>
<div class="content fr">
<h1 class="title">婚纱照怎样拍才好看 婚纱摄影完美攻略</h1>
<p class="detail">很多新人在拿到婚纱照的时候,总有这样或者那样的一些抱怨。事实上,婚纱照拍摄出现问题,也有自身的一些原因。完美婚纱照的拍摄是新人和摄影方共同的努力的结果。那么,完美婚纱照的拍摄双方要做好哪些呢?</p>
</div>
</div>
<div class="elem">
<div class="pic fl">
<img src="img/news.jpg" >
<div class="cover">
<div class="day">15</div>
<div class="year">2022-04</div>
</div>
</div>
<div class="content fr">
<h1 class="title">婚纱照怎样拍才好看 婚纱摄影完美攻略</h1>
<p class="detail">很多新人在拿到婚纱照的时候,总有这样或者那样的一些抱怨。事实上,婚纱照拍摄出现问题,也有自身的一些原因。完美婚纱照的拍摄是新人和摄影方共同的努力的结果。那么,完美婚纱照的拍摄双方要做好哪些呢?</p>
</div>
</div>
</div>
<div class="crt clearfix">
<div class="elem">
<div class="pic fl">
<img src="img/news.jpg" >
<div class="cover">
<div class="day">15</div>
<div class="year">2022-04</div>
</div>
</div>
<div class="content fr">
<h1 class="title">婚纱照怎样拍才好看 婚纱摄影完美攻略</h1>
<p class="detail">很多新人在拿到婚纱照的时候,总有这样或者那样的一些抱怨。事实上,婚纱照拍摄出现问题,也有自身的一些原因。完美婚纱照的拍摄是新人和摄影方共同的努力的结果。那么,完美婚纱照的拍摄双方要做好哪些呢?</p>
</div>
</div>
<div class="elem">
<div class="pic fl">
<img src="img/news.jpg" >
<div class="cover">
<div class="day">15</div>
<div class="year">2022-04</div>
</div>
</div>
<div class="content fr">
<h1 class="title">婚纱照怎样拍才好看 婚纱摄影完美攻略</h1>
<p class="detail">很多新人在拿到婚纱照的时候,总有这样或者那样的一些抱怨。事实上,婚纱照拍摄出现问题,也有自身的一些原因。完美婚纱照的拍摄是新人和摄影方共同的努力的结果。那么,完美婚纱照的拍摄双方要做好哪些呢?</p>
</div>
</div>
</div>
<div class="rgt clearfix">
<div class="elem">
<div class="pic fl">
<img src="img/news.jpg" >
<div class="cover">
<div class="day">15</div>
<div class="year">2022-04</div>
</div>
</div>
<div class="content fr">
<h1 class="title">婚纱照怎样拍才好看 婚纱摄影完美攻略</h1>
<p class="detail">很多新人在拿到婚纱照的时候,总有这样或者那样的一些抱怨。事实上,婚纱照拍摄出现问题,也有自身的一些原因。完美婚纱照的拍摄是新人和摄影方共同的努力的结果。那么,完美婚纱照的拍摄双方要做好哪些呢?</p>
</div>
</div>
<div class="elem">
<div class="pic fl">
<img src="img/news.jpg" >
<div class="cover">
<div class="day">15</div>
<div class="year">2022-04</div>
</div>
</div>
<div class="content fr">
<h1 class="title">婚纱照怎样拍才好看 婚纱摄影完美攻略</h1>
<p class="detail">很多新人在拿到婚纱照的时候,总有这样或者那样的一些抱怨。事实上,婚纱照拍摄出现问题,也有自身的一些原因。完美婚纱照的拍摄是新人和摄影方共同的努力的结果。那么,完美婚纱照的拍摄双方要做好哪些呢?</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--尾部 -->
<footer>
<div class="container clearfix">
<div class="logo fl">
<img src="img/end-logo.jpg" >
</div>
<div class="address fr">
<p>Tel:400-080-9123</p>
<p>ADD:浙江省杭州市XXX路XXX号</p>
<p>Copyright 2008-2016 风尚堂摄影 版权所有</p>
</div>
</div>
</footer>
</body>
</html>
reset.css
/*version: 2.7.0 */
/*reset 重置浏览器默认样式*/
/* 注意:此处的字体设置更多是考虑windows操作系统下的兼容性 */
html,
body {
background: #FFF;
font-family: "Microsoft YaHei", "微软雅黑", "黑体", "宋体", Arial, sans-serif;
font-size: 14px;
}
body,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset {
border: solid 1px #666;
}
img {
border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var,
optgroup {
font-style: inherit;
font-weight: inherit;
}
del,
ins {
text-decoration: none;
}
li {
list-style: none;
}
caption,
th {
text-align: left;
}
h2 {
font-size: 16px;
}
h3 {
font-size: 14px;
}
q:before,
q:after {
content: '';
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
sup {
vertical-align: baseline;
}
sub {
vertical-align: baseline;
}
legend {
color: #000;
}
input,
button,
textarea,
select,
optgroup,
option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
input,
button,
textarea,
select {
*font-size: 100%;
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #06e;
}
a:focus {
outline: thin dotted;
}
/* 改善在所有浏览器中获取焦点和悬停时的可读性 */
a:hover,
a:active {
outline: 0;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
/* 此处的有效宽度并非通用设置,需要根据自己的场景和需求进行灵活设置 */
.container {
width: 1100px;
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
demo415.css
@charset "utf-8";
/* 复用的标题部分 */
.title {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.title>h1 {
color: #E53B3B;
}
/* 使用font-size属性定义字体大小。使用font-weight属性设置文本字体的粗细。 */
.title>h2 {
margin-top: 3px;
color: #444;
font-weight: normal;
}
/* 头部 */
header {
height: 550px;
background: url(../img/banner01.jpg) no-repeat center center/cover;
}
/* 半透明条 */
header .nav {
height: 55px;
background-color: rgba(0, 0, 0, 0.45);
position: fixed;
top: 0;
left: 0;
width: 100%;
}
header .nav .container>ul {
margin-left: 20px;
}
header .nav .container>ul>li {
float: left;
height: 55px;
padding: 0 20px;
/* 行高,文字所在行的高度 */
line-height: 54px;
}
header .nav .container>ul>li:hover {
background-color: #E80808;
}
header .nav .container>ul>li>a {
color: white;
font-size: 18px;
}
/* 一楼 */
.floor1 .pic {
height: 715px;
}
.floor1 .pic>div {
float: left;
height: 100%;
}
.floor1 .pic>.lft>div,
.floor1 .pic>.rgt>div {
height: calc(50% - 5px);
width: 265px;
}
.floor1 .pic>.lft>div:first-child,
.floor1 .pic>.rgt>div:first-child {
margin-bottom: 10px;
}
.floor1 .pic>.lft>div:first-child {
background: url(../img/photo01.jpg) no-repeat center center/cover;
}
.floor1 .pic>.lft>div:last-child {
background: url(../img/photo02.jpg) no-repeat center center/cover;
}
.floor1 .pic>.rgt>div:first-child {
background: url(../img/photo04.jpg) no-repeat center center/cover;
}
.floor1 .pic>.rgt>div:last-child {
background: url(../img/photo05.jpg) no-repeat center center/cover;
}
.floor1 .pic>.ctr {
width: calc(100% - 550px);
height: 100%;
background: url(../img/photo03.jpg) no-repeat center center/cover;
margin-left: 10px;
margin-right: 10px;
}
/* 二楼 */
.floor2 .pic {
height: 350px;
}
.floor2 .pic>.item {
height: 100%;
width: calc((100% - 30px) / 4);
margin-right: 10px;
float: left;
}
.floor2 .pic>.item:last-child {
margin-right: 0;
}
.floor2 .pic>.item:nth-child(1) {
background: url(../img/genpai01.jpg) no-repeat center center/cover;
}
.floor2 .pic>.item:nth-child(2) {
background: url(../img/genpai02.jpg) no-repeat center center/cover;
}
.floor2 .pic>.item:nth-child(3) {
background: url(../img/genpai03.jpg) no-repeat center center/cover;
}
.floor2 .pic>.item:nth-child(4) {
background: url(../img/genpai04.jpg) no-repeat center center/cover;
}
/* 三楼 */
.floor3 {
margin-bottom: 25px;
}
.floor3 .news-info {
height: 368px;
}
.floor3 .lft,
.floor3 .crt,
.floor3 .rgt {
height: calc((100% - 100px) / 3);
width: 100%;
margin-bottom: 40px;
}
.floor3 .rgt {
margin-bottom: 0;
}
.elem {
height: 100%;
width: calc((100% - 30px) / 2);
margin-right: 30px;
float: left;
}
.floor3 .lft>.elem .pic,
.floor3 .crt>.elem .pic,
.floor3 .rgt>.elem .pic
{
height: 100%;
width: 175px;
overflow: hidden;
position: relative;
}
.floor3 .lft>.elem>.pic>.cover,
.floor3 .rgt>.elem>.pic>.cover,
.floor3 .crt>.elem>.pic>.cover
{
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: rgba(221, 148, 26, 0.5);
}
.floor3 .lft>.elem .pic>.cover>.day,
.floor3 .crt>.elem .pic>.cover>.day,
.floor3 .rgt>.elem .pic>.cover>.day
{
text-align: center;
font-size: 35px;
color: #fff;
margin-top: 12px;
}
.floor3 .lft>.elem .pic>.cover>.year,
.floor3 .rgt>.elem .pic>.cover>.year,
.floor3 .crt>.elem .pic>.cover>.year
{
text-align: center;
font-size: 16px;
color: #fff;
}
.floor3 .lft>.elem:last-child,
.floor3 .crt>.elem:last-child,
.floor3 .rgt>.elem:last-child {
margin-right: 0;
}
.floor3 .lft>.elem>.content,
.floor3 .crt>.elem>.content,
.floor3 .rgt>.elem>.content
{
height: 100%;
width: calc(100% - 210px);
/* background-color: skyblue; */
overflow: hidden;
padding-left: 15px;
padding-right: 20px;
}
.floor3 .lft>.elem>.content>h1,
.floor3 .crt>.elem>.content>h1,
.floor3 .rgt>.elem>.content>h1
{
margin: 0;
padding: 0;
font-size: 20px;
text-align: left;
color: #666;
font-weight: normal;
border-bottom: 1px dashed #bbb;
padding-bottom: 10px;
/* 单行省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.floor3 .lft>.elem>.content>.detail,
.floor3 .crt>.elem>.content>.detail,
.floor3 .rft>.elem>.content>.detail
{
color: #666;
margin-top: 10px;
}
/* 尾部 */
footer {
height: 125px;
background-color: #E53B3B;
}
footer .logo {
margin-top: 25px;
}
footer .address {
color: #fff;
font-size: 20px;
margin-top: 15px;
}
footer .address>p {
margin: 5px 0;
}