描述：

html界面的使用，模板

案例演示：

2022年 9月 7日——html和css的使用_css

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="3"/>
    <title>标题</title>
    <link rel="stylesheet" href="../css/year.css" />
</head>
<body>
    <h1>标题</h1>
    <ol>
        <li class="main">
            <div class="left">

            </div>
            <div class="right">
                <h3>标题</h3>
                <div >
                    <p class="p1">
                        类型：
             
                    </p>
                    <p class="p1">
                        年代：2022
                    </p>
                    <p class="p1">
                        地区：
                       
                    </p>
                </div>
                <div>
                    <p class="p2">
                        导演：
                       
                    </p>
                    <p class="p2">
                        人物：<span>人物1</span>/<span>人物2</span>/<span>人物3</span>
                        /<span>人物4</span>/<span>人物5</span>
                    </p>
                </div>
                <div>
                    简介： 
                </div>
                <div>
                    全部剧集：
                </div>
                <ol>
                    <li>1</li>
                    <li>2</li>
                </ol>
            </div>
        </li>
    </ol>

</body>
</html>l

css

*{
    margin: 0;
    padding: 0;
}
ol > li.main{
    background-color: antiquewhite;
    width: 100%;
    height: 300px;
    padding: 30px;
}
ol > li.main > div.left, ol > li.main > div.right{
    float: left;
}
ol > li.main > div.left{
    width: 260px;
    height: 100%;
    background-color: aqua;
}
ol > li.main > div.right{
    width: 1500px;
    height: 260px;
    /* background-color: greenyellow; */
    padding: 20px;
}
ol > li.main > div.right > div{
    margin: 10px;
    float: none;
    overflow: hidden;
}
ol > li.main > div.right > div > p{
    margin: 10px;
    float: left;
}
ol > li.main > div.right > ol{
    padding: 10px;
}
ol > li.main > div.right > ol > li{
    list-style: none;
    width: 80px;
    height: px;
    margin: 6px;
    text-align: center;
    float: left;
    background-color: rgb(223, 223, 223);
    padding: 3px;
}