浮动练习之猫眼电影的电影页面

最新推荐文章于 2024-07-13 11:46:18 发布
最新推荐文章于 2024-07-13 11:46:18 发布
阅读量387 收藏 1
点赞数
文章标签： css3 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/COOL66BOY/article/details/123021990
版权

文章目录

其中，鼠标移到图片上，会出现放大效果，用到了伪类选择器 :hover的属性transform来实现缩放效果，该练习设置transform: scale(1.4),意思放大为原图的1.4倍。

练习展示

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="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/movies.css">
</head>
<body>
    <div class="main">
        <div class="nav">
            <a class="select" href="">正在热映</a>
            <a href="">即将上映</a>
            <a href="">经典影片</a>
        </div>
        <div class="menu clearfix">
            <div class="menu-choose">
                <div class="menu-choose-item clearfix">
                    <div class="left">类型：</div>
                    <div class="right">
                        <ul class="clearfix">
                            <li>Lorem.</li>
                            <li>Cum!</li>
                            <li>Optio?</li>
                            <li>Beatae.</li>
                            <li>Quidem.</li>
                            <li>Tempora.</li>
                            <li>Dolorem.</li>
                            <li>Corporis.</li>
                            <li>Eius.</li>
                            <li>Delectus?</li>
                            <li>Tempora.</li>
                            <li>Inventore?</li>
                            <li>Accusamus.</li>
                            <li>Totam.</li>
                            <li>Repellat.</li>
                            <li>Amet?</li>
                            <li>Fuga.</li>
                            <li>Placeat.</li>
                            <li>Recusandae.</li>
                            <li>Voluptatibus.</li>
                        </ul>
                    </div>
                    
                </div>
                <div class="menu-choose-item clearfix">
                    <div class="left">区域：</div>
                    <div class="right">
                        <ul class="clearfix">
                            <li>Lorem.</li>
                            <li>Eligendi?</li>
                            <li>Magnam.</li>
                            <li>Aspernatur.</li>
                            <li>Voluptas?</li>
                            <li>Odio!</li>
                            <li>Esse?</li>
                            <li>Itaque?</li>
                            <li>Perferendis?</li>
                            <li>Quibusdam.</li>
                            <li>Id!</li>
                            <li>Soluta.</li>
                            <li>Consequatur!</li>
                            <li>Inventore!</li>
                            <li>Dolorem!</li>
                            <li>Repellat.</li>
                            <li>Ab.</li>
                            <li>Velit.</li>
                            <li>Ad.</li>
                            <li>Tempore!</li>
                        </ul>
                    </div>
                    
                </div>
                <div class="menu-choose-item clearfix">
                    <div class="left">年代：</div>
                    <div class="right">
                        <ul class="clearfix">
                            <li>Lorem.</li>
                            <li>Quia!</li>
                            <li>Nesciunt.</li>
                            <li>Quibusdam!</li>
                            <li>Dignissimos?</li>
                            <li>Consequuntur.</li>
                            <li>Aperiam.</li>
                            <li>Dolorum!</li>
                            <li>Officia?</li>
                            <li>Dolores.</li>
                            <li>Ullam?</li>
                            <li>At?</li>
                            <li>Quo!</li>
                            <li>Dolores!</li>
                            <li>Libero?</li>
                            <li>Dolorem?</li>
                            <li>Earum.</li>
                            <li>Iste.</li>
                            <li>Obcaecati.</li>
                            <li>Amet.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="movies clearfix">
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
                    <div class="movies-link clearfix">
                        <div class="poster-img"><a href=""><img src="img/img.jpg" alt=""></a></div>
                        <div class="name"><a href="">十年一品温如言</a></div>
                        <div class="score">9.0</div>                      
                    </div>
            
            </div>
        </div>
        <div class="page">
            <a href="">1</a>
            <a href="">2</a>
            <a href="">3</a>
            <a href="">4</a>
            <a href="">5</a>
            <a href="">下一页</a>
        </div>
    </div>
    <div class="page-footer">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
        <p>
            <a href="">Consequuntur laudantium repudiandae rem similique doloribus. Ut!</a>
        </p>
        <p>Saepe blanditiis assumenda incidunt eos aspernatur consectetur.</p>
        <p><a href="">Eaque dolorem</a> nulla quo? Exercitationem, necessitatibus maxime?</p>
        <p>Dolores id inventore ex fuga magnam repellat!</p>
        <p><a href="">Culpa distinctio cupiditate quae libero magnam assumenda.</a></p>
        <p>Ipsam provident aliquid harum dignissimos saepe molestias!</p>
        <p>Repellat facilis quaerat aliquid consectetur numquam repudiandae?</p>
        <p>Asperiores numquam officia accusantium expedita, architecto ex!</p>
    </div>
