信息列表制作_学习笔记

首页免费课信息列表制作笔记

信息列表制作

                
                vivian
            Web前端工程师

                    查看讲师更多课程 
                    vivian讲师的其他课程
                
JS动画效果
初级·113941
免费课程
                                
                难度初级
            
                时长 2小时 0分
            
                学习人数
            
综合评分9.50
                            77人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.6
                                简洁易懂
                            
                                9.1
                                逻辑清晰

最热最新

纪楠 00:06

Hi 这堂课不错在这里记录一下避免忘记

查看全部

1 采集收起来源：带鼠标悬停效果
2018-03-22
开开心心开开心心开开心心ttkxlk 00:04

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试擦测试测试才女测试Test testTest testTest testTest test测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试擦测试测试才女测试Test testTest testTest testTest test测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试擦测试测试才女测试Test testTest testTest testTest test测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试擦测试测试才女测试Test testTest 测试测试测试存车处此次存车处存车处纯纯粹粹存车处存车处存车处存车处此次长春汽车长春纯纯粹粹从此次查处纯纯粹粹成成成成成成从此次查处此次才testTest testTest test

查看全部

1 采集收起来源：练习题
2018-03-22
开开心心开开心心开开心心ttkxlk

Test testTest testTest testTest testTest testTest tesrtesrtrsttrztestTest testTest testTest testTest testTest Test testTest testTetestTestestytstrfyyrdrstdtesttestTest testTest testttestTest testTest testTest testTest testTest testTest testTest testTest testTest testTest testTest testTest testTest testTest testTest testTest testTest testTest testTest testTest tetestTest testTest testTest tes

查看全部

1 采集收起来源：练习题
2018-03-22
开开心心开开心心开开心心ttkxlk

上大学。 hjkskl

查看全部

1 采集收起来源：练习题
2018-03-22
慕课女神的哥哥的大叔 00:25

hao123落伍了

查看全部

1 采集收起来源：普通信息列表
2018-03-22
newdays 16:36

SPAN标签的使用

查看全部

1 采集收起来源：普通信息列表
2018-03-22
Honghong1223

/*jq有Id的时候 $(document).ready(function(){ $("#list").mouseover(function(){ $("#dl").css("display","block"); }); $("#list").mouseout(function(){ $("#dl").css("display","none"); }) });*/ /*js // onmouseover="showdl(this)" onmouseout="hidedl(this)" // onmouseover="showdl(this)" onmouseout="hidedl(this)" function showdl(obj){ var dl=obj.getElementsByTagName('dl')[0]; dl.style.display="block"; } function hidedl(obj){ var adl=obj.getElementsByTagName('dl')[0]; adl.style.display="none"; }*/

查看全部

1 采集收起来源：手风琴效果（jQuery）－优化方法
2018-03-22
Presist丶沈

ul 标签:HTML无序列表 1.ul标签是成对出现的,以<ul>开始,</ul>结束 2.每一列使用<li>标签定义,每一列使用一个点作为开头实例: <ul> <li>www</li> <li>imooc</li> <li>com</li> </ul> 结果: www imooc com 属性： 1.CSS list-style-type 属性用来定义li列表的项目符号的，即列表前面的修饰。语法结构: list-style-type:值属性的属性值有很多，在这里列举比较常用的几个。 none：不使用项目符号。 disc：实心圆。 circle：空心圆。 square：实心方块。 demical：阿拉伯数字。 lower-alpha：小写英文字母。 upper-alpha：大写英文字母。 lower-roman：小写罗马数字。 upper-roman：大写罗马数字。 2.CSS list-style-image 属性用来定义使用图片代替项目符号。语法结构: list-style-image:值属性取值： none：没有替换的图片。 url：要替换图片的路径。 3.CSS list-style-position 属性用来定义项目符号在列表中显示位置的属性。语法结构： list-style-position:值属性取值: inside：项目符号放置在文本以内。  outside：项目符号放置在文本以外。

查看全部

