模擬片刻網

小記：
想打開看看片刻網，發現片刻網關閉了，最初學習HTML和css的佈局就是從「片刻」
開始的，他的佈局結構清晰，而且便於想要學習前端頁面的學者參考代碼，理解起來也很容易。

自己寫的並不好，但是還是把自己之前的代碼拿出來供大家參考和交流學習，追憶「片刻」。
我的作品的鏈接地址模擬片刻

01header

導航欄的整體佈局如下：

• 整體還是使用盒模型的佈局方式
• 整體對 class爲nav_body的佈局width: 100%;使用定位position: fixed; left: 0; top: 0px; z-index: 1000;
• class爲navheight: 100px; width: 1200px; margin: 0 auto;
• 對class爲nav裏的每個小內容使用float進行浮動
• 對「登錄註冊」按鈕使用transition: all 0.5s;有hover動畫效果
• 當鼠標滾輪下滑一定位置導航欄隱藏，上滑又會出現，使用scrollTop

<!--頂部導航-->
<div class="nav_body" id="nav1" >
    <div class="nav" >
        <div class="nav_logo fl"><img src="img/head-logo.png" alt=""></div>
        <span class="always fl">首頁</span>
        <span class="span fl">閱讀</span>
        <span class="span fl">電臺</span>
        <span class="span fl">碎片</span>
        <span class="span fl">客戶端</span>
        <div class="login fr">登錄 / 註冊</div>
        <div class="edit fr">
            <div><img src="img/edit-icon.png" alt=""></div>
        </div>
    </div>
</div>


<script>
    var nav = document.getElementById("nav1");
    var oTop = document.getElementById("oTop");
    var sNum=0;
    var num=0;
    window.onscroll=function () {
        num = sNum;
        var scr = document.documentElement.scrollTop;
        sNum = scr;
        if (scr > 80 && num - scr < 0) {
                nav.style.top = -100+"px";
        }
        else {
            nav.style.top = 0+"px";
        }
        if(scr <= 600){
            oTop.style.display = "none";
        }
        else{
            oTop.style.display = 'block';
        }
    }
</script>

02content

第一個內容部分：圖片展示如下：

• 佈局仍使用float浮動和定位的方式
• 鼠標懸上會有放大效果
• 滑動顯示的文本樣式可以參考使用
• 多行文本溢出用…省略號形式展示text-overflow: ellipsis;

放大效果
.right div:hover img {
        transform: scale(1.1);
        animation: 1.5s linear;
        transition: 0.5s;
}

配合的還有顯示文字信息：

03title

標題部分都是使用一種結構，展示如下：

<div class="read">
    <img src="img/square.png" alt=""> 閱讀 | Read
</div>
<style>
 .read img {
	vertical-align: top;
     margin-top: 1px;
 }
.read {
    margin: 70px 0 30px 0;
}
</style>

05content

第二個內容部分就是每個標題下的詳細內容，展示如下：

<div class="heart">
    <div class="heartText fl">
        <h2>偷心</h2>
        <h6>By / 子夜晨星 </h6>
        <p>-001-她說：“我要去偷一個東西，你幫我好不好？”她說這句話的時候，
        沒有一點求我辦事的語氣，反而有些趾高氣揚，不可一世的狂傲。
        我當時正躺在草地上曬太陽，沒好氣 
        	<a href="">VIEW ALL
        		<img src="img/viewall.png" alt="">
       		</a>
   		</p>
        <div>3.0k次閱讀 | 評論:24 | 喜歡:119</div>
    </div>
    <div class="heartImg fl"><img src="img/heart.jpg" alt=""></div>
</div>

06content

第三個內容部分，展示如下：

<div class="ting fl">
    <div class="tingImg">
        <div class="p"><img class="play" src="img/play-icon.png" alt=""></div>
        <div ><img class="tingMain" src="img/grandma.jpg" alt=""></div>
    </div>
    <div class="tingText">
        <h2>那份笨拙的愛,是心...</h2>
        <p>主播 / 你好南望</p>
        <div>8.4k次播放 | 評論:33 | 喜歡:288</div>
     </div>
</div>

07content

第四個內容部分，展示如下：

<div class="hot fl"><img src="img/user-bg.png" alt="">
    <div class="hotImg"><img  class="per" src="img/per1.jpg" alt=""></div>
    <div class="userM"><img src="img/user_musician.png" alt=""></div>
    <div class="hotText">
        <div>雙笙子</div>
        <p>古風歌手雙笙</p>
    </div>
</div>

08置頂

找到的位置
<a name="_top"></a>
點擊a去找某位置
<a href="#_top">
    <div id="oTop" class="top">
        <img class="topimg" src="img/back-top.png" alt="">
        <div class="topH"><img src="img/back-topH.png" alt=""></div>
    </div>
</a>

09footer

頁腳佈局，展示如下:

<div class="foot">
    <div class="footer">
    <div class="footImg fl"><img src="img/foot-logo.png" alt=""></div>
    <div class="footText fl">
        <div class="footText1">關於我們 友情鏈接 片刻幫助 意見反饋 成長記憶</div>
        <div>All rights reserved © 2016 pianke.me /黔ICP備17008875號-1</div>
    </div>
    <div class="footRight fr">
        <div class="app fl">
            <img src="img/foot-app.png" alt="">
            <img class="app2" src="img/foot-appH.png" alt="">
        </div>
        <div class="sina fl">
            <img src="img/foot-sina.png" alt="">
            <img class="sina2" src="img/foot-sinaH.png" alt="">
        </div>
        <div class="wechat fl">
            <img src="img/foot-wechat.png" alt="">
        <div class="codes"><img class="code" src="img/pianke-code.png" alt=""></div>
            <img class="we2" src="img/foot-wechatH.png" alt="">
        </div>
    <div class="safe fl">
            <img src="img/foot-safe.png" alt=""></div>
    </div>
</div>
</div>