效果图
首先是HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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/index.css">
<link rel="stylesheet" href="./css/common.css">
</head>
<body>
<!-- 这里是一个大框架 ,作为包裹所有外层包含块 -->
<div class="main">
<!-- 里面分为上中两个 大范围 -->
<!-- 首先是导航 -->
<nav class="nav">
<a href="#">正在热映</a>
<a href="#" class="select">即将上映</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="#">Sequi.</a></li>
<li><a href="#">Saepe.</a></li>
<li><a href="#">Tempore?</a></li>
<li><a href="#">Ducimus!</a></li>
</ul>
</div>
</div>
<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="#">Sequi.</a></li>
<li><a href="#">Saepe.</a></li>
<li><a href="#">Tempore?</a></li>
<li><a href="#">Ducimus!</a></li>
<li><a href="#">Perferendis?</a></li>
</ul>
</div>
</div>
<div class="choose-item clearfix no-line">
<div class="left">年代:</div>
<div class="right">
<ul class=" clearfix>
<li class="select"> <a href="#">Lorem.</a></li>
<li><a href="#">Sequi.</a></li>
<li><a href="#">Saepe.</a></li>
<li><a href="#">Tempore?</a></li>
<li><a href="#">Ducimus!</a></li>
<li><a href="#">Perferendis?</a></li>
</ul>
</div>
</div>
</div>
<!-- 这边是底下的那个 电影的选项的部分 -->
<div class="movies clearfix">
/* 细致的再将这个div 分为三部分 一是图片 二是电影名字 三是 评分
底下的都是一样的 我这里只写啦 一个样板 剩下的复制即可
*/
<div class="movies-item">
<div class="poster">
<a href="#">
<img src="./img/1.jpg" alt="">
</a>
</div>
<div class="name">
<a href="">唐人街探案</a>
</div>
<div class="score">9.4</div>
</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>
</body>
</html>
CSS 代码
/* 给全局设置文字的颜色 其他的再做局部调整 */
body{
color: #333;
}
/* 解决高度塌陷 */
.clearfix::after{
content: "";
display: block;
clear: both;
}
/* 设置整体行高 */
.main{
line-height: 1.5;
}
/* 划分导航区域 */
.main .nav{
height: 60px;
background-color:rgb(71,70,74) ;
font-size: 14px;
color: #999;
line-height: 60px;
text-align: center;
}
/* 设置 导航中 a 的左右间距 */
.main .nav a{
margin: 0 38px;
}
/* 鼠标悬停效果 */
.main .nav a:hover{
color: #fff;
}
/* 选中效果 切换是靠 js和其他代码控制 */
.main .nav a.select{
color: rgb(239,68,70);
}
/* 第二部分 定宽 */
.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 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: 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: rgb(239,68,70);
}
.main .container .choose-area .choose-item .right li.select{
background-color: rgb(239,68,70);
color: #fff;
border-radius: 15px;
}
.main .container .movies .movies-item{
float: left;
width: 160px;
margin: 10px 32px 10px 0 ;
}
.main .container .movies .movies-item:nth-child(6n){
margin-right:0 ;
}
.main .container .movies .movies-item .poster img{
width: 160px;
height: 220px;
}
.main .container .movies .movies-item .name{
white-space: nowrap;
/* 设置文本内的换行无效。 */
overflow: hidden;
/* 内容会被修剪,并且其余内容不可见
overflow: hidden;
补充:
1、默认值。内容不会被修剪,会呈现在元素框之外
overflow: visible;
2、内容会被修剪,并且其余内容不可见
overflow: hidden;
3、内容会被修剪,浏览器会显示滚动条以便查看其余内容
overflow: scroll;
4、由浏览器定夺,如果内容被修剪,就会显示滚动条
overflow: auto;
5、规定从父元素继承overflow属性的值
overflow: inherit; */
text-overflow: ellipsis;
/* text-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。
它可以被剪切,显示一个省略号('...',U + 2026 HORIZONTAL ELLIPSIS)或显示一个自定义字符串 */
padding: 0 2px;
text-align: center;
}
.main .container .movies .movies-item .score{
color: #ffb400;
text-align: center;
line-height: 2.5;
/* 斜体 */
font-style: italic;
}
.main .container .movies .movies-item .score::first-letter{
font-size: 1.5em;
}
公共样式
/* 多页面的公共样式
底部的换页的。
因为很多页面底部需要那个换行的 所以直接设置为一个 公共的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-color: #ef4238;
color: #fff;
border: none;
}