您现在的位置是:首页 > cms教程 > WordPress教程WordPress教程
wordpress模版twentyeleven布局创新
紫安2025-02-19 19:11:22WordPress教程已有13人查阅
导读这里就看三个div了,div#main包含了div#primary和div#secondary。为了更清楚,分别给div#primary和div#secondary加上了#069和yellow的背景颜色。
首先上它index.php的一段代码(主要是看它的布局了,这是从浏览器端拷贝出来的,不是最原始的代码了)。
这里就看三个div了,div#main包含了div#primary和div#secondary。为了更清楚,分别给div#primary和div#secondary加上了#069和yellow的背景颜色。
下面的重点就是div#primary和div#secondary。 布局的实现
1、各层的居中:由最外层的div#page实现,html代码中未贴出来 2、div#primary:
宽度为100%由父元素决定,此处为1000px
通过float浮动和margin结合与div#secondary的float浮动和margin实现了巧妙的定位功能
(background是为了区分层加上的) 3、div#secondary
宽度为18.8%由父元素决定,此处为188px
通过float浮动和margin结合与div#primary的float浮动和margin实现了巧妙的定位功能 总结:
1、感觉比较巧妙的地方
首先,通过div#primary和div#secondary的float:left和float:right是两个层浮动
然后,div#primary中margin-right:-264px,这样就给div#secondary留下了264px的空间,div#secondary的宽度188px加上margin-right的76px正好为264px。
2、这样的好处
尝试着将div#primary的margin-right向负的更多,将div#secondary的margin-right更大的趋势调整,这样即使div#secondary的位置达到了div#primary中内容的位置,也只是重叠不会影响其内容,可以巧妙实现定位作用。
这里就看三个div了,div#main包含了div#primary和div#secondary。为了更清楚,分别给div#primary和div#secondary加上了#069和yellow的背景颜色。
下面的重点就是div#primary和div#secondary。 布局的实现
1、各层的居中:由最外层的div#page实现,html代码中未贴出来 2、div#primary:
宽度为100%由父元素决定,此处为1000px
通过float浮动和margin结合与div#secondary的float浮动和margin实现了巧妙的定位功能
(background是为了区分层加上的) 3、div#secondary
宽度为18.8%由父元素决定,此处为188px
通过float浮动和margin结合与div#primary的float浮动和margin实现了巧妙的定位功能 总结:
1、感觉比较巧妙的地方
首先,通过div#primary和div#secondary的float:left和float:right是两个层浮动
然后,div#primary中margin-right:-264px,这样就给div#secondary留下了264px的空间,div#secondary的宽度188px加上margin-right的76px正好为264px。
2、这样的好处
尝试着将div#primary的margin-right向负的更多,将div#secondary的margin-right更大的趋势调整,这样即使div#secondary的位置达到了div#primary中内容的位置,也只是重叠不会影响其内容,可以巧妙实现定位作用。
本文标签:
很赞哦! (0)
暂无内容 |
暂无内容 |
暂无内容 |
暂无内容 |
随机图文
WordPress站点文章排序修改方法
我们常见的WordPress站点文章排序,通常情况下是按发布时间的升序或降序方式排列,这种排序方式几乎可以满足大多数站点的需求了,但是有些另类的站点可能会有一些另类的需求WordPress如何判断访问的是什么浏览器
目前大部分主题模板对已淘汰的IE支持不好,影响体验,可以利用WordPress提供的变量,判断访问者用浏览器,然后提醒用户升级浏览器。看到好看的wordpress主题怎么扒
怎么抄别人的wordpress主题?抄别人wordpress主题的方法:首先打开想要仿制的WordPress网站;然后右键查看源代码WordPress升级时提示另一更新正在进行的解决方法
升级WordPress时由于国内连接WP服务器慢会造成更新中途停止,并在数据库wp_options表中增加core_updater.lock记录
留言与评论 (共有 0 条评论) |