网页基础（二十六）语义化网页布局

最新推荐文章于 2021-06-04 16:03:12 发布

@大娱乐家

最新推荐文章于 2021-06-04 16:03:12 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/qq_41440413/article/details/104691223

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>语义化网页布局</title>
		<style>
			body{
				width: 980px;
				padding: 0;
				margin: 0 auto;
				background-color: white;
			}
			.default_style{
				background-color: cornflowerblue;
			}
			#header{
				width: 100%;
				height: 90px;
				margin-top:20px ;
				
			}
			header .logo{
				background-color: aqua;
				width: 100px;
				height: 45px;
				float: left;
				margin: 10px 0px 0px 10px;
				text-align: center;
				font-weight: bold;
				line-height: 45px; /*设置行高 可以让文本居中*/
				border-radius:10px ;
			}
			nav{
				width: 100%;
				height: 50px;
				
				
			}
			nav>ul{
				list-style-type: none;
			}
			nav>ul>li{
				float:left ;
				margin-left: 20px;
				line-height: 50px;
			}
			nav>ul>li>a{
				text-decoration: none;
				
			}
			nav>ul>li>a:hover{
				color: red;
			}
			
			main{
				width: 100%;
				height: 400px;
				margin: 10px 0px;
				
			}
			main>article{
				width: 70%;
				height: 100%;
				float: left;
				
							
			}
			aside{
				
				
				margin:10px 0px;
				float: left;
				width: 30%;
				height: 100%;
			
			}
			
			footer{
				width: 100%;
				height: 40px;
				clear: both;
			}
		</style>
	</head>
	<body>
		<!--头部-->
		<header class="default_style" id="header">
			<div class="logo">logo</div>
		</header>
		<!--导航-->
		<nav class="default_style">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">新闻动态</a></li>
				<li><a href="#">公司简介</a></li>
			</ul>
		</nav>
		<!--内容-->
		<main class="default_style">
			<!--
            	文章
            -->
			<article class="default_style">
				<section>
					<hgroup> 
                      <!--如果多个标题连着 加上hgroup标题分组
                      	如果一个页面想用多个h1标签加上hgroup
                      -->
					<h1>鸡你太美</h1>
					<h3>蔡徐坤</h3>
					</hgroup>
				</section>
			</article>
			<!--侧边栏-->
			<aside>
				<div class="aside_div default_style"></div>
				<span>aside</span>
			</aside>
			
		</main>
		<footer class="default_style">
				fooder
		</footer>
	</body>
</html>

@大娱乐家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页基础（二十六）语义化网页布局

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>语义化网页布局</title> <style> body{ width: 980px; padding: 0; margin: 0 auto; ...
复制链接

扫一扫