B、 盒状(box)模型结构 盒装模型是建立在页面布局的基础上,承载内容和数据的最直接页面基础结构,主要分为容器、标题、内容、底部三个部分。 一个典型的盒装模型效果分为侧栏效果和主栏效果两种风格,统一的HTML结构,通过CSS来控制样式上显示的不同,这一部分在样式层主要讨论。 在首页以及少量特殊页面上,会有额外的风格,但是依然以盒状模型为基础。
点击放大
解析如下:
HTML片段如下:
C、包装(pack)模型 对于站内存在的视频、豆单、播客、小组、话题讨论等等,都有既定的统一表现风格,因此在盒装模型以外,单独设立了面向这些常用内容的模型结构,因为是打包处理,所以称之为包装模型。 包装模型基本风格一致,但是在各处的显示略有不同,同时还会涉及在个人主页上自定义样式等,是需要符合全站出处可用的封装模型。 常见的有:
点击放大
包装模型最重要的变化来自于样式层的处理,其结构本身很简单,就不做解析了,以下是一个视频包的HTML片段范例:
点击放大
出处:蓝色理想
责任编辑:moby
上一页 土豆网前端概况 [3] 下一页 土豆网前端概况 [5]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|