HTML5基础网页设计（加代码CSS)

最新推荐文章于 2025-10-31 18:27:07 发布

原创最新推荐文章于 2025-10-31 18:27:07 发布 · 7.1k 阅读

113 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

这是一个使用HTML5和CSS编写的简单网页模板，包括页眉、导航栏、侧栏、主要内容区域和页脚。网页设计中，页眉采用深蓝色背景，内含页眉标题和欢迎信息。导航栏包含多个链接菜单，侧栏有多个主题内容。主体部分由两篇文章组成，每篇文章都有标题、内容和页脚。整体网页背景为浅灰色，CSS样式定义了各个元素的颜色、大小、布局和链接样式。

简单网页的模板，多多支持，感谢。知识整理

一、HTML5

简单网页设计：

CSS修饰

一、HTML5

简单网页设计：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>简单网页测试</title>

        <style>
            header {
                background-color: #05386b;
                display: block;
                color: #e61010;
                text-align: center;
            }
        </style>
        <link rel="stylesheet" href="E:\CSS\html5.css">
    </head>

    <body>
        <header>
            <h1>页 眉</h1>
            <h2>欢迎来到  我的网页</h2>
        </header>
        <div id="container">
            <nav>
                <a href="http://www.example.com">菜单一</a>
                <a href="http://www.example.com">菜单二</a>
                <a href="http://www.example.com">菜单三</a>
                <a href="http://www.example.com">菜单四</a>
                <a href="http://www.example.com">菜单五</a>
                <a href="http://www.example.com">菜单六</a>
                <a href="http://www.example.com">菜单七</a>
                <a href="http://www.example.com">菜单八</a>
            </nav>
            <aside>
                <h3>侧栏科目</h3>
                <p>侧栏内容 JAVA语言</p>
                <p>侧栏内容  HTML5设计</p>
                <p>侧栏内容  虚拟化</p>
                <p>侧栏内容  数据库基础</p>
                <p>侧栏内容  C语言</p>
                <p>侧栏内容 python</p>
            </aside>
            <section>
                <article>
                    <header>
                        <h1>文章页眉Article Header</h1>
                    </header>
                    <p>关于如何使用典韦解控问题</p>
                    <p>如何安其拉大招被免疫</p>
                    <p>如何使沙漠荒漠化</p>
                    <p>怎么才能找到工作</p>
                    <p>找工作就来58同城</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>侧栏内容 Linux</p>
                <p>侧栏内容  Windows</p>
                <p>侧栏内容  易语言</p>
                <p>侧栏内容 web</p>
                <p>侧栏内容  前端</p>
                <p>侧栏内容 后端</p>
            </aside>
            <footer>
                <h2>页脚Footer</h2>
            </footer>
        </div>

    </body>
</html>

CSS修饰

body {
	background-color:#CCCCCC;
	margin:0px auto;
	max-width:900px;
	border:solid;
	border-color:#FFFFFF;
	color:RGB(120,102,87);
}

header {
	background-color:#0e81f3;
	display:block;
	color:#FFFFFF;
	text-align:center;
}

h1 {
	front-size:72px;
	margin:0px;
}

h2 {
	front-size:24px;
	margin:0px;
	text-align:center;
}

h3 {
	front-size:18px;
	margin:0px;
	text-align:center;
}

nav {
	display:block;
	wifth:100%
	float:left;
	text-align:center;
	background-color:white;
	padding-top:20px;
	padding-bottom:20px;
} 

nav a:link,nav a:visited {
	display:inline;
	border-bottom:3px solid #fff;
	padding:10px;
	text-decoretion:none;
	margin:5px;
}

nav a:hover {
	color:white;
	background-color:#F47D31;
}

nav h3 {
	margin 15px;
}

#container{
	backgroumd-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{
	diaplay: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;
}

/*links*/
a{
	color:#F47D31;
}

a:hover{
	text-decoration:ungerline;
}

图片