您现在的位置是:首页 > cms教程 > WordPress教程WordPress教程
wordpress模版twentyeleven布局创新
紫安2025-02-19 19:11:22WordPress教程已有9人查阅
导读这里就看三个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主题加载速度慢的优化方法
在header后调用PHP flush函数,可以加速WordPress博客。在header.php文件的结束标签前,加上以下的代码行:wordpress需要授权吗,wordpress是免费开源的吗
WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。WordPress主题制作导航的多种方法介绍
在WordPress主 题制作中,导航菜单的制作算是一个重点,已经写好导航菜单的HTML代码,放在WordPress主题中如何动态调用呢?本文将给你介绍几种编写PHP代 码动态实现导航的方法
留言与评论 (共有 0 条评论) |