提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

HTML--猫眼电影---浮动练习

HTML -- 练习 --- 电影 浮动
2023-06-13 09:14:15 时间

HTML–猫眼电影—浮动练习

  • 这次是一次回顾的练习。
  • 代码照常都是含有详细解释。

效果图

首先是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;
}
  • 重置 的 样式是在我单独的一篇博客里，这里就没有放出来啦。
  • 希望大家可以互相交流

相关文章