IT工程師數位筆記本

<div class="box" id="box">
    /*最外邊再套一層div，是為了隱藏滾動條*/
    <div class="listWrapOut">
         /*將詳細信息框外邊再套一層div,是為了限制展示區的高度*/
        <div class="listWrap">
            /*詳細信息框*/
            <ul class="list">                            
            </ul>        
        </div>
    </div>
    /*控制框*/
    <nav class="conList">
        /*設置href為#a，意思是點擊該標簽頁面將跳轉到名稱為a的錨點上*/
        <a href="#a" class="con">A</a>
        <a href="#b" class="con">B</a>
        <a href="#c" class="con">C</a>
        <a href="#d" class="con">D</a>
        <a href="#e" class="con">E</a>
    </nav>
</div>

//A信息，設置id為a,意思是將該錨點命名為a
<li class="in" id="a">
    //標題
    <h2 class="in-tit">A</h2>
    //內容
    <div class="in-txt">A.1</div>
    <div class="in-txt">A.2</div>
    <div class="in-txt">A.3</div>
    <div class="in-txt">A.4</div>
    <div class="in-txt">A.5</div>
</li>
<li class="in" id="b">
    <h2 class="in-tit">B</h2>
    <div class="in-txt">B.1</div>
    <div class="in-txt">B.2</div>
    <div class="in-txt">B.3</div>
    <div class="in-txt">B.4</div>
    <div class="in-txt">B.5</div>
</li>

//設置寬度比子級寬度窄20px，及設置overflow:hidden達到隱藏滾動條并可以滾動的效果
.listWrapOut{
    width: 480px;
    overflow: hidden;
}
//使顯示出高度為280px,背景顏色為#ccc
.listWrap{
    overflow:auto;
    height: 280px;
    background-color: #ccc;    
    width: 500px;

}
//通過設置計算后的高度值，使詳細信息框里的每個錨點將鏈接時，都可以正好到達信息框的頂部
.list{
    height: 1080px;
}