http://blog.csdn.net/veeasy/article/details/42527301
首先我想说的是,在windows下配置vagrant环境比linux和mac下要恶心和麻烦的多。
因为vagrant启动默认需要的很多服务,windows下面都没有,比如用来做目录映射的rsync
折腾了一晚上,rsync装好了,但是还需要进一步配置脚本
Drupal使用Views Exposed Filter-Ajax--Auto-Submit时后台预览页面显示正常,但是前台页面相关的button没有隐藏,原因是因为
在自定义的主题中每有载入系统默认的基础样式system.base.css
此样式设置文件里含有大量关于ajax的样式,如auto-complete, auto-submit等。
注意drupal默认的ajax隐藏的表单元素都会大有js-hide的class。
Vagrant Box下载
点击到确定的发行版版本页面
https://atlas.hashicorp.com/debian/boxes/jessie64/versions/8.5.2
一般都是如上的链接
在链接后面加入/providers/virtualbox.box
https://atlas.hashicorp.com/debian/boxes/jessie64/versions/8.5.2/providers/virtualbox.box
上面的链接就是最终的下载链接。
css中如果父元素被被设置overflow:hidden,子元素采用position:absolute。
则子元素的超出部分不会被隐藏。
http://www.pc6.com/infoview/Article_51111_all.html
https://www.drupal.org/node/37775
https://www.drupal.org/node/2117411
// Add tooltip for product gallery var h2TitleObj = $('.node-type-structure-product h2'), productImageGalleryTop = $('.product-gallery').offset().top, productImageGalleryLeft = $('.product-gallery').offset().left; //console.log(typeof productImageGallery.offset().top); //console.log(typeof productImageGallery.offset().left); $.each(h2TitleObj, function (key, value) { if (this.innerHTML.trim() == "Images") { //$(this).addClass('tooltip-active').attr('tooltip-attr','Click to see large image'); /* $(this).tooltip({ show: { effect: "blind", duration: 800 }, content: "Click to see large image", }); */ $(this).attr('tooltip-attr','Click to see large image').tooltip({ //show: { effect: "blind", duration: 800 }, content: "Click to see large image", items: "[tooltip-attr]", position: { //my: "left top", //at: "right center", collision: "none", //of: ".product-gallery", //within: ".product-gallery",}, using: function () { $(this).css({top: productImageGalleryTop+"px", left: productImageGalleryLeft+"px"}); }, }, }); $(this).tooltip("open"); } });
CSS样式组件化符合开发的内聚和耦合原则,同时可以维持网站样式的唯一性,构建统一的视觉体验,从而形成用户对产品和品牌的统一性认识。
鉴于目前大家大多使用CSS预处理器来编写CSS代码,我们这里就以sass为例。
styles.scss # import all scss files --_normalize.scss/_reset.scss --_mixins.scss --_colors.scss # color palettes --_components.scss --_animate.scss --_layout.css --_small.scss # cellphone styles --_medium.scss # tablet styles --_large.scss # monitor styles --_print.scss --_extend.scss --_rtl-language-support.scss
CSS组件话的另一个思路是按照功能和业务逻辑进行划分
比如一个B2B网站具体的产品页可以这样划分css组件
all items including title summary image gallery video product details //含有table和list application package shipping delivery moq price terms presale aftersale notes inquery //form
为了满足SEO的要求,很多时候我们不得不将表格改造为更加Search Engine Friendly的unordered list或是ordered list,但是在网页的页面上,我们更希望列表是以表格的形式展现给用户的,这样方便用户的阅读,满足用户体验的要求。
CSS的display table相关的属性可以满足这样的设定。
Display table需要有着和表格html结构类似的markup,其实不严格按照table的markup结构也是可以渲染的。有人说,如果不按照table的markup,就不符合W3C的规范,关于这一点我不是很认同。我认为css只是改变了部分html的渲染方式,而这一点恰恰是W3C希望大家去尝试的,即不修改html结构的基础上改变html的渲染方式。
闲话少说,上代码
<ul class="table-row-wrap"> <li class="table-row"> <ul class="tables-cell-wrap"> <li class="table-cells">Cell1</li> <li class="table-cells">Cell2</li> <li class="table-cells">Cell3</li> </ul> </li> </ul>
其实上面没有完全按照table相似的html来构造,按照表格显示很简单
.tables-cell-wrap{ display: table; width: 100%; } .table-cells{ display: table-cell; width: 33%; border-right: 1px solid #cccccc; text-align: center; vertical-align: middle; padding: 0.8em 1em; }
注意,如果将table-row-wrap设置display:table,再将tables-cell-wrap设置display:table-row,然后设置table-cells为display:table-cell, 这个时候,ul.tables-cell-wrap会出现不能铺满container的情况,这个现象可能和html本身的结构有关系。