<!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>
网页基础(二十六)语义化网页布局
最新推荐文章于 2021-06-04 16:03:12 发布