ul

关于perspective属性与transform-style属性

由 血红的双手。 提交于 2019-12-03 12:51:08
舞台元素perspective的设置位置 如果你要让一个物体在一个空间里运动，比如一个小方块在不停得旋转翻转。我们知道一个方块是由六个面构成的，假设我们用ul li结构来表示好了，一个ul下面有六个li，给每个li设置宽高： 然后让他们移动到各自的位置上： 这时候他们只是一个面，旋转之后拍平在浏览器屏幕上也许就变成了一根线，为了让他们变成一个体，你需要在他们的父级上定义一个transform-style：perspective-3d属性。 这时候给父级设置下动画效果看看整体各个面的状况： 结果发现各个面是一个体了，但是没有透视效果，就是传说中的近大远小效果啦。 所以我们要在父级ul所在的空间也就是ul的父级，添加一个perspective属性: 大功告成。。。 来源： CSDN 作者： Wenky文棋 链接： https://blog.csdn.net/Minegoo/article/details/82527284

Output php multidimensional array to html list

由 匿名 (未验证) 提交于 2019-12-03 10:24:21
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I have the following array set in a php script and i am trying to get it to output as per the code below. I have tried looping but i am at a loss as to how i get it to show the sub arrays. I am hoping someone can help me. PHP Array $fruits = array(); $fruits[] = array('type' => 'Banana', 'code' => 'ban00'); $fruits[] = array('type' => 'Grape', 'code' => 'grp01'); $fruits[] = array('type' => 'Apple', 'code' => 'apl00', array('subtype' => 'Green', 'code' => 'apl00gr'), array('subtype' => 'Red', 'code' => 'apl00r') ); $fruits[] = array('type' =

Preserving color on breadcrumb item click

由 匿名 (未验证) 提交于 2019-12-03 10:10:24
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I have a working demo of breadcrumbs here in this JSFIDDLE Below is the code HTML <div id="crumbs"> <ul> <li><a href="#1">One</a></li> <li><a href="#2">Two</a></li> </ul> </div> CSS #crumbs ul li { display: inline; } #crumbs ul li a { display: block; float: left; height: 50px; background: #3498db; text-align: center; padding: 30px 40px 0; position: relative; margin: 0 10px 0 0; font-size: 20px; text-decoration: none; color: #fff; padding: 30px 40px 0 80px; } #crumbs ul li a:after { content: ""; border-top: 40px solid rgba(0,0,0,0); border

css 关于ul在div里居中且平铺的问题

由 旧巷老猫 提交于 2019-12-03 09:28:19
今天在调整ul居中的问题时，遇到了点小困难，以前在使用ul时候，让其不是垂直的排列而是，横着排列都是使用float:left这个属性，但是呢，今天我在弄一些友情链接的时候，就出现了ul在div中居中不了的问题，就是在div中加入了style=“text-align:center;” ul也不居中，最后仔细对比了网上的，发现时用了float:left的原因，首先平铺，可以对ul的style使用display:inline，而不必使用float属性，这样之后在div上就可以使用style=“text-align:center;” 使ul列表居中显示了。 备注：此种设置方法LI将不能设置宽度，应设置display:inline-block;才可设置宽度，同时DIV设置text-align:cente；才有效 1、假设最初的的代码是这样： <div id="links" style="border:1px solid red;"> <ul> <li><a href="#">link111111</a></li> <li><a href="#">link2222</a></li> <li><a href="#">link33333</a></li> <li><a href="#">link44444</a></li> <li><a href="#">link555555</a></li> <

jQuery: Sortable nested list?

由 匿名 (未验证) 提交于 2019-12-03 09:18:39
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: i'm building a website which has a parent-child Paging structure. I'm looking for a convenient way to administrate the website structure. I want the pages to be sortable Releasing the jQuery sortable code on my generated sitemap (nested UL), doesn't work properly... $('ul.SiteMap ul').sortable(); What's really important is that it should not be possible to sort outside of the current UL. Any suggestions? Thanks in advance. 回答1: It works fine for me. I just assigned each ul to be sorted to a class and then did the following: $('.sortableList'

HTML/CSS Navigation active state

由 匿名 (未验证) 提交于 2019-12-03 09:14:57
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I'm new to HTML and CSS and I just finished implementing my Navigation Bar which works great so far. It is black and on hovering over the fields they turn grey. Now, I'm trying to implement that the field of the active page stays in that grey but it isn't working for me so far and I believe it's because of the HTML . On index.html nothing should be activated as I wont be using that page later. It's just the standard side. For Example then I have Home.html, Contact.html and Forum.hmtl. If I open Index.html in my browser and in my Navbar click

bootstrap - how to put your navbar on top of your background image?

由 匿名 (未验证) 提交于 2019-12-03 08:57:35
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I am new to bootstrap. This is the design I am trying to make: As you can see the navbar is on top op the background image. This is what I have: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"

Reduce Gap between HTML &lt;UL&gt; and &lt;LI&gt; elements

由 匿名 (未验证) 提交于 2019-12-03 08:46:08
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: I have below HTML in my web page: Forum <ul> <li> Stack </ li > <li> OverFlow </ li > </ ul > And as you could see below, I get the items listed perfectly, but there is a fixed gap between <UL> and <LI> elements. Is there a way, I can reduce this gap? i.e. gap between "Forum" and "Stack" text in attached screen? 回答1: The gap does not exist between UL and LI elements, but between the Forum text and the UL element. Most browsers define a default margin around certain elements, like the UL . You get rid of it with CSS: ul { margin : 0

Select doubles using nth-child() in CSS3

由 匿名 (未验证) 提交于 2019-12-03 08:46:08
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: Say I have the following structure for a list: <ul> <li></li><li></li> <li></li><li></li> </ul> and each <li> is 50% width so I want every two to have the same background colour like this: <ul> <li style = " background :# CCC ; " ></li><li style = " background :# CCC ; " ></li> <li style = " background :# DDD ; " ></li><li style = " background :# DDD ; " ></li> <li style = " background :# CCC ; " ></li><li style = " background :# CCC ; " ></li> <li style = " background :# DDD ; " ></li><li style = " background :# DDD ; " ></li> <

How to display an unordered list in two columns?

由 匿名 (未验证) 提交于 2019-12-03 08:33:39
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: With the following HTML, what is the easiest method to display the list as two columns? A B C D E Desired display: A B C D E The solution needs to be able work on Internet Explorer. 回答1: Modern Browsers leverage the css3 columns module to support what you are looking for. http://www.w3schools.com/cssref/css3_pr_columns.asp CSS: ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; } http://jsfiddle.net/HP85j/8/ Legacy Browsers Unfortunately for IE support you will need a code solution that involves JavaScript and dom manipulation. This means
订阅 ul