</body>
</html>

index.css

body{
    font-size: 14px;
}

.main{
    margin: 40px 0;
}

.main .nav{
    background-color: #47464a;
    height: 60px;
    width: 100%;
    line-height: 60px;
    text-align: center;
}

.main .nav a{
    font-size: 16px;
    color: #999;
    margin: 0 40px;
}

.main .nav a:hover{
    color: #fff;
}

.main .nav a.select{
    color: #ef4238;
}

.main .menu{
    text-align: center;
    width: 1200px;
    margin: 0 auto;
}

.main .menu .menu-choose{
    width: 1120px;
    border:1px solid #e5e5e5;
    margin:40px auto;
    box-sizing: border-box;
} 

.main .menu .menu-choose .menu-choose-item .left{
    color:#999;
    float: left;
}

.main .menu .menu-choose .menu-choose-item .right{
    float: left;
    width: 1010px;
}

.main .menu .menu-choose .menu-choose-item .right li{
    padding: 3px 9px;
    margin:0 10px;
    float: left;
    color: #333;
}

.main .menu .menu-choose .menu-choose-item .right li:link{
    background-color: #f34d41;
    color: #fff;
    border-radius: 14px;
}

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


.main .menu .menu-choose .menu-choose-item .right li:nth-child(1){
    background-color: #f34d41;
    color: #fff;
    border-radius: 14px;
}

.main .menu .menu-choose .menu-choose-item{
    border-top:  1px dotted #e5e5e5;
    width: 1078px;
    line-height: 1.5;
    margin: 0 20px;
    padding: 10px 0;
}

.main .menu .menu-choose :nth-child(1){
    border: none;
}

.main .menu .movies{
    line-height: 2;
    margin: 0 40px;
    float: left;
}

.main .menu .movies .movies-link{
    text-align: center;
    margin: 0 32px 22px 0;
    float: left;
}

.main .menu .movies :nth-child(6n){
    margin-right:0;
}

.main .menu .movies .movies-link img{
    width: 160px;
    height: 220px;
}

.main .menu .movies .movies-link img:hover{
    transform:scale(1.4)
}

.main .menu .movies .movies-link .name{
    font-size: 16px;
    font-family: 微软雅黑,Arial, Helvetica, sans-serif;
}

.main .menu .movies .movies-link .score{
    font-style: italic;
    font-size: 22px;
    color: #ffb400;
}

.main .menu .movies .movies-link .score::first-letter{
    font-size: 24px;
}

common.css:页面通用代码

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

.page{
    font-size: 16px;
    text-align:center;
}

.page a{
    display: inline-block;
    padding:0 12px;
    border:1px solid #d8d8d8;
    text-align:center;
    line-height: 30px;
    height: 30px;
    margin: 0 3px;
}

.page a:hover{
    border-color:#ef4238;
}

.page a:nth-child(1){
    background-color: #ef4238;
    border-color:#ef4238;
    color: #fff;
}

.page-footer{
    line-height: 1.5;
    text-align-last: center;
    color: #ccc;
    background-color: #262426;
    margin: 0 auto;
    margin-top: 82px;
    padding: 56px 0;
}

.page-footer p a:hover{
    text-decoration: underline;
}

效果图：

在这里插入图片描述
鼠标移到图片上的效果：
在这里插入图片描述

练习总结

1、主要难点在于浮动元素的居中排列问题，浮动元素的位置调整可以通过设置margin来改变，
整体的改变可以套一个div，来改变这个div的位置。
2、使用浮动元素时，要时刻要注意高度坍塌的问题。
3、区域的划分很重要，这会影响后面的样式代码书写。
4、写代码时注意添加注释，该地方仍需改进。

