貓眼項目

時間 2019-12-08

標籤貓眼項目简体版

原文原文鏈接

1.移動端視口連接：倒入normalize.css重置css文件格式，清除混亂格式；添加本頁面跳轉到你另外一個文件的的執行代碼css；最後添加本身本頁面的代碼css用於執行本頁面渲染；添加本頁面的 js代碼用於換算移動端的字符大小，贊成全文。css

 <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/index_footer_APP.css">
    <link rel="stylesheet" href="../css/about_me_APP.css">
    <script src="../js/auto-size.js"></script>

2.佈局：同篇採用語義化標籤佈局，注意標籤取名，儘可能採用英文定義（div:class="usernamer"）；嵌套儘可能簡潔，可重複調用css代碼格式，減小代碼，注意頁面通常nav和footer通常是相同格式，爲比避免網頁之間跳轉存在差別，儘可能寫成統一格式再調用；同篇分爲上下腳本三部分。html

<body>
<!--頭部登陸欄-->
<header>
    <a href="log_in_APP.html"></a>
    <div class="username">
        <p>laD842919168</p>
        <p><em>V1</em> 青銅會員</p>
    </div>
    <a href="log_in_APP.html"><img src="../images/about_me/head_guide.gif" alt=""></a>
</header>
<!--個人經歷-->
<div class="exp">
    <ul class="container exp_nav">
        <li><a href=""><i></i>
            <p>想看 <span>0</span></p>
        </a></li>
        <li><a href=""><i></i>
            <p>看過 <span>0</span></p>
        </a></li>
        <li><a href=""><i></i>
            <p>影評 <span>0</span></p>
        </a></li>
        <li><a href=""><i></i>
            <p>話題 <span>0</span></p>
        </a></li>
    </ul>
</div>
<!--個人訂單-->
<div class="order">
    <div class="show_all">
        <a href="">個人訂單</a>
        <a href="">所有 <img src="../images/about_me/guide.gif" alt=""></a>
    </div>
    <ul class="container order_nav">
        <li><a href=""><i></i>
            <p>未消費</p>
        </a></li>
        <li><a href=""><i></i>
            <p>待付款</p>
        </a></li>
        <li><a href=""><i></i>
            <p>待評價</p>
        </a></li>
        <li><a href=""><i></i>
            <p>退款</p>
        </a></li>
    </ul>
</div>
<!--個人信息-->
<div class="info">
    <div class="show_all">
        <a href="">個人消息</a>
        <a href=""><img src="../images/about_me/guide.gif" alt=""></a>
    </div>
    <div class="show_all">
        <a href="">個人收藏</a>
        <a href=""><img src="../images/about_me/guide.gif" alt=""></a>
    </div>
    <div class="show_all">
        <a href="">會員中心</a>
        <a href=""><img src="../images/about_me/guide.gif" alt=""></a>
    </div>
    <div class="show_all">
        <a href="">個人成就</a>
        <a href=""><img src="../images/about_me/guide.gif" alt=""></a>
    </div>
</div>
<!--個人錢包-->
<div class="shop">
    <div class="show_all">
        <a href="">美團錢包</a>
        <a href=""><img src="../images/about_me/guide.gif" alt=""></a>
    </div>
    <div class="show_all">
        <a href="">個人餘額</a>
        <a href="">0.00元 <img src="../images/about_me/guide.gif" alt=""></a>
    </div>
    <div class="show_all">
        <a href="">優惠券</a>
        <a href="">0張可用 <img src="../images/about_me/guide.gif" alt=""></a>
    </div>
    <div class="show_all">
        <a href="">商城</a>
        <a href=""><img src="../images/about_me/guide.gif" alt=""></a>
    </div>
</div>
<!--設置-->
<div class="setting">
    <div class="show_all">
        <a href="">設置</a>
        <a href="">手機綁定與更換 <img src="../images/about_me/guide.gif" alt=""></a>
    </div>
</div>
<!--頁腳-->
<footer>
    <a href="hot_show_APP.html">
        <img src="../images/index_footer/movie.gif" alt="">
        <p>電影</p>
    </a>
    <a href="cinema_APP.html">
        <img src="../images/index_footer/cinema.png" alt="">
        <p>影院</p>
    </a>
    <a href="discovery_APP.html">
        <img src="../images/index_footer/find.png" alt="">
        <p>發現</p>
    </a>
    <a href="about_me_APP.html">
        <img src="../images/index_footer/me_red.png" alt="">
        <p>個人</p>
    </a>
</footer>

</body>

header部分：有logo和標題欄加a標籤的>符號組成，要實現網頁的返回和跳轉，承上啓下，logo爲跳轉連接，須要在a標籤插入跳轉的頁面html（log_in_APP.html），>符號同樣爲跳轉頁面（log_in_APP.html）使用盒模型時注意總體背景爲紅色，內容在背景中，須要設置padding定義位置，而後display:flex，是文本水平，在用align-items:center，注意在父級裏設置。ide

header>a:first-of-type{
    height: 1.8rem;
    width: 1.8rem;
    border-radius: 50%;
    border: 5px solid white;
    background: url("../images/about_me/photo.png");
    background-size: 100%;
}
header div p:first-of-type{
    font-size: .44rem;
    font-weight: lighter;
}
header a{
    color: white;
    font-size: .5rem;
}
header div{
    flex:1;
    align-self: stretch;
    margin-left: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

banner部分：若爲橫幅圖片則採用背景圖插入，background:url(" ")center;而且給一個width：100%是圖片橫幅佔據，若橫幅還有文字或者其餘標籤效果則採用定位在父級裏設置相對定位，在子集裏設置絕對定位，實現padding或者margin調整到須要的位置。佈局

section部分的插圖導航：通常採用ul加li來實如今文字爲p標籤，圖片爲背景插圖用i標籤放置於p前面，這樣就能夠實現圖片加文字的連接跳轉，hover時能夠背景變色，或者加邊框陰影效果。flex

section部分的消息類：爲塊級元素，單獨放置一行，p標籤加a標籤，用合模型實現，p爲flex：1, 再用padding調整他們的文字間距，而後複用。ui

footer部分：和插圖導航同樣，注意固定定位時，在body上設置相對定位，再定義footer爲固定，固定完之後會有一段不能顯示，加z-index:顯示，再靠近footer的塊級元素上找到高度，向下margin-bottom：值爲靠近的塊級元素的高，這樣就能夠所有顯示出來，不會遮蔽內容。url

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。