制作面向复杂终端设备的html模板
如今的网络已经不在是PC(个人电脑)一家的天下了。对于一个站点来说,面向不同的终端设备平台(手机、平板电脑等)设计独立的html模板也是大势所趋。
但是,说起来容易,做起来却不是那么简单。个人站长们需要花费更多的精力和时间在应对不同浏览终端设备的切换中。
有没有能够自适应的html模板呢?答案是肯定的。本文中,笔者为各位简单叙述一款能够在桌面浏览器和手机间自由切换的html模板。
HTML文档结构
笔者在下面的例子中用到了html 5的部分元素,如header、footer等等。个人强烈推荐在html 5。但可能在IE浏览器中无法很好的兼容,请使用html shiv(关于html shiv是什么请搜索之^_^)。
例子中页面内容很简单,毋须赘述。使用一个wrapper类的div来封装整个页面。带有导航的、标题的header; 正文部分则放在article里;页脚中包括一个简单的自我介绍。
具体看下面的代码:
Site Logo
摘要 & 网站副标题
置顶日志:
通过设置”置顶”,您可以将该日志出现在所有日志之前。您只需要在日志编辑器中选中”置顶”选项即可。 “置顶”与”显示”两项为互斥操作:即若您将日志设置为隐藏,则不能同时将其置顶.当您设置了某篇日志或 某几篇日志置顶之后,博客首页日志实际显示数目为:”Blog设置”下设置的分页数+置顶日志数
阅读全文 →
最新日志:
文章1
在您需要调用最新日志的页面上,嵌入下列JS代码:请将”yourblogurl/”处替换为news.php 文件所在正确路径 阅读全文 →
文章2
在您需要调用最新日志的页面上,嵌入下列JS代码:请将”yourblogurl/”处替换为news.php 文件所在正确路径 阅读全文 →
文章3
在您需要调用最新日志的页面上,嵌入下列JS代码:请将”yourblogurl/”处替换为news.php 文件所在正确路径 阅读全文 →
归档
分类
社交
关于本站
XX是中国最大、最具影响力的SNS网站,以实名制为基础,为用户提供日志、群、即时通讯、相册、 集市等丰富强大的互联网功能体验,满足用户对社交、资讯、娱乐、交易等多方面的需求。目前,xx 已经拥有真实注册用户超过7000万、PV4亿、日登录2200万人次。2008年7月,XX正式开放平台,本 着开放的态度与所有第三方公司、独立开发人员一起,跨入互联网的”开放”时代,成为 人与人联系朋友的互动沟通平台。
从网站诞生的第一天起,本站的目标始终就是要做最好的中文编程开发类网站,经过了五年的风风雨雨 ,经历过关站风波,经历过网站搬迁无家可归的局面,也经历过一度因为个人原因想放弃。但是网站开 了五年了,看到有越来越多的朋友光临这里,还有无数的朋友的鼓励和支持,也使我坚定了自己的信心 ,无论如何也要坚持下去。虽然这个网站目前还只是一个个人网站,到目前为止,所有栏目的开发维护 工作只有我一个人撑着,可想而知我的工作量有多大,但是只要还有朋友喜欢这里,我就永远不会关站 。虽然因为一些个人原因,目前网站部分栏目的管理还不是很完善,希望大家也能多多谅解。我一定会 继续不遗余力的为大家提供更多更好的服务,希望大家多多支持!
© 2011 – 制作面向复杂终端类型的html模板
下面是没有添加css样式表的页面效果:
CSS样式表
下面为body建立了一个基本的样式,包括字体大小、样式等等。
body { background: #F9F9F9; color: #222; font-family: “微软雅黑”,'Droid Serif', serif; font-size: 16px; }
其他样式设计
这是剩下的样式设计,正文部分为两列,页面宽度定义为相对数值。
h1 { font-size: 90px; font-family: 'Droid Serif', serif; line-height: 75px; padding: 10px; -webkit-transition-property: font-size; -moz-transition-property: font-size; transition-property: font-size; -webkit-transition-duration: 0.5s, 0.5s; -moz-transition-duration: 0.5s, 0.5s; transition-duration: 0.5s, 0.5s; -webkit-transition-timing function: linear, ease-in; -moz-transition-timing function: linear, ease-in; transition-timing function: linear, ease-in; } h1 a:hover { text-decoration: none; color: #27B3CF; } h2 { font-family: 'Helvetica'; font-size: 18px; padding: 10px; -webkit-transition-property: font-size; -moz-transition-property: font-size; transition-property: font-size; -webkit-transition-duration: 0.5s, 0.5s; -moz-transition-duration: 0.5s, 0.5s; transition-duration: 0.5s, 0.5s; -webkit-transition-timing function: linear, ease-in; -moz-transition-timing function: linear, ease-in; transition-timing function: linear, ease-in; } h3 { font-family: 'Droid Serif', serif; font-size: 30px; } h4 { font-family: 'Droid Serif', serif; padding: 3px; margin: 5px 0 0 0; } h4 a { text-decoration: underline; } h4 a:hover { text-decoration: none; } nav { background: #222; padding: 0; margin: 10px 0;} nav a { color: #F9F9F9; display: block; float: left; padding: 10px; } nav a:visited { color: #f9f9f9; } nav a:hover { text-decoration: none; background: #27B3CF; } nav a:active { position: relative; top: 0; } .left-col { width: 70%; float: left; } .sidebar { width: 20%; float: right; margin-bottom: 10px; -webkit-transition-property: width; -moz-transition-property: width; transition-property: width; -webkit-transition-duration: 0.5s, 0.5s; -moz-transition-duration: 0.5s, 0.5s; transition-duration: 0.5s, 0.5s; -webkit-transition-timing function: linear, ease-in; -moz-transition-timing function: linear, ease-in; transition-timing function: linear, ease-in; } #featured { padding: 20px; } #latest { padding: 20px; } #about { padding: 20px; } p { padding: 0 5px 0 5px; } ul { list-style: none; } ul li { margin: 0 5px; } footer { padding: 5px}
完成后的效果如下:
接下来是重头戏,如何根据浏览器类型自动调整网页的宽度呢?
首先在header之间加入一下代码
添加一个新css文件,media_queries
@media screen and (max-width: 478px) { h1 { font-size: 50px; padding: 1px; } h2 { font-size: 13px; padding: 1px; } body { font-size: 13px; } } @media screen and (max-width: 740px) { .left-col { width: 100%; } .sidebar { width: 100%; } } @media screen and (max-width: 480px) { } img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
在android浏览器或iphone手机中就可以看到网页的显示效果:
=_=!笔者的安卓手机不支持截屏,只好等晚上用ipod截好了再上传图片了。各位不妨通过手机浏览看看效果,是不是和普通pc不一样呢^_^