猫眼APP详情静态界面

最新推荐文章于 2023-01-06 15:19:18 发布

V________

最新推荐文章于 2023-01-06 15:19:18 发布

阅读量303

点赞数

分类专栏：猫眼APP静态界面布局与样式设定文章标签： html html5 css css3 sass

本文链接：https://blog.csdn.net/V________/article/details/110389500

版权

猫眼APP静态界面布局与样式设定专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/public.css">
    <link rel="stylesheet" href="./CSS/xiangqing.css">
    <script src="./JS/auto-size.js"></script>
</head>

<body>
    <!-- div1 -->
    <div class="top"></div>
    <!-- 黑灰色背景图部分 -->
    <!-- div2 -->
    <div>
        <!-- 第一行两张图 div1-->
        <div>
            <a href="javascript:history.go(-1)">
                <img src="./IMG/xiangqingjiantou.jpg" alt="返回">
            </a>
            <img src="./IMG/xiangqingfenxiang.jpg" alt="分享">
        </div>
        <!-- 中部div2 -->
        <div>
            <img src="./IMG/reying1.jpg" alt="机械师2：复活">
            <div>
                <p>机械师2：复活</p>
                <p>Mechanic:Resurrection</p>
                <p><i></i>9.0</p>
                <p>(7065评分)</p>
                <p>动作 犯罪<i>3D</i></p>
                <p>美国 法国 / 97分钟</p>
                <p><a href="#3">2016-10-21大陆上映 ></a></p>
            </div>
        </div>
        <!-- 底部div3 -->
        <div>
            <div>
                <input type="checkbox" id="xin">
                <label for="xin">想看</label>
            </div>
            <span><i></i>评分</span>
        </div>
    </div>
    <article>
        <!-- 文字介绍部分 -->
        <!-- div1 -->
        <div>
            <input type="checkbox" id="dianji">
            <div>
                <p>
                    影片讲述了职业杀手亚瑟为解救爱人不得不完成一系列不可能的暗杀任务。在一桩看似意外的事件中，亚瑟毕索(杰森.斯坦森饰)的红颜知己梅(杨紫琼饰)请求亚瑟解救屡遭毒打的神秘女子吉娜(杰西卡:阿尔芭饰)，哪料向来对爱情免疫的亚瑟，竟与吉娜坠入了爱河，但因此打破了他已远离是非五年风平浪静的生活。亚瑟以为自己早已和过去的杀手生涯告别，然而宿命难敌的他竟被人暗中盯上，他的身世之谜也渐渐浮出水面。原来亚瑟年幼时和小伙伴们被军火商抓去。难以忍受被
                    影片讲述了职业杀手亚瑟为解救爱人不得不完成一系列不可能的暗杀任务。在一桩看似意外的事件中，亚瑟毕索(杰森.斯坦森饰)的红颜知己梅(杨紫琼饰)请求亚瑟解救屡遭毒打的神秘女子吉娜(杰西卡:阿尔芭饰)，哪料向来对爱情免疫的亚瑟，竟与吉娜坠入了爱河，但因此打破了他已远离是非五年风平浪静的生活。
                </p>
            </div>
            <label for="dianji"><i></i></label>
        </div>
        <!-- 颜色条 -->
        <!-- div2 -->
        <div></div>
        <!-- 人员 -->
        <!-- div3 -->
        <div>
            <!-- 左边导演 -->
            <div>
                <p>导演</p>
                <img src="./IMG/xiangqingdaoyan.jpg" alt="导演">
            </div>
            <!-- 右边演员 -->
            <div>
                <!-- 1 -->
                <div>
                    <p>演员</p>
                    <p>全部 ></p>
                </div>
                <!-- 2 -->
                <div>
                    <div>
                        <img src="./IMG/xiangqingyanyuan1.jpg" alt="导演">
                        <img src="./IMG/xiangqingyanyuan2.jpg" alt="导演">
                        <img src="./IMG/xiangqingyanyuan3.jpg" alt="导演">
                        <img src="./IMG/xiangqingyanyuan4.jpg" alt="导演">
                        <img src="./IMG/xiangqingyanyuan1.jpg" alt="导演">
                        <img src="./IMG/xiangqingyanyuan2.jpg" alt="导演">
                        <img src="./IMG/xiangqingyanyuan3.jpg" alt="导演">
                        <img src="./IMG/xiangqingyanyuan4.jpg" alt="导演">
                    </div>
                </div>
            </div>
        </div>
        <!-- 立即购票 -->
        <!-- div4 -->
        <div><a href="./yingyuan.html">立即购票</a></div>
    </article>
    <div class="bottom"></div>
</body>

</html>

