前端开发

 首页 > 前端开发 > html教程 > ul列表标记设计网页多列布局_HTML/Xhtml_网页制作

ul列表标记设计网页多列布局_HTML/Xhtml_网页制作

分享到:
【字体:
导读:
          几天在用CSS写三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方请各位不吝指教。 当需要写一个三列布局的时候,一般情况下我会选...

几天在用CSS写三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方请各位不吝指教。   当需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式:
几天在用CSS写三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方请各位不吝指教。
  当需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式:
图1 DIV布局
  使用这样的嵌套方式无疑可以使代码出错的概率减少很多,但同时这样的布局也略显复杂,对于后期的维护也略显不便。我们在布局导航时经常会使用到一个方法,那就是使用〈ul〉列表来进行布局,而导航可以形容为多列式的布局,既然如此,那么我们也就可以使用〈ul〉来进行页面的多列布局。
图2 DIV布局
这是一个固定宽度的布局,也就是说流动性不强,流动性的布局目前还没有试验过,等有时间了再试验一下,下面贴上这个布局的代码:





使用UL进行多列布局




这是头部



  • 这是左边



    • 这是中间的上部

    • 这是中间的下部



  • 这是右边



这是底部




这段代码在IE7及FF3下都能正常显示,其他浏览器未做测试,如果你有更好的方法不妨提出来。
分享到:
注册表单设计的规则_HTML/Xhtml_网页制作
《Patterns for Sign Up &Ramp Up》很早就读完了,之所以今天才写读后感,细细读完了发现,它更为接近吸引注册、提升活跃度的社区构建引导,是一份社区活跃会员度研究的好资料。 既然答应写读后感,就从我的视角来说一点与注册有关的东西,先把整篇资料的骨架分解一下 《Patterns for Sign Up &Ramp Up》很早就...
类型File的Input按钮功能研究_HTML/Xhtml...
在一些网站进行上传时,当单击了“浏览”按钮之后会弹出【选择文件】的对话框。很多时候我们需要只上传图像文件,那么在弹出的【选择文件】对话框中只显示了相关图片格式的文件,此外其余格式文件一律过滤不被显示。 比如 http://www.youku.com/v1.0.0326/v/sw 在一些网站进行上传时,当单击了“浏览”按钮之后...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……