码界索隆
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML css浮动练习——猫眼电影网页
coising的博客
01-18 1483
浮动练习——简单的静态猫眼电影页面制作 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
简单仿猫眼电影首页静态页面.rar
08-05
在本项目中，"简单仿猫眼电影首页静态页面.rar" 是一个压缩包，其中包含了一个练习HTML和CSS技能的示例。这个静态页面是为了模仿知名的猫眼电影首页设计，帮助学习者掌握基本的网页布局和样式设定。下面将详细讨论...
html+css猫眼PC静态页面（初学者）
05-08
html+css，含css的一些特效，适合前端初学者练习的静态网页。
HTML + CSS 实现猫眼电影静态页面
王大傻的博客
06-02 4127
HTML + CSS 实现猫眼 电影 静态页面
模仿猫眼电影静态网页展示
weixin_30794851的博客
05-12 1506
转载于:https://www.cnblogs.com/ybzwj/p/9030038.html
第四个页面：制作电影资讯页面
weixin_33682790的博客
11-28 1806
post.wxml修改轮播图代码如下： <!-- 添加点击事件，这里利用了事件冒泡的机制 --> <swiper catchtap='onSwiperTap' indicator-dots='true' autoplay='true' interval='5000'> <!-- 每一项里都放了一个图片 --> ...
HTML CSS 浮动练习（仿猫眼电影）
qq_56682205的博客
07-24 1257
html css基础入门DIV布局以及浮动
猫眼电影-浮动练习
txtxtx
03-29 263
movies.html,中间部分，没用button，慢慢来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt...
HTML--猫眼电影---浮动练习
北
05-27 1210
HTML–猫眼电影—浮动练习 这次是一次回顾的练习。 代码照常都是含有详细解释。 效果图 首先是HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>猫眼电影
jQuery仿猫眼电影票在线选座购买特效
10-29
【jQuery仿猫眼电影票在线选座购买特效】是一个基于jQuery技术实现的模拟真实电影票购买过程中的座位选择功能。这个特效通常应用于在线购票系统，为用户提供直观、友好的交互体验，让用户能够方便地选择他们想要的...
Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习
11-23
这个“Web入门初学者纯静态页面练习”是针对那些刚刚接触Web前端开发的学习者设计的，旨在帮助他们掌握HTML和CSS的基本概念以及布局与浮动的设计技巧。 HTML是网页内容的结构语言，它定义了网页的各个元素，如标题...
WEB前端03-CSS3基础
最新发布
XYX_888的博客
07-13 939
CSS是Cascading Style Sheets（层叠样式表）的缩写，它是一种对Web文档添加样式的简单机制，是一种表现HTML或XML等文件外观样式的计算机语言，是一种网页排版和布局设计的技术。伪类是可以向某些选择器添加特殊效果的、一组CSS预定 义好的类，不需要进行id和class属性的声明，就能自动 地被支持CSS的浏览器所识别。盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。的网页元素定义显示样式。
html高级篇
qq_48257021的博客
07-04 1053
translform:translateZ（100px）：仅仅是在z轴上移动（注意：translateZ一般用px单位）transform:translate3d（x，y，）：其中x、y、z分别指要移动的轴的方向的距离。translform:translateX（100px）：仅仅是在x轴上移动。translform:translateY（100px）：仅仅是在Y轴上移动。·z轴：垂直屏幕注意：往外面是正值，往里面是负值。·x轴：水平向右注意：X右边是正值，左边是负值。
CSS学习碎碎念之卡片展示
abments的博客
07-10 1174
自定义卡片
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 1254
title>充电效果
HTML 学习指南：从入门到精通
英英的博客
07-09 426
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 258
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
仿京东商城登录页面浮动
05-22
您好，如果您想实现仿京东商城登录页面浮动效果，可以使用CSS实现fixed定位和z-index属性来实现。 首先，在HTML文件中创建登录框的结构和样式，包括用户名、密码输入框和登录按钮等。然后，使用CSS设置登录框的初始...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值