Home > Developer > Web Develop
1. HTML layout (using UL):
<Body> <ul> <Liclass= "List"ID= "lis"> <ahref="#"ID= "link">Weibo</a> <ulID= "UL1"> <Li><ahref="#">Comments</a></Li> <Li><ahref="#">Private messages</a></Li> <Li><ahref="#">@ I</a></Li> </ul> </Li> </ul></Body>
To implement a drop-down list, you must include the list in the binding event when you move the mouse over the slide list to display the list
2. CSS style
1, UL has the default internal and external margin to be removed
2, Li has the default list style to be removed
3, A is not a block element, it needs to become a chunk element
ul{padding:0;margin:0;}Li{List-style:None;}. List{width:120px;Height:30px;Border:1px solid Red;}. List A{Line-height:30px;text-align:Center;Display:Block;text-decoration:None;Color:#000;background:#f1f1f1;}ul ul{width:120px;Border:1px solid #333;background:#FFC;Display:None;}ul ul Li{text-align:Center;Line-height:30px;}ul ul Li a{text-decoration:None;Color:Blue;}ul ul Li A:hover{Color:0 0;background:#90C;}
Annotations:
1. Want to remove an element from your line of sight:
1, Display:none; Show as None
2, Visibility:hidden; Hide
3, Width \ height Set the width height to 0
4, transparency () set the transparency to hundred percent
5, left \ Top
6. Take a white div and cover it.
7, margin negative
------------
3, JS implementation of the sliding list principle
<script type= "Text/javascript" >window.onload=function(){ varLin = document.getElementById ("link"); varLi = document.getElementById (' Lis '); varUL = document.getElementById (' ul1 '); Li.onmouseover=Show; Li.onmouseout=Hide; functionShow () {Ul.style.display= "Block"; Lin.style.background= ' Yellow '; } functionHide () {Ul.style.display= "None"; Lin.style.background= ' #f1f1f1 '; } }</script>
Annotations:
1, JS in how to get the element by ID:
Document get element by id ' link '
Docuemnt.getelementbyid (' link ');
2. Event: Mouse event, keyboard event, System event, form event, custom event ...
OnClick
onmouseover
onmouseout
OnMouseDown
OnMouseUp
OnMouseMove is like a mouse stroke event.
......
OnLoad executes after loading ...
Window.onload = Things
Img.onload
Body.onload
......
3. How to add an event:
element. onmouseover
4, Function: Can be understood as-command, do some things ~ ~
Function ABC () {//must not be actively executed!
......
}
1, direct call: ABC ();
2. Event invocation: element. event = function name Odiv.onclick = ABC;
function () {} anonymous functions
element. event = function () {};
5. Test:
Alert (1); With an alert box that determines the button
Alert (' OK '); ' Ok ' string
Alert ("OK");
6. Variables:
var li = document.getElementById (' lis ');
var num = 123;
var name = ' Leo ';
JS Case _ Slide List
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
