猫眼项目

时间 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