HTML5怎么制作固定格式的网页

用HTML5布局一个网页, 要求网页大小:宽度为1200PX 高度为900PX 边框为红色;<br/>头部大小宽度为1200PX, 高度为300px, 边框颜色蓝色, 主体内容分为两个:每一个宽度为400PX高度为400PX, 边框颜色为水红色;第二个宽度为800px 高度为400px 颜色为黄色<br/>页脚高度为200px 宽度为1200PX,边框颜色为绿色, 具体方法如下工具/材料 一定的前台代码基础
dw等代码编辑工具
操作方法 01 首先输写CSS代码, 设置网页的大小, 所有内容居中对齐:

HTML5怎么制作固定格式的网页

文章插图

02 运行程序,结果如图:

HTML5怎么制作固定格式的网页

文章插图

03 在<body>标签里面输入<header>标签, 并用Css设置头部大小(宽度为1200PX, 高度为300PX), 边框颜色等

HTML5怎么制作固定格式的网页

文章插图

04 运行程序, 结果如图

HTML5怎么制作固定格式的网页

文章插图

05 在<body>标签里面输入<article>标签(注:在<article>标签要嵌入<section>标签, 并为<section>设置浮动), 用Css为<article>标签和<section>标签设置大小, 边框颜色等

HTML5怎么制作固定格式的网页

文章插图

06 运行程序, 结果如图

HTML5怎么制作固定格式的网页

文章插图

07 在<article>标签再嵌入一个<div>标签, 取一个ID名, 用Css为<div>标签和<div>标签设置大小, 边框颜色等, 如图

HTML5怎么制作固定格式的网页

文章插图

08 运行程序, 结果如图

HTML5怎么制作固定格式的网页

文章插图

09 最后设置用<footer>标签设置页脚

HTML5怎么制作固定格式的网页

文章插图

10 运行程序, 结果如图

HTML5怎么制作固定格式的网页

文章插图

11 最后一步, 也是最关键的一点, 清除浮动, 我们就可以在网页中输写内容了

HTML5怎么制作固定格式的网页

文章插图

12 【HTML5怎么制作固定格式的网页】运行程序, 结果如图

HTML5怎么制作固定格式的网页

文章插图



以上内容就是HTML5怎么制作固定格式的网页的内容啦, 希望对你有所帮助哦!

    推荐阅读