ul

HTML连载78-3D播放器下、背景尺寸属性

折月煮酒 提交于 2020-03-28 00:41:00
一、继续完善之前的页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D188_3DPlayerXia</title> <style> *{ margin:0px; padding:0px; } body{ background:url("image/taobaoFocusPicture.jpg") no-repeat; background-size:cover;/*这个属性表示我们的图片肯定会填满整个网页,无论图片的大小*/ overflow:hidden;/*代表的就是超出屏幕不会出现滚动条*/ } ul{ height: 200px; width: 200px; /*background-color: red;*/ top:150px; position:absolute; left:50%; margin-left:-100px; transform-style: preserve-3d;/*注意这个3D效果设置在了父元素上*/ /*transform:rotateX(-10deg);!*这一行的目的就是为了让我们的3D效果显示更加明显*!*/ animation:sport 10s linear 0s infinite normal;/*动画效果*/ ​ } ul li {

jQuery之元素查找

不想你离开。 提交于 2020-03-27 10:14:17
在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签 1. children(): 子标签中找 2. find() : 后代标签中找 3. parent() : 父标签 4. prevAll() : 前面所有的兄弟标签 5. nextAll() : 后面所有的兄弟标签 6. siblings() : 前后所有的兄弟标签  需求: 1. ul标签的第2个span子标签 2. ul标签的第2个span后代标签 3. ul标签的父标签 4. id为cc的li标签的前面的所有li标签 5. id为cc的li标签的所有兄弟li标签 var $ul = $("ul"); //1. ul标签的第2个span子标签 $ul.children("span:eq(1)").css("background","red"); // 2. ul标签的第2个span后代标签 $ul.find("span:eq(1)").css("background","red") // 3. ul标签的父标签 $ul.parent().css("background","red") // 4. id为cc的li标签的前面的所有li标签 var $li = $("#cc"); $li.prevAll("li").css("background","red"); // 5. id为cc的li标签的所有兄弟li标签 $li

SuperSlidev2.1 轮播图片和无缝滚动

僤鯓⒐⒋嵵緔 提交于 2020-03-27 04:46:53
SuperSlidev2.1 轮播图片和无缝滚动 使用方法点击链接:http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class="bd"> <ul> <li _src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li> <li _src="url(images/2.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li> <li _src="url(images/3.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li> <li _src="url(images/4.jpg)" style="background:#98918E center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li>

HTML5 <li> <ol> <ul> 用法

泄露秘密 提交于 2020-03-27 04:08:36
定义和用法 <li> 标签定义列表项目。 <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。 HTML 与 XHTML 之间的差异 在 HTML 4.01 中,li 元素的 "type" 和 "value" 属性是不被赞成使用的。 在 XHTML 1.0 Strict DTD 中,li 元素的 "type" 和 "value" 属性是不被支持的。 提示和注释: 提示:请使用 CSS 来定义列表和列表项目的类型。 可选的属性 属性 值 描述 type A a I i 1 disc square circle 不赞成使用。请使用样式取代它。 规定使用哪种项目符号。 value number 不赞成使用。请使用样式取代它。 规定列表项目的数字。 <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> 来源: https://www.cnblogs.com/CandiceW/p/7462194.html

为你的博文构建目录

自作多情 提交于 2020-03-25 15:04:12
1. 写在前面 这要从前几天看 Hibernate的用户手册 说起。 这份手册确实挺长,而且还是全英文,对于刚过四级的我来说,看着确实有些“吃力”。这种“吃力”表现在,我经常看着看着就忘了自己看到哪了,对于前面看过的内容的印象特别模糊,于是我就在思考为什么会这样。 是有许多不认识的单词或不懂的语法吗?应该不是。事实上,一般技术文档除了一些专业术语外基本都是一些常见词汇,除了一些约定的或者是有典故的句子外基本上也没有比较复杂的语法; 是文章内容专业太强了吗?好像也不是,我一路读过来并没有感到有无法理解的地方。事实上,就我自己在学习过程中看到过的一些技术或项目的官方文档与相关的一些中文博客对比来看,往往这些“官方文档”讲解的更加简单,内容更加丰富。 是文章太长了吗?这个好像有点关系。本来自己目前刚过四级的英语水平还是在9年义务教育加3年高中教育的煎熬中获得的,这导致对英语产生了天然的排斥心理。看简短的英文文章还好,因为自己知道再坚持坚持就看完了;但是当看到一大段一大段,需要拉动滚动条好一会才能见底的英语文章时,我的内心是复杂的。 最后想了想,我觉得最关键的原因还是不会用英语去思考。就是说不能直接去领会一句话的意思,必须要将一句话在脑袋中翻译成中文才能去思考它传达的意思。再加上我翻译的速度还慢,虽然每句话在读的时候确实是明白了它的意思,但是当遇到较长文章的文章时

「网易官方」极客战记(codecombat)攻略-网页开发1-列表联通listing-liaison

∥☆過路亽.° 提交于 2020-03-24 15:44:13
3 月,跳不动了?>>> 有效地组织列表元素而不使用中断。 简介 <ul> 标签用于无序列表。 <li>标签用于列表内部的列表项,如<ul> tag 默认代码 <!-- <ul>标签用于分组<li>标签。--> <!-- <ul>代表“无序列表”--> <!-- <li>是单独的项目列表。--> <h1>添加3个动物列表</h1> <h2>有翅膀的动物</h2> <ul> <li>蜜蜂</li> <li>会飞的羚羊</li> <li>翼龙</li> </ul> <!-- 添加另一个<h2>标签来定义一个新的列表--> <!-- 将<ul>标签添加到<li>元素组中。--> <!-- 添加另一个<h2>标签来定义一个新的列表--> 概览 #无序列表 243/5000 <ul> 标签用于无序列表。 适用于购物清单或动物列表。 为了让计算机知道列表中除了哪些项目,请务必在关闭标签</ul> 之前使用代表列表项的 <li> 标签。 <ul> <li>Red</li> <li>Blue</li> <li>Green</li> </ul> 列表联通 解法 <!-- <ul>标签用于分组<li>标签。--> <!-- <ul>代表“无序列表”--> <!-- <li>是单独的项目列表。 --> <h1>添加3个动物列表</h1> <h2>有翅膀的动物</h2> <ul> <li>蜜蜂</li>

jQuery DOM操作之删除节点

◇◆丶佛笑我妖孽 提交于 2020-03-24 05:33:21
3 月,跳不动了?>>> 下面示例可能用到如下HTML代码: <ul> <li title="t1">苹果</li> <li>香蕉</li> <li>橘子</li> <li>葡萄</li> <li>草莓</li> </ul> 1、remove()方法: 作用:从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素。 例如,删除上图中<ul>节点中的第二个<li>元素节点,jQuery代码如下: $(document).ready(function() { $("ul li:eq(1)").remove(); }); 当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。下面的jQuery代码说明元素用remove()方法删除后,还是可以继续使用的。 var $li=$("ul li:eq(1)").remove(); $li.appendTo("ul"); //把删除的节点又重新添加到<ul>元素里 可以直接使用appendTo()方法的特性来简化以上代码: $("ul li:eq(1)").appendTo("ul");//appendTo()方法也可以用来移动元素,移动元素时首先从文档上删除此元素,然后将该元素插入到文档中的指定节点。 另外remove(

HTML连载77-3D播放器

馋奶兔 提交于 2020-03-24 02:21:47
一、练习一个3D播放器 1.注意点:动画中如果有和默认样式同名的属性,会覆盖默认样式中同名的属性 2.在编写动画的时候,固定不变的值写在前面,需要变化的值写在后面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D187_3DPlayer</title> <style> *{ margin:0px; padding:0px; } body{ background:url("image/taobaoFocusPicture.jpg") no-repeat; background-size:cover;/*这个属性表示我们的图片肯定会填满整个网页,无论图片的大小*/ } ul{ height: 200px; width: 200px; /*background-color: red;*/ top:150px; position:absolute; left:50%; margin-left:-100px; transform-style: preserve-3d;/*注意这个3D效果设置在了父元素上*/ /*transform:rotateX(-10deg);!*这一行的目的就是为了让我们的3D效果显示更加明显*!*/ animation:sport 10s linear 0s infinite

CSS 基本测试题

人盡茶涼 提交于 2020-03-23 16:16:29
下面提供了18道有关css的测试题,大家可以尝试做一下,一些题可以延伸深挖出很多知识点。 测试题的答案在尾部。大家可以在评论区进行讨论。 1.css区分大小写吗? ul { MaRgIn: 10px; } 这种写法是否正确? 2.为行内元素设置 margin-top 和 margin-bottom是否会产生影响? 3.为行内元素设置 padding-top 和 padding-bottom是否会改变它的位置? 4.如果你有一个<p>元素,它的font-size为10rem, 当用户改变浏览器窗口大小时,该元素的字体是否会响应式改变? 5.伪类:checked作用于radio 或者 checkbox,但是不作用于<option>? 6.在HTML中,伪类:root总是匹配 <html> 元素? 7.translate()函数实现了沿着 z 轴移动元素? 8-14题是针对同一个html,循序渐进。 8. html: <ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul> css: ul { color: red; } li { color:

学会Twitter Bootstrap不再难

谁说胖子不能爱 提交于 2020-03-23 13:42:17
Twitter Bootstrap 3.0 是对其过去的重大改变,现在它更偏向于移动应用的框架,并且宣称是最好的web设计css框架之一,的确如此。 可能有人曾经使用过Twitter Bootstrap 2.0 ,很好,说明对它有了初步的了解。 自从Twitter Bootstrap 3.0成为了偏向移动开发的框架之后,我们的设计将会百分百兼容并且完美显示在移动终端上,是不是很酷呢? 今天让我来代大家一层层的掀开Bootstrap美人的衣服吧,哈哈哈哈,哥YD的笑了。 让我们开始吧 Twitter Bootstrap 网站就是采用Twitter Bootstrap 3.0 框架开发的,你瞧是不是很酷。 你可以从官方网站上把BootStrap 下载下来,然后解压缩下来之后就是这样(下载预编译版就行,毕竟我们没有必要去读懂它的源码): 好了,看到了上面的文件夹了嘛? css文件夹里面包含了: bootstrap.css, bootstrap.min.css, bootstrap-theme.css and bootstrap-theme.min.css. bootstrap.css是最主要的css文件,我们所有的html文件中都必须包含它。(切记!) bootstrap.min.css是压缩版的,当我们正式发布我们的网站的时候建议使用它。 bootstrap-theme.css