亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

信息列表制作

難度初級
時長 2小時 0分
學習人數
綜合評分9.50
77人評價 查看評價
9.8 內容實用
9.6 簡潔易懂
9.1 邏輯清晰
  • children()查找子元素
    查看全部
  • this->li; dom 0級
    查看全部
  • jQuery
    查看全部
  • javaScript onmouseover、onmouseout
    查看全部
  • 走你~~~~~~~
    查看全部
    0 采集 收起 來源:普通信息列表

    2015-04-05

  • 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;}
    查看全部
  • 利用javascript完成鼠標移入和移出效果:此時的展示效果是被隱藏的即display:none; 當鼠標移入到li上,dl展示下拉效果,onmouseover為鼠標移入事件,getElementById('oDl') <ul> <li onmouseover="dl.style.display='block'"><span>*</span>舌尖上的中國 <dl><dt>……</dt></dl> </li> </ul> 如何獲取我想要的Dl呢?首先給要展示的dl定義,<dl id=“oDl”> <dt>……</dt></dl>然后要讓li能準確獲取列表內容 即<ul> <li onmouseover="document.getElementById('oDl').style.display='block'"><span>*</span>舌尖上的中國 <dl><dt>……</dt></dl> </li> </ul> 鼠標移出事件:onmouseout讓鼠標移出的時候使dl的display='none' 直接在<li>里的onmouseover后面加上對onmouseout的定義,即<li onmouseover="……" onmouseout="document.getElementById('oDl').style.display='none'">……</li> 簡便方法:javascript的調用 在style里面設置<script></script> <script> function showDl() {document.getElementById('oDl').style.display='block'}(顯示下拉列表)function hideDl() {document.getElementById('oDl').style.display='none'}(隱藏列表)</script> 然后在li里使用簡便調用實現顯示和隱藏,即<li onmouseover="showDl()" onmouseout="hideDl()">……</li> 注意:每定義一個名字都要加一個function,id的名字和show/hide的名字要對應且避免重復
    查看全部
  • 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;}
    查看全部
  • *{margin:o;padding:0;} .list{…… margin:0 auto;(列表居中)} h3{line-height(垂直居中):24px;font-size(字號):24px;} ul li{list-style-type(列表用什么顯示):默認為實心點 可改為square(方框)/circle(空心圓);list-style-image(列表圖標);list-style-position(實心點的位置) 默認為outside在大框框外面} ul li{list-style:none;一般為了兼容性 把默認的系統(點)給去掉 border-bottom:1px dotted #ccc:可用于設置每一行字下面用灰色的虛線來隔開height:24px;line-height:24px;設置和標題一樣的高度并垂直居中} 給li加小圖標時可以直接在ul li里設置,也可以在body里的li里設置 ,在li里加內聯元素span, 內聯元素設置寬高是不起作用的,要有用可以在ul li span設置里添加上display:inline-block;利用text-align:center;line-height:20px;把小方框里的圖居中顯示
    查看全部
    0 采集 收起 來源:普通信息列表

    2015-02-26

  • $('li').mouse(function(){ $(this).children('dl').css('display','block'); //表示當前的元素 $(this).children('span').addClass('on'); });
    查看全部
  • function showDL(obj){ var aD1 = obj.getElementByTagName('dl')[0]; aD1.style.display='block'; } <li onmouseover="showDL(this)"></li>
    查看全部
  • 帶鼠標懸停效果: ul li span{display:inline-block} ul li dl{display:none} ul li:hover dl{display:block;} ul li:hover span{background:#666;}
    查看全部
  • 普通信息列表:<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

  • 6666666
    查看全部
    0 采集 收起 來源:實踐題

    2014-12-16

  • 我的代碼
    查看全部
    0 采集 收起 來源:實踐題

    2014-11-30

舉報

0/150
提交
取消
課程須知
1. 您至少具備HTML基礎知識,如<ul>、<li>、<a>、<dl>、<dt>、<dd>等標簽; 2. 您至少熟悉JavaScript基礎知識,如何插入JS代碼、利用鼠標事件、獲取DOM元素; 3. 您至少熟悉jQuery基礎知識,如何引用jQuery庫,了解語法;
老師告訴你能學到什么?
拉風的信息列表,帶超鏈接效果、帶高亮效果和帶手風琴效果,運用CSS樣式、JavaScript和jQuery三種方法現實帶手風琴效果的信息列表。

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!