CSS框架中padding的用法
今天在linux环境下重新搭建了drupal-7.7的版本,确实觉得相当的不错。首先用linux的服务器性能比windows明显有很大优势,然后就是本身drupal的特色决定,自从7的版本以后变得很稳定,唯独一个小问题,就是文件上传的时候,如果是中文名的文件是总会出错,默认会把文件名改掉,但是这样就不符合drupal的上传文件类型了,所以很无语。。。。
看了网上一些办法是把file.inc里面的一个函数给改掉,也没有弄太懂,不过总觉得解决这个问题要改动源代码的话总是一个危险的操作。后来也有人说一个模块translations的貌似,可以将所以的中文文件名自动转换为拼音,猛然想来这个注意不错,后来一想,万一文件名很长,而且又抽象,例如wojiushiyigezhongwenmingziwenjian.txt。。。天啊,那可是看着就晕了。。。。不过现在还没有什么好的解决办法,先晾着吧
说说主要的心得,今天下了好几个不同的主题,安装上界面效果感觉就是不一样,很漂亮。现在我测试用的是corporateclean的主题,有slide show的首页效果,我一直很喜欢这种感觉,滑动感很强,后来发现没有快速的修改其中的图片,这个让我很郁闷阿,难不成增删操作要真的去修改源代码来添加图片吗?经过测试。。。不幸言中了。
在该主题目录下面有page.tpl.php,这个是一个模板文件,slide图片的css设计就在这个其中定义。然后找到
<!--slideshow-->
<div id="slideshow">
这个就是开始定义
以下的都是每一幅图片对应的参数
<!--slider-item-->
<div class="slider-item">
<div class="content">
<!--slider-item content-->
<div style="float:left; padding:0 30px 0 0;"> 这个是图片的样式定义
<img height="250px" class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/slide-1.jpg"/>
</div>
<h2>Sample product name</h2>
<strong>General</strong><br/>
<em>Client name</em><br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div style="display:block; padding:30px 0 10px 0;"><a class="more" href="#">Tell me more</a></div>
<!--EOF:slider-item content-->
</div>
</div>
<!--EOF:slider-item-->
从上述的代码中,就可以设置图片的引用,并且在该文件中,复制粘贴如上的代码,就可以增加主页上的图片slide。
记得在最后一点
<!--slider-controls-wrapper-->
<div id="slider-controls-wrapper">
<div id="slider-controls">
<ul id="slider-navigation">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
这样的代码,有几个图片,就要有多少"<li><a href="#"></a></li>"
然后是padding的用法,<div style="float:left; padding:0 30px 0 0;">,其中float有几种样式,left\right\bottom\top,每个方式代表在在框架中的哪个位置,padding:参数按照上、右、下、左的顺序设置补的距离
如简写方式有:
padding:10px; 意思就是上下左右补丁距离就是10px(10像素)
padding:5px 10px; 意思上下补丁距离为5px,左右的补丁距离为10px,
padding:5px 6px 7px; 意思上补丁距离5px,下补丁距离为7PX,左右补丁距离为6px,
padding:5px 6px 7px 8px; 意思上补丁为5px,右补丁距离为6px ,下补丁距离为7px,左补丁距离8px
如果想要图片向右一些,可以设置第四个参数变大,就可以将内容向右移动