0
点赞
收藏
分享

微信扫一扫

CSS布局示例 3 - 页面布局

禾木瞎写 2022-04-15 阅读 56
htmlcss

参考自青岛思途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 Flex布局示例

css前端

css3--布局--弹性布局flex

默认值两端对齐属性设置HarmonyOS后端开发

学习通CSS3页面布局

css3csshtml

part3 ：页面布局

csscss3html

CSS盒子模型/页面布局

前端css

CSS：页面美化和布局控制

csshtml

CSS布局 + Flex布局

学习：RN基础知识前端开发前端

css布局 浮动布局

前端css

【CSS】CSS 布局——常规流布局

人工智能深度学习pytorch

CSS3弹性布局

css3html前端
0 条评论