CSS布局示例 3 - 页面布局

参考自青岛思途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;
}

CSS布局示例 3 - 页面布局相关推荐

css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
CSS+DIV进行的页面布局
CSS+DIV进行的页面布局第一部分.布局概述 1.网页布局 2.页面元素定位机制第二部分.布局常用属性 1.浮动属性(float) 2.清除浮动(clear) 3.定位属性(position) ...
影响页面布局的css属性,6 和页面布局有关的CSS属性（三）
6 和页面布局有关的CSS属性(三) 03.png 04.png 05.png #box { /* 声明ID选择器,名称为box */ position:absolute; /* 设置层的定位为绝对定 ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
了解CSS盒模型、页面布局在UI设计中的作用
我司实行UI规范已过去一段时间,页面风格已逐渐实现统一.但近期在实际业务开发中发现,在UI验收环节不断出现小数值调整情况,极大的延长验收时间. 在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解 ...
CSS盒子模型与页面布局
202209 week1 day5~day6 前端学习 1 盒子模型 1.1 盒子模型结构 1.1.1 内容 1.1.2 边界(margin) 1.1.3填充(padding) 1.1.4 边框(bo ...
后台管理页面布局、web页面布局
做一个简单的页面布局演示地址:https://genin.gitee.io/web-demo/web-layout.html 基本结构如下 <body> <!-- svg图标 -- ...
游戏官网的HTML布局,游戏网站页面布局关键
现在,越来越多的人想要建立自己的网站.这无疑是一件好事,但是,很多设计师,尤其是新手设计师或者压根儿就不是设计师的小白,都在网页设计上走过不少弯路. 网页制作中网页布局相当重要,先布局,后细节,只有在 ...

CSS布局示例 3 - 页面布局

CSS布局示例 3 - 页面布局相关推荐

最新文章

热门文章