一、效果

二、代码

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

3、注意事项

html文件与css文件应位于同一文件夹下。

网页整体布局基本模板相关推荐

50个photoshop网页设计教程-整体布局篇
使用photoshop画一个网页,对于前端设计师来讲是一个非常简单也必须要胜任的工作.今天,收集了50个相关教程,主要是网页布局应用方面,如果您对于网页设计有爱好,可以看一下.尤其适合新手,可能页面不 ...
DIV+CSS进行布局 HTML+CSS+JS大作业——汽车销售网站模板(7页) html网页设计期末大作业_网页设计平时作业模板下载
HTML+CSS+JS大作业--汽车销售网站模板(7页) html网页设计期末大作业_网页设计平时作业模板下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
HTML期末大作业 : 个人网页制作大学生个人网页设计个人网站模板简单静态HTML个人网页作品...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
HTML期末大作业 : 个人网页制作大学生个人网页设计个人网站模板简单静态HTML个人网页作品
HTML5期末大作业:个人相册网站设计--清新蓝色个人相册摄影图库(5页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品常见网页 ...
计算机网页设计布局与排版研究,论计算机网页设计的布局与排版
王禹智摘要:网页设计是一种直观的视觉语言,需要对其进行布局与排版.虽然网页设计与平而设计之间存在一定的区别,但是其两者依然存在一定的相似之处,网页设计应该充分借鉴利用平而设计的原则与方法.网页设计 ...
响应式网页的布局设计
值得收藏的14款响应式前端开发框架作为今年大热的设计趋势,响应式已然是设计师的标配技能.今天阿里的同学从响应式设计的布局类型.布局实现两方面深入讲解,有哪些实现布局的方式,该采用何种方式,都有相当专 ...
CSS网页制作布局实例教程
本教程最终效果如下(浏览示例页面): 本教程素材及页面源代码下载教程的每个部分都有其侧重点,其中前三节都是关于素材制作与设计的,要求有一定的Photoshop操作基础,我想这也是网页设计必备的基础技 ...

网页整体布局基本模板

一、效果

二、代码

1、html文件

2、css文件

3、注意事项

网页整体布局基本模板相关推荐

最新文章

热门文章