HTML CSS 浮动练习（仿猫眼电影）

这是自己（入门小白）手敲的一个小小的练习，也是用到了基础的html和css知识。页面不是很齐全，因为毕竟是个小练习，分享给大家一起学习。（完整源码在最下面）

效果图如下：

首先咱们需要创建一个网页movie.html,css文件夹和img文件夹。

css文件夹当中需要建一个reset.css来重新定义标签样式防止浏览器样式不同。

重置代码如下:

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;
}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.html，我的做法是分为两部分来做。一个大区域main（自己命名）分三部分nav和container还有pager页数。

第一部分就是nav菜单部分

 <div class="main"><!--菜单--><nav class="nav"><a href="" class="select">正在热映</a><a href="#">即将上映</a><a href="#">经典影片</a></nav></div>

创建movie.css对nav进行修饰

.main {line-height: 1.5;
}.main .nav {height: 60px;background: #47464a;text-align: center;line-height: 60px;
}.main .nav a {margin: 0 38px;
}.main .nav a:hover {color: #fff;
}.main .nav a.select {color: #ef4238;
}

完成后的效果

然后做第二个部分container，注意两个部分都在main盒子当中。

我们先做选项区域choose-area，这可以用ul li列表来做，分为左边left和right。

<div class="container"><div class="choose-area"><div class="choose-item clearfix"><div class="left ">类型:</div><div class="right"><ul><li class="select"><a href="">全部</a></li><li><a href="">爱情</a></li><li><a href="">喜剧</a></li><li><a href="">动画</a></li><li><a href="">剧情</a></li><li><a href="">恐怖</a></li><li><a href="">惊悚</a></li><li><a href="">科幻</a></li><li><a href="">动作</a></li><li><a href="">悬疑</a></li><li><a href="">犯罪</a></li><li><a href="">冒险</a></li><li><a href="">战争</a></li><li><a href="">奇幻</a></li><li><a href="">运动</a></li><li><a href="">家庭</a></li><li><a href="">古装</a></li><li><a href="">武侠</a></li><li><a href="">历史</a></li><li><a href="">纪录片</a></li></ul></div></div></div>
</div>

其他的都是一样的，复制粘贴一下，只需要把名称改一下（后面有全部的源码）。

然后去movie.css去修饰这部分，先给container设置宽度（这里可以自行测量根据不一样的页面），choose-area的边框以及位置。

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

再然后设置choose-item，需要用到的是浮动，no-line的意思是第三个choose-item下边没有下划线，select是被选中的元素会变成背景颜色是橙色，hover就是鼠标悬停的时候字体变化的颜色。

.main .container .choose-area .choose-item {margin: 1em 0;border-bottom: 1px solid #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: 1000px;
}.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: #ef4238;color: #fff;border-radius: 15px;
}

因为用浮动做网页可能会造成我们布局有一些问题，盒子会挤下去，对页面不整齐，这时候我们就要用到清除浮动了。clearfix需要加在choose-item的div上面。

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

写好后的效果是（源码在最底部）

接下来是电影movies这块，用到3个div盒子第一个是海报、图片poster，第二个是片名name，第三个是评分。这是一个电影，多个的话复制粘贴换一下图片和名字就行了。

<div class="movie-item"><div class="poster"><a href=""><img src="./img/1.jpg" alt=""></a></div><div class="name"><a href="">一直一直都很喜欢你</a></div><div class="score">暂无评分</div></div>

去movie.css设置样式这一部分样式。：nth-child()表示可以修改父元素中子元素的样式，我这里的作用是设置6的倍数的子元素清除margin-right元素，就能使排布页面正常占满空间，::first-letter表示第一个字母大写，这里是设置评分，字体风格是斜体italic。

.main .container .movies .movie-item {float: left;width: 160px;margin: 10px 32px 10px 0px;
}.main .container .movies .movie-item .poster img {width: 100%;height: 100%;
}.main .container .movies .movie-item:nth-child(6n) {margin-right: 0;
}.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;
}

效果图

最后一个部分是pager，是最简单的一部分，movie.html代码如下

<div class="pager"><a href="">上一页</a><a href="" class="select">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">下一页</a></div>

新建一个common.css,在这里面设置页脚。

.pager {margin: 2em 0;text-align: center;
}.pager a {border: 1px solid #d8d8d8;padding: 5px 10px;
}.pager a:hover {border-color: #ef4238;
}.pager a.select {background: #ef4238;color: #fff;border: none;
}

效果图

