html影视详情页布局分析

71 阅读 0 评论 47 点赞

我是靠谱客的博主独特小懒虫，最近开发中收集的这篇文章主要介绍html影视详情页布局分析，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、结构分析

二、代码书写

三、重点分析

一、结构分析

注：上绿线表示header头部，下绿线表示main主体内容区；

二、代码书写

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            font-size: 12px;
            color: #666666;
        }

        article {
            width: 328px;
            margin: 100px auto;
        }

        input {
            width: 100%;
            height: 29px;
            border: 1px solid #E0E0E8;
            outline: none;
            font-weight: 700;
            text-indent: 38px;
            color: black;
        }

        form {
            position: relative;
            margin-bottom: 16px;
        }

        /* 输入框里的背景图标 */
        form::before {
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            background: url(./images/1.gif);
            /* 先移动父盒子高度的50%，然后再移动自身高度的50%，即可在父盒子里垂直居中 */
            top: 50%;
            margin-top: -6px;
            margin-left: 12px;
        }

        /* 影视封面 */
        .cover {
            float: left;
            width: 116px;
            height: 125px;
            padding: 2px;
            border: 1px solid #E0E0E8;
            margin: 0 8px 29px 0;
        }

        /* 右侧影视简介 */
        .introduce {
            line-height: 26px;
        }

        h4 {
            color: black;
        }

        section {
            clear: both;
        }

        section li {
            line-height: 30px;
        }

        section span {
            float: right;
        }

        a:hover {
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <article>
        <header>
            <form action="qn.java" method="post">
                <input type="text" value="明星荐片">
            </form>
        </header>
        <main>
            <!-- 封面图 -->
            <div class="cover">
                <a href="#"><img src="./images/3.gif" alt="海报封面"></a>
            </div>
            <!-- 影片简介 -->
            <div class="introduce">
                <h4>周秀娜荐片:让子弹飞</h4>
                <ul>
                    <li>导演：姜文</li>
                    <li>主演：姜文 周润发 葛优</li>
                    <li>点评：我最喜欢的要算《让子弹飞》了,超喜欢... <a href="#">[详情]</a></li>
                </ul>
            </div>
            <!-- 其它影片 -->
            <section>
                <ul>
                    <li><a href="#">《巴别塔》：好的故事引人深思</a>
                        <span>阿朵</span>
                    </li>
                    <li><a href="#">《洛杉矶之战》：外星人那么弱智？</a>
                        <span>丁子俊</span>
                    </li>
                    <li><a href="#">《让子弹飞》：武侠里也可以有爱情</a>
                        <span>周秀娜</span>
                    </li>
                    <li><a href="#">《剑雨》：好的故事引人深思</a>
                        <span>叶年生</span>
                    </li>
                    <li><a href="#">《春风沉醉的夜晚》：非常真实</a>
                        <span>如小果</span>
                    </li>
                    <li><a href="#">《克洛伊》：故事简单却细致</a>
                        <span>刘若英</span>
                    </li>
                </ul>
            </section>
        </main>
    </article>
</body>
</html>