1 采集收起来源：带鼠标悬停效果
2018-03-22
f_ 01:13

1.当鼠标划过文字时变颜色可利用a标签设置空的超链接，在li中设置，<a href="##"></a>但是它不是划过时变的颜色而且还有下划线，所以在前面要把这个默认项给去掉 ul li a{text-decoration:none;去掉下划线color:#000；设置文本颜色为纯黑色}划过变色加下划线可利用hover来完成，在style里设置ul li a：hover{color:#900;text-decoration:underline;} 注意：a标签是成对出现的每一个li里都得设置 2.鼠标划过时整个li背景色发生变化让谁变就在谁后面紧接hover属性 ul li:hover{background:#F90;color:#00F;}要文字能点击跳转就设置a标签 3 鼠标划过时有内容展开先在每一个li下面设置dldt列表即<dl><dt></dt><dt></dt><dl>类似的内容，注意li设置的高度，高度不够时文字会重叠在一起无法正常显示 dl里的文字是在划过时才会显示的，所以需要隐藏: ul li dl{padding-left:20px;(给li文字前面留点空格以区分)display:none;(隐藏文字)} 当鼠标划过li的时候要显示文字，这里用到了hover属性，显示的是dl里的内容，即ul li:hover dl{display:block;（显示文字）} 在li里添加的span图标当鼠标划过时要变色也是利用hover， ul li:hover span{background:#666;}

查看全部

1 采集收起来源：带鼠标悬停效果
2018-03-22
M梦

1.当鼠标划过文字时变颜色可利用a标签设置空的超链接，在li中设置，<a href="##"></a>但是它不是划过时变的颜色而且还有下划线，所以在前面要把这个默认项给去掉 ul li a{text-decoration:none;去掉下划线color:#000；设置文本颜色为纯黑色}划过变色加下划线可利用hover来完成，在style里设置ul li a：hover{color:#900;text-decoration:underline;} 注意：a标签是成对出现的每一个li里都得设置 2.鼠标划过时整个li背景色发生变化让谁变就在谁后面紧接hover属性 ul li:hover{background:#F90;color:#00F;}要文字能点击跳转就设置a标签 3 鼠标划过时有内容展开先在每一个li下面设置dldt列表即<dl><dt></dt><dt></dt><dl>类似的内容，注意li设置的高度，高度不够时文字会重叠在一起无法正常显示 dl里的文字是在划过时才会显示的，所以需要隐藏: ul li dl{padding-left:20px;(给li文字前面留点空格以区分)display:none;(隐藏文字)} 当鼠标划过li的时候要显示文字，这里用到了hover属性，显示的是dl里的内容，即ul li:hover dl{display:block;（显示文字）} 在li里添加的span图标当鼠标划过时要变色也是利用hover， ul li:hover span{background:#666;}

查看全部

2 采集收起来源：带鼠标悬停效果
2018-03-22
spring_summer

普通信息列表：<ul><li></li></ul> 修改ul li的前缀点样式：list-style-type:square(实心方块)/circle(空心圆)/disc(默认，实心圆)/decimal(数字); 去掉前缀点的样式：list-style:none; display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 IE下实现display:inline-block: 有两种方法：　　1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：　div {display:inline-block;...} 　　div {display:inline;} 　　2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：　　div {display:inline; zoom:1;...}

查看全部

1 采集收起来源：普通信息列表
2018-03-22
CCAmber 11:08

信息列表制作 jquery核心代码

查看全部

1 采集收起来源：手风琴效果（jQuery）－优化方法
2018-03-22
CCAmber 10:37

信息列表制作 JS核心代码

查看全部

1 采集收起来源：手风琴效果（jQuery）－优化方法
2018-03-22
qq_烟雨倾城_0

无序列表的特点就是：<a></a>标签只能写在<li></li>标签中。

查看全部

1 采集收起来源：带鼠标悬停效果
2018-03-22
晚安sp

6666666

查看全部

0 采集收起来源：实践题
2014-12-16