利用不同样式改变相同xhtml结构的布局
作者：林小志 来源：林小志blog 发布时间：2008-08-20 18:17:00
标签：样式,xhtml,布局
这个只是一个简单的比较无聊的尝试，类似blog等一些网站的换肤功能都是以此方式改变网站的皮肤。对于这些方法大家会的比较多，没啥说的。主要我是想说的是，别为了样式而写结构，而是为了结构去写结构。
对于刚刚说的这点，说白其实就是大家写结构的时候不要因为某些标签的文字是大是粗的所以就用他，而不去写样式，我们应该是从语义上去着手。偏离了，不废话，直接看demo吧。
先看结构：
<div id="header">#header</div>
<div id="container">
<div class="main-box">.main-box</div>
<div class="sider-menu">.sider-menu</div>
<div class="sider">.sider</div>
</div>
<div id="footer">#footer</div>
样式的话，大家有兴趣就自行查看源码下载吧，文件名就是编号不同。目前这个只是一个很简单的练习的东西，没考虑扩展性的问题，宽高都是固定的，下次有时间考虑一下带扩展性的东西吧。
0
投稿猜你喜欢
- CSS 中的 position 属性可以很容易的将指定的元素定位到理想的位置。但在使用这一属性时需要注意，尤其是在表格元素中。为了说明此问题
一般上电子商务网站买东西的用户分三种：随便看看，就是不买先看看，买不买再说就是来买东西的这样的需求反应到产品页的购买按钮上，我们一般会看到购- ASP与MySQL的连接ASP和MySQL连接目前有两种方法：一种方法是使用MySQLX之类的组件，不过这种连接方法需要支付一定的费用；另外
- 这个函数是前几年刚流行小偷程序的时候，偶写来用于小偷程序中截取代码的；可能有些朋友在我以前的代码中看见过了，但没有写用法，现在把调用方法及使
- 代码如下:DECLARE @c INT DECLARE @c2 INT SELECT @c = COUNT(1) FROM dbo.Spli
- sql server 全文检索有两种搜索方式，一种是contains，另一种是freetext。前者是包含，类似于 like '％关
- 1、汉语分词的由来使用ASP开发的中小企业的网站，对于站内搜索，往往只是简单的通过SQL语句匹配数据库。对于比较短的词语搜索，这个方法是有效
- 最终效果如下图，右侧灰边看相对位置，版权所有谨防假冒：去年曾针对有时间先后的翻页记录了思考片段。之后没来得及调整一直是默认和插件并用，虽然难
- 原来的题目设想为界面视觉效果的统一性，但是“统一”这个词似乎有点敏感，怕触动萌点无数，而我也无意去设定一个什么什么的统一性来侃侃而谈，极为专
- 代码如下:Dim strName, iLoop For Each strName
- 代码如下:td=date() '此次为设置当前日期,主要是为了调试方便,实际应用中可以使用当天日期.. str=
- 元数据简介元数据 (metadata) 最常见的定义为“有关数据的结构数据”，或者再简单一点就是“关于数据的信息”，日常生活中的图例、图书馆
- 网上广泛流传的取 object 的绝对位置的做法是：var getAbsPos = function(pTar
- 代码如下:ALTER function [dbo].[GetOrderNum]( @ebaystockflag varchar(20)//规
- 学习自然语言的最好方法就是溶入相应的语言环境在交流中学习，学习一种编程语言的最好方法就是看例程。为了帮助大家建立wml应用的第一印象，所以请
- 先看一段HTML代码，在下边这段代码中，这张图片的宽度未知，我想写在CSS中写一行限制最大宽度为50px：<div id=&
- nofollow标签是Google2005年推出的，目的是尽量减少垃圾链接对搜索引擎的影响。有用过网页制作工具的人都知道，在这些工具里是找不
- 本月第一天日期SELECT FirstDayOfCurrentMonth = dateadd(mm,datediff(mm,0,getdat
- ORACLE的数据字典是数据库的重要组成部分之一，它随着数据库的产生而产生, 随着数据库的变化而变化, 体现为sys用户下的一些表和视图。数
- 这几年来，我们这个行业一直都在谈用户体验，以用户为中心的设计。“用户体验”是指用户访问网站的界面、功能、相关信息的可读性、操作的方便性，交互