接下来是完整的页面代码

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="./css/reset.css"><link rel="stylesheet" href="./css/movie.css"><link rel="stylesheet" href="./css/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><li class="select"><a href="">全部</a></li><li><a href="">爱情</a></li><li><a href="">喜剧</a></li><li><a href="">动画</a></li><li><a href="">剧情</a></li><li><a href="">恐怖</a></li><li><a href="">惊悚</a></li><li><a href="">科幻</a></li><li><a href="">动作</a></li><li><a href="">悬疑</a></li><li><a href="">犯罪</a></li><li><a href="">冒险</a></li><li><a href="">战争</a></li><li><a href="">奇幻</a></li><li><a href="">运动</a></li><li><a href="">家庭</a></li><li><a href="">古装</a></li><li><a href="">武侠</a></li><li><a href="">历史</a></li><li><a href="">纪录片</a></li></ul></div></div><div class="choose-item clearfix "><div class="left ">年代:</div><div class="right"><ul><li class="select"><a href="">全部</a></li><li><a href="">大陆</a></li><li><a href="">美国</a></li><li><a href="">韩国</a></li><li><a href="">日本</a></li><li><a href="">中国香港</a></li><li><a href="">中国台湾</a></li><li><a href="">泰国</a></li><li><a href="">印度</a></li><li><a href="">法国</a></li><li><a href="">英国</a></li><li><a href="">俄罗斯</a></li><li><a href="">意大利</a></li><li><a href="">西班牙</a></li><li><a href="">德国</a></li><li><a href="">波兰</a></li><li><a href="">澳大利亚</a></li><li><a href="">伊朗</a></li><li><a href="">其他</a></li></ul></div></div><div class="choose-item clearfix no-line"><div class="left ">地区:</div><div class="right"><ul><li class="select"><a href="">全部</a></li><li><a href="">2022以后</a></li><li><a href="">2022</a></li><li><a href="">2021</a></li><li><a href="">2020</a></li><li><a href="">2019</a></li><li><a href="">2018</a></li><li><a href="">2017</a></li><li><a href="">2016</a></li><li><a href="">2015</a></li><li><a href="">2014</a></li><li><a href="">2013</a></li><li><a href="">2012</a></li><li><a href="">2011</a></li><li><a href="">2000-2010</a></li><li><a href="">90年代</a></li><li><a href="">80年代</a></li><li><a href="">70年代</a></li><li><a href="">更早</a></li></ul></div></div></div><div class="movies"><div class="movie-item"><div class="poster"><a href=""><img src="./img/1.jpg" alt=""></a></div><div class="name"><a href="">一直一直都很喜欢你</a></div><div class="score">暂无评分</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/2.jpg" alt=""></a></div><div class="name"><a href="">人生大事</a></div><div class="score">9.5</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/3.jpg" alt=""></a></div><div class="name"><a href="">冲出地球</a></div><div class="score">8.8</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/4.jpg" alt=""></a></div><div class="name"><a href="">独行月球</a></div><div class="score">暂无评分</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/5.jpg" alt=""></a></div><div class="name"><a href="">神探大战</a></div><div class="score">9.0</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/6.jpg" alt=""></a></div><div class="name"><a href="">隐入尘烟</a></div><div class="score">9.2</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/7.jpg" alt=""></a></div><div class="name"><a href="">一周的朋友</a></div><div class="score">8.0</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/8.jpg" alt=""></a></div><div class="name"><a href="">遇见你</a></div><div class="score">暂无评分</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/9.jpg" alt=""></a></div><div class="name"><a href="">外太空的莫扎特</a></div><div class="score">8.5</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/10.jpg" alt=""></a></div><div class="name"><a href="">侏罗纪世界3</a></div><div class="score">8.0</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/11.jpg" alt=""></a></div><div class="name"><a href="">你是我的春天</a></div><div class="score">9.1</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/12.jpg" alt=""></a></div><div class="name"><a href="">我们的样子像极了爱情</a></div><div class="score">8.2</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/13.jpg" alt=""></a></div><div class="name"><a href="">明日战纪</a></div><div class="score">8.0</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/14.jpg" alt=""></a></div><div class="name"><a href="">开心超人之勇敢的心</a></div><div class="score">8.5</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/15.jpg" alt=""></a></div><div class="name"><a href="">迷你世界之觉醒</a></div><div class="score">9.0</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/16.jpg" alt=""></a></div><div class="name"><a href="">海底小纵队</a></div><div class="score">8.7</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/17.jpg" alt=""></a></div><div class="name"><a href="">长津湖</a></div><div class="score">9.5</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/18.jpg" alt=""></a></div><div class="name"><a href="">奇迹·笨小孩</a></div><div class="score">9.5</div></div></div><div class="pager"><a href="">上一页</a><a href="" class="select">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">下一页</a></div></div></div>
</body></html>

