<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>CSS DIV 1</title><Linkrel= "stylesheet"type= "Text/css"href= "1.css"></Link><Scripttype= "Text/javascript"src= "Jquery-3.0.0.js"></Script><Scripttype= "Text/javascript"src= "1.js"></Script></Head><Body> <DivID= "Main"class= "Main"> <DivID= "Left"class= "Left"> <DivID= "Lefttop"class= "Lefttop"> <DivID= "Navdescription"class= "Navdescription">Left</Div> <DivID= "Navimg"class= "Navimg"> <imgsrc= "Toleft.png"> </Div> </Div> <DivID= "Leftbottom"class= "Leftbottom"> <Divclass= "LeftBottom1"> <DivID= "LeftBottom1"class= "Contentstyle">LeftBottom1</Div> </Div> <Divclass= "LeftBottom2"> <DivID= "LeftBottom2"class= "Contentstyle">LeftBottom2</Div> </Div> <Divclass= "LeftBottom3"> <DivID= "LeftBottom3"class= "Contentstyle">LeftBottom3</Div> </Div> </Div> </Div> <DivID= "Right"class= "Right"> <DivID= "Rightcontent"class= "Rightcontent">Right</Div> </Div> </Div></Body></HTML>
1.css
. Main {width:1280px;height:300px;background-color: #7FFFD4; float:left;}. Left {Float:left;width:20%;height:80%;background-color:yellow;}. right {float:right;width:80%;height:84%;background-color:lightblue;}. Rightcontent{height:inherit;text-align:center;vertical-align:bottom;}. Lefttop {}.leftbottom {margin-top:60px;}. leftBottom1 {height:60px;background-color: #00FF00; border-top:3px solid #FF0000;}. leftBottom2 {height:60px;background-color: #FF00FF; border-top:3px solid #FF0000;}. LEFTBOTTOM3 {height:60px;background-color: #FFE4E1, border-top:3px solid #FF0000; border-bottom:3px solid #FF0000;}. navdescription {float:left;padding-top:17px;padding-left:95px;}. navimg {float:right;height:100%;cursor:pointer;}. Contentstyle{padding-top:18px;padding-left:70px;cursor:pointer;}
1.js
functionToLeft () {$ (". Left"). css ({"width": "2.5%" }); $(". Left. Navdescription"). css ({"Display": "None" }); $("IMG"). attr ({"src": "Toright.png" }); $(". Right"). css ({"width": "97.5%" }); $("IMG"). attr ({"onclick": "ToRight ();" }); } functionToRight () {$ (". Left"). css ({"width": "20%" }); $(". Right"). css ({"width": "80%" }); $(". Left. Navdescription"). css ({"Display": "Block" }); $("IMG"). attr ({"src": "Toleft.png" }); $("IMG"). attr ({"onclick": "ToLeft ();" }); } functionshowleftcontenttoright (content) {varText =$ (content). text (); $(". Rightcontent"). text (text); } $ (). Ready (function() { if("toleft.png" = = = $ ("img"). attr ("src"))) { $("IMG"). attr ({"onclick": "ToLeft ();" }); } $("#leftBottom1"). attr ({"onclick": "Showleftcontenttoright (' #leftBottom1 ');"}); $("#leftBottom2"). attr ({"onclick": "Showleftcontenttoright (' #leftBottom2 ');"}); $("#leftBottom3"). attr ({"onclick": "Showleftcontenttoright (' #leftBottom3 ');"}); });
Toleft.png (Image from "Thousand Network")
Toright.png (Image from "Thousand Network")
Jquery-3.0.0.js official website is as follows:
http://jquery.com/
Effect Show:
Summary: The style of knowledge points to use
1. Float
Sets the properties of the div block position horizontally. Only right and left two property values.
2. Width height
If you use a percentage, you must have a fixed height/width value, otherwise it will not be effective. (In this case, the. Main if no specific height value is set, the percentage of the height of. Right and. Left is of no effect)
3. Position left Right
If left and right are followed by a specific PX value, then the postion must be set to relative or absolute, otherwise no effect.
4. Hand type icon
Cursor:pointer;
5. Padding margin
The padding is in the block area.
Marging for blocks outside the block area.
6. Separator Bar
border-bottom:1px solid #C0C0C0;
Deficiencies:
Static resources (references to chip paths, JS files) are not implemented in modular management, which is supplemented in the following example.
jquery combined with CSS for accordion components