標籤：否則 meta 模組 float 小結 bottom osi tle query
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS DIV 1</title><link rel="stylesheet" type="text/css" href="1.css"></link><script type="text/javascript" src="jquery-3.0.0.js"></script><script type="text/javascript" src="1.js"></script></head><body> <div id="main" class="main"> <div id="left" class="left"> <div id="leftTop" class="leftTop"> <div id="navDescription" class="navDescription">left</div> <div id="navImg" class="navImg"> <img src="toLeft.png"> </div> </div> <div id="leftBottom" class="leftBottom"> <div class="leftBottom1"> <div id="leftBottom1" class="contentStyle">leftBottom1</div> </div> <div class="leftBottom2"> <div id="leftBottom2" class="contentStyle">leftBottom2</div> </div> <div class="leftBottom3"> <div id="leftBottom3" class="contentStyle">leftBottom3</div> </div> </div> </div> <div id="right" class="right"> <div id="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
function toLeft() { $(".left").css({ "width" : "2.5%" }); $(".left .navDescription").css({ "display" : "none" }); $("img").attr({ "src" : "toRight.png" }); $(".right").css({ "width" : "97.5%" }); $("img").attr({ "onclick" : "toRight();" }); } function toRight() { $(".left").css({ "width" : "20%" }); $(".right").css({ "width" : "80%" }); $(".left .navDescription").css({ "display" : "block" }); $("img").attr({ "src" : "toLeft.png" }); $("img").attr({ "onclick" : "toLeft();" }); } function showLeftContentToRight(content){ var text = $(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(圖片來自"千圖網")
toRight.png(圖片來自"千圖網")
jquery-3.0.0.js 官網如下:
http://jquery.com/
效果展示：
小結：用到的樣式知識點
1. float
水平方向設定DIV塊位置的屬性。只有right和left兩個屬性值。
2. width height
若用百分比時，必須要有固定的高度/寬度值，否則不會有效果。(本例中的.main若沒有設定具體的高度值，.right和.left的高度百分比是沒有任何效果的)
3. position left right
若left 和 right 後面跟具體的px值，則postion必須設定為relative或者absolute,否則無效果。
4. 手型表徵圖
cursor：pointer;
5. padding margin
padding 針對塊地區內。
marging 針對塊地區外。
6. 分隔條
border-bottom: 1px solid #C0C0C0;
不足之處:
靜態資源(片路徑、js檔案的引用)沒有實現模組化管理，下例中會補充。
jQuery結合CSS實現手風琴組件
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