movie.css

.clearfix::after {content: "";display: block;clear: both;
}.main {line-height: 1.5;
}.main .nav {height: 60px;background: #47464a;text-align: center;line-height: 60px;
}.main .nav a {margin: 0 38px;
}.main .nav a:hover {color: #fff;
}.main .nav a.select {color: #ef4238;
}.main .container {width: 1120px;margin: 0 auto;
}.main .container .choose-area {border: 1px solid #e5e5e5;margin: 40px 0;font-size: 14px;padding: 0 30px;
}.main .container .choose-area .choose-item {margin: 1em 0;border-bottom: 1px solid #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: 1000px;
}.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: #ef4238;color: #fff;border-radius: 15px;
}.main .container .movies .movie-item {float: left;width: 160px;margin: 10px 32px 10px 0px;
}.main .container .movies .movie-item .poster img {width: 100%;height: 100%;
}.main .container .movies .movie-item:nth-child(6n) {margin-right: 0;
}.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;
}

common.css

.pager {margin: 2em 0;text-align: center;
}.pager a {border: 1px solid #d8d8d8;padding: 5px 10px;
}.pager a:hover {border-color: #ef4238;
}.pager a.select {background: #ef4238;color: #fff;border: none;
}

reset.css

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;
}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;
}

HTML CSS 浮动练习（仿猫眼电影）相关推荐

HTML+CSS+JavaScript实现仿猫眼电影购票选座
一.功能实现 (1)在页面左侧区域,单击"可选座位",将座位设置为"已选座位",一次最多选5 个座位.右侧座位号汇总区域显示已选中的座位号,并显示电影票总价. ...
HTML期末学生作业 HTML+CSS+JavaScript仿猫眼电影在线网站 Hbuilder网页制作
❤ HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全) web期末结课大作业 html+css+javascript网页.电影.仿京东.天猫.服装. 企业网站制 ...
java/php/net/python仿猫眼电影设计与实现设计
本系统带文档lw万字以上+答辩PPT+查重如果这个题目不合适,可以去我上传的资源里面找题目,找不到的话,评论留下题目,或者站内私信我, 有时间看到机会给您发 1.关于仿猫眼电影设计与实现的基本要求 ...
影院在线售票云平台（仿猫眼电影，附SpringBoot项目源码）系统功能实现
影院在线售票云平台是模仿猫眼电影开发的在线售票系统,系统分为前端网站及后台管理2部分,主要功能有影院管理,电影管理,影厅管理,排片管理,选座售票,演员管理,评论管理,影片排名,票房收入,票房排名,财务 ...
21小时精通微信小程序开发(仿猫眼电影App、微信小程序问答)
21小时精通微信小程序开发(仿猫眼电影App.微信小程序问答) 网盘地址:https://pan.baidu.com/s/1GTpPX4A1U-w_3i6k7lLztQ 密码: 5pcz 备用地址(腾 ...
视频教程-影院在线售票云平台（仿猫眼电影，附SpringBoot项目源码）-Java
影院在线售票云平台(仿猫眼电影,附SpringBoot项目源码) 19年软件开发经验,设计开发40多个大型软件,10年从事高等教育,主要为java系列课程,带你轻松进入java生涯. 赖国荣 ¥299 ...
TTMS（仿猫眼电影）iOS版项目报告
文章目录前言 GitHub 所有使用到的第三方库项目详细说明登陆注册登陆预览文件名注册预览文件名总结城市定位预览文件名总结选择电影预览文件名总结选择影院预览文 ...
JAVA仿猫眼电影系统（毕业设计）
仿猫眼实现的电影购票系统电影售票系统是基于web的电影购票网站,注册登录用户可在线浏览热映电影信息,电影排行榜,查看附近影院,支持在线购票,实时支付等.该系统UI界面简洁大方,操作简单,实时更新电影 ...
VUE仿猫眼电影总结（一）
概述 vue进阶练习基于vue-cli 3.0脚手架构建的仿猫眼webapp github地址:https://github.com/santana2000/hah-movie 界面展示项目结构 ...

HTML CSS 浮动练习（仿猫眼电影）

HTML CSS 浮动练习（仿猫眼电影）相关推荐

最新文章

热门文章