【慕课网】前端零基础入门---步骤二：页面化妆师CSS---07-CSS网页布局基础

最新推荐文章于 2020-02-13 20:03:19 发布

dqh_zsh

最新推荐文章于 2020-02-13 20:03:19 发布

阅读量162

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_43405634/article/details/104194227

版权

07-CSS网页布局基础

第1章基础布局（布局必备，多练习）

1-1 经典的行布局（1）

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
			color: #fff;
			text-align: center;
		}
		.header{
			width: 1200px;
			height: 100px;
			background:black;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -50px;
			margin-left: -600px;
			overflow: hidden;
			zoom:1;
		}
		.header .logo{
			width: 200px;
			height: 80px;
			float: left;
			margin: 0 40px;
		}
		ul{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		.header .nav{
			float: right;
			height: 80px;
			margin-right: 40px; 
			overflow: hidden;
			zoom:1;
		}
		.header .nav li{
			float: left;
			margin-right: 20px;
		}
		.header .nav li a{
			padding: 0 20px;
			height: 80px;
			line-height: 80px;
			display: block;
			font-family: "微软雅黑";
			font-size: 16px;
			color: #fff;
		}
		.header .nav li a:hover{
			color: #6F6;
		}
	</style>
</head>
<body>
		<div class="header">
			<div class="logo">
				<a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a>
			</div>
			<ul class="nav">
				<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>
</body>
</html>

1-2 经典的行布局（2）

在这里插入图片描述

1-3 经典的两列布局

1-4 经典的三列布局

1-5 混合布局

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
			color: #fff;
		}
		.line1{
			width: 90%;
			margin: 0 auto;
			height: 500px;
			background-color: #9cf;
			overflow: hidden;
			zoom:1;
		}
		.lie1 img,.lie2 img{
			width: 38%;
			height: 400px;
			float: left;
			background-image: no-repeat top center;
			margin-right: 8%;
			margin-top: 50px;
		}
		.lie1 img{
			margin-left: 8%;
		}
		.line2{
			width: 90%;
			margin: 0 auto;
			height: 500px;
			background-color: #FCC;
			overflow: hidden;
			zoom:1;
		}
		.one img,.two img,.three img{
			width: 24%;
			height: 400px;
			float: left;
			background-image: no-repeat top center;
			margin-right: 7%;
			margin-top: 50px;
		}
		.one img{
			margin-left: 7%;
		}
	</style>
</head>
<body>
	<div class="line1">
		<div class="lie1"><img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg"></div>
		<div class="lie2"><img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg"></div>
	</div>
	<div class="line2">
		<div class="one"><img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg"></div>
		<div class="two"><img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg"></div>
		<div class="three"><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"></div>
	</div>
</body>
</html>

第2章经典布局（掌握布局的思路，以便后面灵活布局）

2-1 圣杯布局（了解即可）

2-2 圣杯布局案例（了解即可）

2-3 双飞翼布局及案例（了解即可）

dqh_zsh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【慕课网】前端零基础入门---步骤二：页面化妆师CSS---07-CSS网页布局基础

01-CSS选择的艺术第1章 CSS基础语法1-1 CSS基础语法1-2 CSS使用方法1-3 CSS使用方法优先级第2章 CSS选择器2-1 选择器（标签选择器和类选择器）2-2 选择器（ID选择器）2-3 群组选择器和全局选择器2-4 css后代选择器2-5 伪类选择器第3章 CSS继承、层叠和优先级3-1 CSS继承和层叠3-2 css选择器优先级3-3 css权...
复制链接

扫一扫

【慕课网】前端零基础入门---步骤二：页面化妆师CSS---07-CSS网页布局基础

07-CSS网页布局基础

第1章 基础布局（布局必备，多练习）

1-1 经典的行布局（1）

1-2 经典的行布局（2）

1-3 经典的两列布局

1-4 经典的三列布局

1-5 混合布局

第2章 经典布局（掌握布局的思路，以便后面灵活布局）

2-1 圣杯布局（了解即可）

2-2 圣杯布局案例（了解即可）

2-3 双飞翼布局及案例（了解即可）

“相关推荐”对你有帮助么？

第1章基础布局（布局必备，多练习）

第2章经典布局（掌握布局的思路，以便后面灵活布局）