@mixin  f_be_ce {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
@mixin f__ce {
    display: flex;
    align-items: center;
}
@mixin f_ce_ce {
    display: flex;
    justify-content: center;
    align-items: center;
}
@mixin f_be_sta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}
body {
    // 黑灰色背景图部分
    >div:nth-of-type(2) {
        width: 10.8rem;
        height: 7.9rem;
        box-sizing: border-box;
        padding: 0 0.45rem;
        margin-top: 0.75rem;
        background-image: url(../IMG/xiangqingbeijing.jpg);
        // 第一行两张图 div1
        >div:nth-of-type(1) {
            padding: 0.45rem 0 0.42rem;
            @include f_be_ce;
            a>img {
                width: 0.62rem;
            }
            img {
                width: 0.7rem;
            }
        }
        // 中部div2
        >div:nth-of-type(2) {
            @include f_be_sta;
            >img {
                width: 3.32rem;
                height: 4.5rem;
                border: 5px solid white;
                box-sizing: border-box;
            }
            >div {
                flex: 1;
                margin-left: 0.45rem;
                >p {
                    line-height: 1.5;
                    margin: 0.07rem 0;
                }
                >p:nth-of-type(1) {
                    font-size: 0.44rem;
                    color: white;
                }
                >p:nth-of-type(2) {
                    font-size: 0.22rem;
                    color: white;
                }
                >p:nth-of-type(3) {
                    font-size: 0.4rem;
                    color: #ffcc00;
                    >i {
                        display: inline-block;
                        width: 2.7rem;
                        height: 0.4rem;
                        background-image: url("../IMG/star_icon02.png");
                        background-size: 2.7rem 0.4rem;
                        margin-right: 0.2rem;
                    }
                }
                >p:nth-of-type(4) {
                    font-size: 0.26rem;
                    color: #c2c1ba;
                }
                >p:nth-of-type(5),>p:nth-of-type(6) {
                    font-size: 0.3rem;
                    color: #c2c1ba;
                    @include f__ce;
                }
                >p:nth-of-type(5)>i {
                    font-size: 0.18rem;
                    border: 1px solid transparent;
                    box-sizing: border-box;
                    border-radius: 10px;
                    padding: 0.05rem 0.1rem ;
                    margin-left: 0.2rem;
                    font-style: normal;
                    background-color: #827e75;
                    color: white;
                }
                >p:nth-of-type(7)>a {
                    font-size: 0.34rem;
                    color: #c2c1ba;
                }
            }
        }
        // 底部div3
        >div:nth-of-type(3) {
            @include f_be_ce;
            margin-top: 0.43rem;
            >span,div {
                display: inline-block;
                height: 1rem;
                text-align: center;
                width: 4.8rem;
                border: 1px solid #797370;
                box-sizing: border-box;
                background-color: #4e4943;
                border-radius: 15px;
                color: #f0f0f0;
                @include f_ce_ce;
            }
            >div {
                @include f__ce;
                >input {
                    display: none;
                    &:checked~label {
                        color: #ef4238;
                        &::before {
                            display: inline-block;
                            content: "";
                            width: 0.45rem;
                            height: 0.45rem;
                            background-image: url("../IMG/xin1.jpg");
                            background-size: 0.45rem 0.45rem;
                            margin-right: 0.2rem;
                            vertical-align: -0.05rem;    
                        }
                    }
                }
                >label::before {
                    display: inline-block;
                    content: "";
                    width: 0.45rem;
                    height: 0.44rem;
                    background-image: url("../IMG/banner_icon02.png");
                    background-size: 0.45rem 0.44rem;
                    margin-right: 0.2rem;
                    vertical-align: -0.05rem;
                }
            }
            >span:nth-of-type(1)>i {
                width: 0.45rem;
                height: 0.44rem;
                background-image: url("../IMG/banner_icon01.png");
                background-size: 0.45rem 0.44rem;
                margin-right: 0.2rem;
            }
        }
    }
    >article {
        background-color: white;
        margin-bottom: 3.7rem;
        // 文字
        >div:nth-of-type(1) {
            padding: 0.5rem 0.4rem 0.15rem;
            >div:nth-of-type(1) {
                line-height: 0.7rem;
                height: 2.05rem;
                overflow: hidden;
            }
            >input:checked~div {
                height: auto;
            }
            >input:checked~label>i {
                width: 0.57rem;
                height: 0.3rem;
                background-image: url("../IMG/xiangqingxiajiatou.jpg") ;
                background-size: 100%;
                background-position: 0rem 0rem;    
            }
            >input {
                display: none;
            }
            >label {
                @include f_ce_ce;
                >i {
                    margin-top: 0.08rem;
                    width: 0.57rem;
                    height: 0.3rem;
                    background-image: url("../IMG/icon100.png") ;
                    background-size: 5.6rem 5.1rem;
                    background-position: -5.03rem -0.72rem;    
                }
            }
        }
        // 颜色条
        >div:nth-of-type(2) {
            height: 0.5rem;
            background-color: #f5f5f5;
        }
        // 人员
        >div:nth-of-type(3) {
            padding: 0.37rem 0 0.37rem 0.45rem;
            @include f_be_sta;
            img{
                width: 2.07rem;
                height: 2.74rem;
            }
            // 左边导演
            >div:nth-of-type(1) {
                >p {
                    margin-bottom: 0.3rem;
                }
            }
            // 右边演员
            >div:nth-of-type(2) {
                flex: 1;
                margin-left: 0.35rem;
                box-sizing: border-box;
                // 1
                >div:nth-of-type(1) {
                    @include f_be_ce;
                    margin-bottom: 0.3rem;
                    padding-right: 0.37rem;
                    >p:nth-of-type(2) {
                        color: #999999;
                    }
                }
                // 2
                >div:nth-of-type(2) {
                    width: 7.9rem;
                    >div {
                        display: flex;
                        overflow-x: scroll;
                        >img {
                            margin-right: 0.15rem;
                        }    
                    }
                }
            }
        }
        // 立即购票
        >div:nth-of-type(4) {
            >a {
                width: 100%;
                position: fixed;
                bottom: 1.45rem;
                color: white;
                font-size: 0.48rem;
                height: 1.5rem;
                background-color: #f14e40;
                text-align: center;
                line-height: 1.45rem;
                box-sizing: border-box;
            }
        }
    }
}