初学者简单盒子代码

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	body
	{
	margin: 50px;
	box-sizing: border-box;
	}
	h1
	{
	height: 38px;
	color: #474859;
	padding: 21px;
	padding-left:0;
	border: #474859 1px solid;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
	margin: 0;
	}
	div p
	{
	margin:30px;
	border-left: 10px #484759 solid;
	padding: 20px;
	line-height: 30px;
	color: #615e77;
	}
	h2
	{
	width: 120px;
	border-left: 10px #605f77 solid;
	border-right: 10px #605f77 solid;
	text-align: center;
	color: #605f77;
	}
	section p
	{
	margin-top: 39px;
	margin-bottom: 39px;
	line-height: 30px;
	color: #615e77;
	}
	footer
	{
	border:1px solid transparent;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 20px;
	background: #a6a6a6;
	color: #615e77;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>CSS盒子模型</h1>
	</header>
	<div>
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet, unde quaerat repellendus officia cum tempore voluptatem, sunt id inventore animi quo dolor odit ipsum aut nisi saepe tempora at pariatur obcaecati sapiente modi esse ipsam consectetur cumque? Error aliquid ex inventore corporis iste. Consequatur fuga perspiciatis quas quae expedita veritatis quibusdam nihil deserunt exercitationem quis, ad earum optio nam eligendi impedit quidem maxime modi corrupti dolorum debitis laborum. At culpa maxime veritatis unde voluptatem enim porro qui, labore ipsum cupiditate ipsa nisi tempore nostrum quasi velit eligendi! Itaque illum unde animi natus ea amet? Ea commodi quisquam distinctio dolore ipsam.</p>
	</div>
	<section>
	<h2>原理</h2>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque consequuntur vero doloremque minima! Provident, nisi in rerum id voluptatum eligendi? Fuga itaque facere repellendus explicabo amet voluptate enim quasi? Facere culpa nisi architecto porro, facilis exercitationem. Adipisci facere dignissimos, ipsum perspiciatis ipsa fugit deleniti doloribus aut perferendis quia dolore, non voluptatum, rem quos ex. Ad id corrupti accusantium possimus ex quod, ratione aperiam dolore ut molestias quam voluptate officiis omnis impedit nisi facere et delectus aspernatur corporis. Iusto unde commodi saepe. Amet iste sunt nobis accusantium reiciendis, distinctio a nesciunt perferendis labore animi dicta doloremque minima neque atque eum cum?</p>
	<h2>特点</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique vero maiores laudantium numquam doloremque, laboriosam architecto eum iusto sunt asperiores! Dolorem cumque hic fugit ab similique ipsam sunt, maxime quos sit rem nemo! Saepe quam minima amet est reiciendis et ipsum labore error in ex cupiditate id expedita nesciunt suscipit distinctio neque explicabo, rerum perferendis quasi recusandae nam soluta aliquam adipisci. Et inventore, vero magni voluptatem quos, necessitatibus quia excepturi commodi perspiciatis possimus ut non reiciendis quae consectetur placeat nostrum officiis accusantium quaerat dolor pariatur, reprehenderit accusamus consequuntur nisi. Temporibus dolorum repellendus pariatur eveniet cupiditate quam ipsam vel dignissimos doloribus.
	</p>
	<h2>结构</h2>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit at placeat suscipit itaque sint dolor nam nisi voluptatum esse ipsum fuga vero quaerat necessitatibus eaque obcaecati, tenetur soluta, ea odit maiores in ipsa neque officiis quae illum. Molestias repudiandae provident commodi magni nam autem fugiat quod numquam sapiente voluptate soluta, saepe dicta quae atque a! Dicta maxime corporis culpa inventore id non tempore repudiandae error itaque saepe enim beatae animi unde in sint maiores quidem porro quos sapiente omnis harum delectus, sequi nostrum. Delectus debitis odit quos laborum qui dolores. Aliquid nesciunt sequi optio molestiae repellat doloribus, exercitationem atque voluptas!</p>
	</section>
	<footer>
	<p>内容来源：CSS盒子模型-百度百科</p>
	<p>作者：百度百科</p>
	</footer>
	</body>
	</html>

初学者简单盒子代码

猜你喜欢