HTML css浮动练习——猫眼电影网页

最新推荐文章于 2024-06-05 10:27:28 发布

33的史努比

最新推荐文章于 2024-06-05 10:27:28 发布

阅读量1.4k

点赞数 1

分类专栏：前端入门学习文章标签： css html 前端

本文链接：https://blog.csdn.net/coising/article/details/122567096

版权

浮动练习——简单的静态猫眼电影页面制作
在这里插入图片描述

1.reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   
	display: block;
}
body {
   
	line-height: 1;
}
ol, ul {
   
	list-style: none;
}
blockquote, q {
   
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   
	content: '';
	content: none;
}
table {
   
	border-collapse: collapse;
	border-spacing: 0;
}

a {
   
	text-decoration: none;
	color: inherit;
}

movie.css


body{
   
    color: #333;
}

.clearfix::after{
   
    content: "";
    display: block;
    clear: both;
}


.main{
   
    line-height: 1.5;
}

.main .nav{
   
    background-color: #47464a;
    height: 60px;
    color: #999;
    text-align: center;
    line-height: 60px;

}

.main .nav a{
   
    margin: 0 38px;
}

.main .nav a:hover{
   
    color: white;
}


.main .nav a.select{
   
    /* 此处a不能删 否则上一条层叠计算更高 颜色仍为白色 */
    color: #ef4238;
}

.main .container{
   
    width: 1120px;
    /* 居中 常规流 */
    margin: 0 auto;
}

.main .container .choose-area{
   
    border: 1px solid #e5e5e5;
    margin: 40px 0;
    font-size: 14px;
    line-height: 30px;
    padding: 0 30px;
}

.main .container .choose-area .choose-item{
   
    margin: 1em 0;
    border-bottom: 1px dotted #e5e5e5;
}

.main .container .choose-area .choose-item.no-line{
   
    border: none;
}

.main .container .choose-area .choose-item .left{
   
    float: left;
    color: #999;

}

.main .container .choose-area .choose-item .right{
   
    float: left;
    width: 1010px;

}

.main .container .choose-area .choose-item .right li{
   
    float: left;
    margin: 0 9px;
    
    padding: 0 6px;
    
}

.main .container .choose-area .choose-item .right li:hover{
   
    color: #ef4238;
}

.main .container .choose-area .choose-item .right li.select{
   
    background-color: #ef4238;
    color: white;
    /* css3圆角边框 */
    border-radius: 15px;
}

.main .container .movies .movie-item{
   
    float: left;
    width: 159px;
    margin: 10px 32px 10px 0;
    
}

.main .container .movies .movie-item:nth-child(6n){
   
    margin-right: 0;

}

.main .container .movies .movie-item .poster img{
   
    width: 160px;
    height: 220px;
}

.main .container .movies .movie-item .name{
   
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
    text-align: center;
}

.main .container .movies .movie-item .score{
   
    color: #ffb400;
    text-align: center;
    line-height: 2.5;
    font-style: italic;
}

.main .container .movies .movie-item .score::first-letter{
   
    font-size: 1.5em;
}

movie.html

<!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>正在热映--猫眼电影</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="movie.css">
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <div class="main">
        <!-- 菜单 -->
        <nav class="nav">
            <a href="" class="select">正在热映</a>
            <a href="">即将上映</a>
            <a href="">经典影片</a>
        </nav>

        <div class="container">
            <div class="choose-area">
                <div class="choose-item clearfix">
                    <div class="left">类型</div>
                    <div class="right">
                        <ul class="clearfix">
                            <li class="select"><a href="">Lorem.</a></li>
                            <li><a href="">Voluptate?</a></li>
                            <li><a href="">Eos.</a></li>
                            <li><a href="">Laudantium?</a></li>
                            <li><a href="">Deleniti!</a></li>
                            <li><a href="">Iusto?</a></li>
                            <li><a href="">Neque.</a></li>
                            <li><a href="">Earum!</a></li>
                            <li><a href="">Doloribus.</a></li>
                            <li><a href="">Excepturi?</a></li>
                            <li><a href="">Exercitationem.</a></li>
                            <li><a href="">Voluptatem.</a></li>
                            <li><a href="">Quae.</a></li>
                            <li><a href="">Qui.</a></li>
                            <li><a href="">Natus!</a></li>
                            <li><a href="">Harum.</a></li>
                            <li><a href="">Porro.</a></li>
                            <li><a href="">Nam.</a></li>
                            <li><a href="">Aspernatur.</a></li>
                            <li>

最低0.47元/天解锁文章

33的史努比

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML css浮动练习——猫眼电影网页

浮动练习——简单的静态猫眼电影页面制作1.reset.css/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big
复制链接

扫一扫