【学习前端第九课】左中右三栏布局

最新推荐文章于 2024-05-18 16:11:19 发布

-Wake-

最新推荐文章于 2024-05-18 16:11:19 发布

阅读量380

点赞数 10

分类专栏：【前端】入门到就业文章标签：学习前端 html5 css3

本文链接：https://blog.csdn.net/weixin_65729202/article/details/135646708

版权

【前端】入门到就业专栏收录该内容

79 篇文章 1 订阅

订阅专栏

本文介绍了如何利用Vue渐进式JavaScript框架配合HTML元素类型转换和CSS盒子模型进行页面布局，包括栏目间的间距控制和内容结构的组织，同时提及了HTML盒子模型的概念和热门文章列表的展示。

摘要由CSDN通过智能技术生成

课程内容
通过元素类型的转换让块元素水平并排排版，再通过盒子模型，实现栏目之间的间距与分割

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			padding:0;
			margin:0;
		}
		.contents{
			width:1100px;
			margin:50px auto;
			border-bottom:solid 1px #ccc;
			border-top:solid 1px #ccc;
			padding:40px 0;
		}
		.left,.center,.right{
			display: inline-block;
			width:300px;
			vertical-align: top;
		}
		h3{
			font-size:20px;
			padding-bottom:20px;
		}
		ul{
			list-style: none;
		}
		.left p,.center p{
			line-height:30px;
			font-size:14px;
			color:#666;
		}
		.left{
			padding-right:42px;
			border-right:dotted 2px #ccc;
			height:290px;
			margin-right:42px;
		}
		.center{
			padding-right:42px;
			border-right:dotted 2px #ccc;
			margin-right:42px;
		}
		.right a{
			color:#666;
			text-decoration: none;
			line-height:30px;
			font-size:14px;
		}
		</style>
	</head>
	<body>
		<div class="contents">
			<div class="left">
				<h3>VUE渐进式JavaScript框架</h3>
				<p>基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。</p>
			</div>
			<div class="center">
				<h3>HTML盒子模型</h3>
				<img src="box.bmp" width="300" height="180" alt="">
				<p>所有的标签都可以看做是一个盒子（容器），这个盒子由内到外由4层嵌套形成的</p>
			</div>
			<div class="right">
				<h3>热门文章</h3>
				<ul>
					<li><a href="">CSS3弹性布局内容对齐</a></li>
					<li><a href="">Git:代码冲突常见解决方法</a></li>
					<li><a href="">JavaScript基础：回调(callback)是什么?</a></li>
					<li><a href="">带悬停动画效果的CSS按钮</a></li>
					<li><a href="">CSS3弹性布局内容对齐</a></li>
					<li><a href="">Git:代码冲突常见解决方法</a></li>
					<li><a href="">JavaScript基础：回调(callback)是什么?</a></li>
					<li><a href="">带悬停动画效果的CSS按钮</a></li>
				</ul>
			</div>
		</div>		
	</body>
</html>