网页整体布局基本模板

ོ栖落

已于 2023-05-16 22:46:06 修改

阅读量6.7k

点赞数 12

分类专栏：前端文章标签： html5 css

于 2022-07-12 23:28:11 首次发布

本文链接：https://blog.csdn.net/qq_63806300/article/details/125754217

版权

前端专栏收录该内容

5 篇文章 3 订阅

订阅专栏

一、效果

二、代码

1、html文件

<!DOCTYPE>
<html>
	<head>
    	<meta charset="utf-8"/>
        <title>网页名称</title>
        <link rel="stylesheet" href="html5.css">
    </head>
    <body>
    	<header>
        	<h1>页眉header</h1>
        </header>
        <div id="container">
        	<nav>
            	<a href="http://www.xxxxx.com">菜单一</a>
                <a href="http://www.xxxxx.com">菜单二</a>
                <a href="http://www.xxxxx.com">菜单三</a>
                <a href="http://www.xxxxx.com">菜单四</a>
                <a href="http://www.xxxxx.com">菜单五</a>
                <a href="http://www.xxxxx.com">菜单六</a>
                <a href="http://www.xxxxx.com">菜单七</a>
                <a href="http://www.xxxxx.com">菜单八</a>
            </nav>
            <aside>
            	<h3>侧栏Aside</h3>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
            </aside>
            <section>
            	<article>
                	<header>
                    	<h1>文章页眉Article Header</h1>
                    </header>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <footer>
                    	<h2>文章页脚Article Footer</h2>
                    </footer>
                </article>
                
                <article>
                	<header>
                    	<h1>文章页眉Article Header</h1>
                    </header>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <footer>
                    	<h2>文章页脚Article Footer</h2>
                    </footer>
                </article>
           </section>
           <aside>
            	<h3>侧栏Aside</h3>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
            </aside>
            <footer>
                <h2>页脚Footer</h2>
            </footer>
          </div>
       </body>
</html>

2、css文件

body{
	background-color:#CCCCCC;
	margin::0px auto;
	max-width:2000px;
	boder-color:#FFFFFF;
	color:black;
}
header{
	background-color:#2289F0;
	display:block;
	color:#FFFFFF;
	text-align:center;
}
h1{
	font-size:72px;
	margin:0px;
	txet-align:center;
}
h2{
	font-size:24px;
	margin:0px;
	text-align:center;
}
h3{
	font-size:18px;
	magin:0px;
	text-align:center;
}
nav{
	display:block;
	width:100%;
	float:left;
	text-align:center;
	background-color:white;
	padding-top:20px;
	padding-bottom:20px;
}
nav a:link,nav:visited{
	display:inline;
	border-bottom:3px solid #fff;
	padding:10px;
	text-decoration:none;
	font-weight:bold;
	margin:5px;
}
nav a:hover{
	color:white;
	background-color:#F47D31;
}
nav h3{
	margin:15px;
}
#container{
	background-color:#CCC
}
section{
	display:block;
	width:60%;
	float:left;
}
article{
	background-color:#eee;
	display:block;
	margin:10px;
	padding:10px;
}
article header{
	padding:5px;
}
article footer{
	padding:5px;
}
article:h1{
	font-size:18px;
}
aside{
	display:block;
	width:20%;
	float:left;
}
aside:h3{
	margin:15px;
}
aside p{
	margin:15px;
	font-weight:bold;
}
footer{
	clear:both;
	display:block;
	background-color:#2289F0;
	color:#FFFFFF;
	text-align:center;
	padding:15px;
}
footer h2{
	font-size:14px;
	color:white;
}
a{
	color:#F47D31;
}
a:hover{
	text-decoration:underline;
}