css h5

最新推荐文章于 2024-05-09 20:24:38 发布

xiaozi_11

最新推荐文章于 2024-05-09 20:24:38 发布

阅读量197

点赞数 1

本文链接：https://blog.csdn.net/xiaozi_11/article/details/78669177

版权

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title></title>

	<style type="text/css">
	* {
	margin: 0px auto;
	padding: 0px;
	}

	body {
	background: url(img/bg.jpg) no-repeat;
	background-size: 100%;
	}

	.main {
	width: 800px;
	height: 700px;
	}

	.img0 {
	margin-top: 10px;
	margin-left: 10px;
	}

	.nav {
	border-radius: 5px;
	background: gray;
	height: 40px;
	}

	.nav_ul {
	list-style: none;
	}

	.nav_ul li {
	margin-top: 5px;
	float: left;
	padding: 5px;
	color: white;
	}

	.search {
	float: right;
	height: 36px;
	margin-top: 2px;
	margin-right: 10px;
	border-radius: 5px;
	}

	.section {
	width: 800px;
	height: 600px;
	margin-top: 10px;
	}

	.article {
	width: 500px;
	height: 600px;
	background: white;
	float: left;
	border-radius: 5px;
	padding: 10px;
	}

	.img1 {
	width: 100%;
	height: 200px;
	}

	.p {
	color: #B4B6AB;
	}

	.myVideo {
	width: 100%;
	}
	.aside_ul{
	list-style: none;
	float: right;
	background: white;
	border-radius: 5px;
	width: 200px;
	}

	</style>
	</head>

	<body>

	<div class="main">

	<img src="img/a19.png" class="img0" />
	<nav class="nav">
	<ul class="nav_ul">
	<li>HOME</li>
	<li>HOME</li>
	<li>HOME</li>
	<li>HOME</li>
	</ul>
	<input type="search" placeholder="请输入" class="search">
	</nav>
	<section class="section">
	<article class="article">
	<h3>标题</h3>
	<time>2017-11-29</time><br>
	<img src="img/a19.png" class="img1" />
	<p class="p">
	啊算法撒旦飞洒打发似的撒旦法大师傅似的啊算法撒旦飞洒打发似的撒旦法大师傅似的啊算法撒旦飞洒打发似的撒旦法大师傅似的
	</p>
	<video src="videos/video2.MP4" controls="controls" class="myVideo"></video>
	</article>
	<aside>

	<ul class="aside_ul">
	<li>SlideBar</li>
	<li>SlideBar</li>
	<li>SlideBar</li>
	<li>SlideBar</li>
	</ul>

	</aside>
	</section>
	</div>
	<progress></progress>
	<details class="d">
	<ul>
	<li>hello</li><li>hello</li>
	<li>hello</li>
	</ul>
	</details>
	</body>

	</html>