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

浮动练习——简单的静态猫眼电影页面制作

1.reset.css

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126License: 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><a href="">Dolor!</a></li></ul></div></div><div class="choose-item clearfix"><div class="left">地区</div><div class="right"><ul class="clearfix"><li><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><a href="">Dolor!</a></li></ul></div></div><div class="choose-item clearfix no-line"><div class="left">年代</div><div class="right"><ul class="clearfix"><li><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><a href="">Dolor!</a></li></ul></div></div></div><div class="movies clearfix"><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div><div class="movie-item"><div class="poster"><a href=""><img src="./img/pic.jpg" alt=""></a></div><div class="name"><a href="">复仇者联盟4:终局之战</a></div><div class="score">9.4</div></div></div><div class="pager"><a href="">上一页</a><a href="">1</a><a href="" class="select">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="">9</a><a href="">10</a><a href="">下一页</a></div></div></div>
</body>
</html>

common.css

/* 多页面通用样式 */
.pager{margin: 2em 0;text-align: center;
}.pager a{border: 1px solid #d8d8d8;padding: 5px 10px;margin: 0 3px;
}.pager a:hover{border-color: #ef4238;}.pager a.select{background-color: #ef4238;color: white;border: none;
}

注意事项：

浮动float 即注意 clearfix 防止高度坍塌

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

常规流居中
margin=0 auto;
每写一部分HTML即考虑其样式

HTML css浮动练习——猫眼电影网页相关推荐

HTML期末学生作业 HTML+CSS+JavaScript仿猫眼电影在线网站 Hbuilder网页制作
❤ HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全) web期末结课大作业 html+css+javascript网页.电影.仿京东.天猫.服装. 企业网站制 ...
HTML+CSS一个简单的电影网页制作作业，学生个人html静态网页制作成品代码, html电影速递网
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
web前端期末大作业在线电影网页设计与制作 HTML+CSS+JavaScript仿叮当电影网页制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
Python 正则表达式解析猫眼电影网页
引导题目网页样例内容正则表达式输出结果题目根据网页源代码提取电影信息,格式如下: 获取内容由 board-index ***(排名). date-src(图片地址). title(影片名) ...
javascript网站期末作品~html电影资讯博客网站模板(HTML+CSS+JavaScript)在线电影网页设计
javascript网站期末作品~电影资讯博客网站模板(HTML+CSS+JavaScript) 一款黑色响应式的电影新闻资讯,电影热点资讯,电影博客类型网页模板html.望大家学习使用(首页/电影/ ...
HTML期末大作业~简单的程序员个人博客网站模板源码(HTML+CSS)~个人主页博客web网页设计制作~HTML简单个人网页制作~Web大学生网页成品...
HTML期末大作业~ 简单的程序员个人博客网站模板源码(HTML+CSS)~学生HTML个人网页作业作品下载 ~个人主页博客网页设计制作 ~大学生个人网站作业模板 ~简单个人网页制作临近期末, 你还 ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...

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

HTML css浮动练习——猫眼电影网页相关推荐

最新文章

热门文章