猫眼项目
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了猫眼项目相关的知识，希望对你有一定的参考价值。
1.移动端视口链接：倒入normalize.css重置css文件格式，清除混乱格式；添加本页面跳转到你另一个文件的的执行代码css；最后添加自己本页面的代码css用于执行本页面渲染；添加本页面的 js代码用于换算移动端的字符大小，同意全文。
<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一般是相同格式，为比避免网页之间跳转存在差异，尽量写成统一格式再调用；同篇分为上下脚本三部分。
<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，注意在父级里设置。
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时可以背景变色，或者加边框阴影效果。
section部分的消息类：为块级元素，单独放置一行，p标签加a标签，用合模型实现，p为flex：1, 再用padding调整他们的文字间距，然后复用。
footer部分：和插图导航一样，注意固定定位时，在body上设置相对定位，再定义footer为固定，固定完以后会有一段不能显示，加z-index:显示，再靠近footer的块级元素上找到高度，向下margin-bottom：值为靠近的块级元素的高，这样就可以全部显示出来，不会遮蔽内容。
以上是关于猫眼项目的主要内容，如果未能解决你的问题，请参考以下文章