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

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于N

黑猫警长BmW

6519人浏览 · 2022-03-20 13:49:00

黑猫警长BmW · 2022-03-20 13:49:00 发布

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

一、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;
}

图片