HTML5设计基本网页-basic frameset

效果如图

其中HTML部分代码如下：

<!doctype html>
<html lang="en"><header><meta charset="utf-8"/><title>Html5 test website!</title><link rel="stylesheet" href="main.css"></header><body> <div id="big_wrapper"><header id="top_header"><h1> Welcome to the new HTML5 web site!</h1></header><nav id="top_menu" ><ul><li>Home</li><li>Tutorials</li><li>Podcast</li></ul></nav>     <section id="main_section"><article><header><hgroup><h1>Title of Article 1!</h1><h2>Subtitle for Article!</h2></hgroup></header><p>This is the best article eva!</p><footer><p>-written by Joanna Qian-</p></footer></article><article><header><hgroup><h1>Title of Article 2!</h1><h2>Subtitle for Article!</h2></hgroup></header><p>This is the best article eva!</p><footer><p>-written by Joanna Qian-</p></footer></article></section>    <aside id="side_news"><h4>News</h4>Bucky has a new dog!</aside><footer id="the_footer">Copyright thenewbostons 2012!</footer>   </div> </body>
</html>

其中CSS部分如下

*{margin:0px;padding:0px;
}
header,section,footer,aside,nav,article,hgroup{display:block;
}h1{font: bolid 20px Tahoma;
}
h2{font: bolid 14px Tahoma;
}
body{text-align:center;
}#big_wrapper{border:1px solid black;width:1000px;margin:20px auto;text-align:left;
}
#top_header{background:yellow;border:1px solid blue;padding:20px;
}
#top_menu{background:blue;color:white;
}
#top_menu li{display:inline-block;list-style:none;padding:5px;font:bold 14px Tahoma;
}
#main_section{float:left;width:660px;margin:30px;  /*720px, 280px left */
}
#side_news{float:left;width:220px;margin:20px 0px;padding:30px;background:#66CCCC;
}
#the_footer{clear:both;text-align:center;padding:20px;border-top:2px solid green;
}
article{background:#FFFBCC;border: 1px solid red;padding:20px;margin-bottom:15px;
}
article footer{text-align:right;
}

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/08/28/2659481.html

HTML5设计基本网页-basic frameset相关推荐

html5模板区别,网页设计和平面设计理念的六大区别
1. 设计理念的不一样平面设计的核心是品牌.它要以品牌为出发点去设计,要在视觉上100%体现品牌的魅力. 而网页设计的核心是用户.网站的目的是与用户100%沟通,是要实现某些特定的功能,这有点像电脑 ...
WAI-ARIA无障碍网页应用 HTML5 设计辅助功能
使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的 ...
基于HTML5+CSS3的网页设计与实现
摘要:随着互联网技术的不断发展,电子设备的广泛应用和高普及度,网页作为互联网信息的重要载体,其网页设计技术将面临新的挑战.HTML和CSS作为网页前端开发所运用的主要核心技术,如何灵活运用,使得web ...
html5学生dw网页设计大作业，hbuilder仿茅台集团网页设计成品模板，图片轮播网页设计模板
html5静态网页设计要是用HTML DIV+CSS JS等来完成页面的排版设计,一般的网页作业需要融入以下知识点:div布局.浮动.定位.高级css.表格.表单及验证.js轮播图.音频视频 Fla ...
免费html5 css3大学生网页设计期末作业网页制作作业成品
html5 css3大学生网页设计期末作业网页制作作业成品布局技术:html5 css3 页面个数:6个网页元素:图文超链接表单效果图: 目录如下: <!DOCTYPE html&g ...
HTML5期末大作业：橙色精美零食网站设计——橙色精美零食(3页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:橙色精美零食网站设计--橙色精美零食(3页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码常见网页设计作业题材有个人. 美食. 公司. 学 ...
HTML5期末大作业：动漫网站设计——电影从你的全世界路过(4页) 网页设计作业 / 动漫网页设计作业,网页设计作业 / 动漫网页设计成品,网页设计作业 / 动漫网页设计成品模板下载
HTML5期末大作业:动漫网站设计--电影从你的全世界路过(4页) 网页设计作业 / 动漫网页设计作业,网页设计作业 / 动漫网页设计成品,网页设计作业 / 动漫网页设计成品模板下载常见网页设计作业 ...
跨平台html5页面代码,HTML5+CSS3跨平台网页设计实例教程
HTML5+CSS3跨平台网页设计实例教程编辑锁定讨论上传视频 <HTML5+CSS3跨平台网页设计实例教程>是2018年8月清华大学出版社出版的图书,作者是陈承欢.韩耀坤.颜珍平 ...
HTML5期末大作业：商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:商城网站设计--蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码常见网页设计作业题材 ...

HTML5设计基本网页-basic frameset

HTML5设计基本网页-basic frameset相关推荐

最新文章

热门文章