CSS基础-3.12 浮动练习

最新推荐文章于 2023-11-19 11:37:36 发布
最新推荐文章于 2023-11-19 11:37:36 发布
阅读量546 收藏 2
点赞数
分类专栏： 前端学习 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44714543/article/details/122319795
版权

文章目录

电影页面制作效果图

效果图

电影海报部分取自哥哥姐姐的结婚照~在这里插入图片描述

电影页面制作过程

页面主要构成

在这里插入图片描述

HTML5 代码

<!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 class='select' href="">正在热映</a>
            <a href="">即将上映</a>
            <a href="">经典影片</a>
        </nav>
    
        <div class="container">
            <div class="choose-area">
                <div class="item clearfix">
                    <div class="left">
                        类型：
                    </div>
                    <div class="right">
                        <ul>
                            <li class='select'><a href="">suan</a></li>
                            <li><a href="">In.</a></li>
                            <li><a href="">Quibusdam!</a></li>
                            <li><a href="">Facere.</a></li>
                            <li><a href="">Cupiditate!</a></li>
                            <li><a href="">Quidem?</a></li>
                            <li><a href="">Quia.</a></li>
                            <li><a href="">Rerum!</a></li>
                            <li><a href="">Suscipit!</a></li>
                            <li><a href="">Itaque.</a></li>
                            <li><a href="">Consectetur.</a></li>
                            <li><a href="">Ab!</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Mollitia.</a></li>
                            <li><a href="">Laborum!</a></li>
                            <li><a href="">Consequatur!</a></li>
                            <li><a href="">Quam.</a></li>
                            <li><a href="">Quo?</a></li>
                            <li><a href="">Similique.</a></li>
                            <li><a href="">A?</a></li>
                        </ul>
                    </div>  
                </div> 
                <div class="item clearfix">        
                    <div class="left">
                        区域：
                    </div>
                    <div class="right">
                        <ul>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">In.</a></li>
                            <li><a href="">Quibusdam!</a></li>
                            <li><a href="">Facere.</a></li>
                            <li><a href="">Cupiditate!</a></li>
                            <li><a href="">Quidem?</a></li>
                            <li><a href="">Quia.</a></li>
                            <li><a href="">Rerum!</a></li>
                            <li><a href="">Suscipit!</a></li>
                            <li><a href="">Itaque.</a></li>
                            <li><a href="">Consectetur.</a></li>
                            <li><a href="">Ab!</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Mollitia.</a></li>
                            <li><a href="">Laborum!</a></li>
                            <li><a href="">Consequatur!</a></li>
                            <li><a href="">Quam.</a></li>
                            <li><a href="">Quo?</a></li>
                            <li><a href="">Similique.</a></li>
                            <li><a href="">A?</a></li>
                        </ul>
                    </div> 
                </div> 
                <div class="item clearfix no-line">
                    <div class="left">
                        地区：
                    </div>
                    <div class="right">
                        <ul>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">In.</a></li>
                            <li><a href="">Quibusdam!</a></li>
                            <li><a href="">Facere.</a></li>
                            <li><a href="">Cupiditate!</a></li>
                            <li><a href="">Quidem?</a></li>
                            <li><a href="">Quia.</a></li>
                            <li><a href="">Rerum!</a></li>
                            <li><a href="">Suscipit!</a></li>
                            <li><a href="">Itaque.</a></li>
                            <li><a href="">Consectetur.</a></li>
                            <li><a href="">Ab!</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Mollitia.</a></li>
                            <li><a href="">Laborum!</a></li>
                            <li><a href="">Consequatur!</a></li>
                            <li><a href="">Quam.</a></li>
                            <li><a href="">Quo?</a></li>
                            <li><a href="">Similique.</a></li>
                            <li><a href="">A?</a></li>
                        </ul>
                    </div>      
                </div>
            </div>
            <div class="movies">
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/1.jpg" alt=""></a></div>
                    <div class="name"><a href="">我愿意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/2.jpg" alt=""></a></div>
                    <div class="name"><a href="">七年</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/3.jpg" alt=""></a></div>
                    <div class="name"><a href="">钟意</a></div>
                    <div class="score">9.4</div>
                </div>
               
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/1.jpg" alt=""></a></div>
                    <div class="name"><a href="">我愿意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/2.jpg" alt=""></a></div>
                    <div class="name"><a href="">七年</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/3.jpg" alt=""></a></div>
                    <div class="name"><a href="">钟意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/1.jpg" alt=""></a></div>
                    <div class="name"><a href="">我愿意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/2.jpg" alt=""></a></div>
                    <div class="name"><a href="">七年</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/3.jpg" alt=""></a></div>
                    <div class="name"><a href="">钟意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/1.jpg" alt=""></a></div>
                    <div class="name"><a href="">我愿意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/2.jpg" alt=""></a></div>
                    <div class="name"><a href="">七年</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/3.jpg" alt=""></a></div>
                    <div class="name"><a href="">钟意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/1.jpg" alt=""></a></div>
                    <div class="name"><a href="">我愿意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/2.jpg" alt=""></a></div>
                    <div class="name"><a href="">七年</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/3.jpg" alt=""></a></div>
                    <div class="name"><a href="">钟意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/1.jpg" alt=""></a></div>
                    <div class="name"><a href="">我愿意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/2.jpg" alt=""></a></div>
                    <div class="name"><a href="">七年</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/3.jpg" alt=""></a></div>
                    <div class="name"><a href="">钟意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/1.jpg" alt=""></a></div>
                    <div class="name"><a href="">我愿意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/2.jpg" alt=""></a></div>
                    <div class="name"><a href="">七年</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/3.jpg" alt=""></a></div>
                    <div class="name"><a href="">钟意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/1.jpg" alt=""></a></div>
                    <div class="name"><a href="">我愿意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/2.jpg" alt=""></a></div>
                    <div class="name"><a href="">七年</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/3.jpg" alt=""></a></div>
                    <div class="name"><a href="">钟意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/1.jpg" alt=""></a></div>
                    <div class="name"><a href="">我愿意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/2.jpg" alt=""></a></div>
                    <div class="name"><a href="">七年</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/3.jpg" alt=""></a></div>
                    <div class="name"><a href="">钟意</a></div>
                    <div class="score">9.4</div>
                </div>
                <div class="movie-item">
                    <div class="poster"><a href=""><img class='im' src="./img/1.jpg" alt=""></a></div>
                    <div class="name"><a href="">我愿意</a></div>
                    <div class="score">9.4</div>
                </div>
            </div>
            <div class="pager">
                <a href="">上一页</a>
                <a href="">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="">9</a><a href="">10</a>
                <a href="">下一页</a>
            </div>
        </div>
    </div>
</body>
</html>

CSS代码

  • movie样式
/* 因为整个页面的绝大多数的字体颜色，行高都是一样的，因而直接在body中写明字样式。后续元素只需继承body的样式即可 */
body{
    color: #333;
    line-height: 1.5;
}
/* 遇见浮动，就要想到写该样式，以避免高度坍塌 */
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

/* 导航栏的样式，将文字垂直居中，只需将行高和高度设置成一样即可 */
.nav{
    height:120px;
    background-color:#47464a;
    color: khaki;
    text-align: center;
    line-height: 120px;
    font-size: 42px;
}

/* 导航栏中的文字颜色为khaki，当鼠标悬停时，颜色变成lightgreen；被选择时，颜色为red。选择样式一定要在悬停样式之后，否则当鼠标挪到选中的文字时，颜色会变成悬停的lightgreen。*/
.main .nav a{
    margin: 0 60px;  /* 设置相邻文字的左右间距 */
}
.main .nav a:hover{
    color: lightgreen;
}
.main .nav a.select{
    color:red
}

/*定宽，margin上下为0 ，左右自动。这样可使得该div的盒子水平居中*/
.main .container{
    width: 1920px;
    margin:0 auto;
    /* height:600px; */
    /* background-color:rgb(226, 145, 226); */
}

.main .container .choose-area{
    border:1px solid rgb(236, 28, 28) ;
    margin:40px 0px;   
    font-size: 24px;
    line-height: 50px;
    padding: 0 50px; 
}
.main .container .choose-area .item{
    margin: 40px 0;
    border-bottom: 1px dotted rgb(5, 81, 133);
}
.main .container .choose-area .item.no-line{
    border: none;
}
.main .container .choose-area .item .left{
    float: left;
    /* width: 80px;  
    text-align: right; */
    /* background-color: maroon; */
    color:mediumpurple;
}
.main .container .choose-area .item .right{
    float: left;
    /* background-color: mediumturquoise; */
    width:1700px
}
.main .container .choose-area .item .right li{
    float: left;
    margin-right: 20px;
    /* background-color: mediumvioletred; */
    padding: 0 10px;
    
}
/* 同样，先设置hover样式，再设置select样式 */
.main .container .choose-area .item .right li:hover{
    color:mediumturquoise;
}
.main .container .choose-area .item .right li.select{
    background-color: orangered;
    color: white;
    border-radius: 15px;  /* CSS 圆角边框，值为50%时，表示为圆形 */
}
.main .container .movies .movie-item{
    float: left;
    width: 215px;
    margin: 10px 30px;
}
/* 设置第7n个元素的margin-right为0 */
.main .container .movies .movie-item:nth-child(7n){
    margin-right: 0px;
}
.main .container .movies .movie-item .poster .im{
    width: 200px;
    height: 280px;
}
.main .container .movies .movie-item .name{
    text-align: center;
    font-size: 20;
}
.main .container .movies .movie-item .score{
    text-align: center;
    font-size: 20;
    list-style: italic; /* 设置斜体 */
    line-height: 2.5;
    color:wheat;
}
/* 评分的第一个字母变大 */
.main .container .movies .movie-item .score::first-letter{
    font-size: 1.5em;
}
  • reset重置样式

reset重置样式从该链接复制过来即可：http://meyerweb.com/eric/tools/css/reset/

  • 多页面的通用样式
/* 多页面的通用样式 */
.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: #ef4238;
    color:#fff;
    border: none;
}
夏赞恩
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
今日份实操——（HTML+CSS）浮动布局练习
zx2014567296的博客
05-27 1251
效果图如下所示。 分析过程： 总共分为heder、nav、aside、content、footer5个区域。 header区域：由背景图片和蓝色背景颜色构成； nav区域：由5个超链接构成，每个超链接要设置渐变背景，当鼠标划过时更改渐变背景的显示效果。 aside区域：宽度取和nav超链接同宽，背景颜色为蓝色。 content区域：位于aside区域右侧。 footer区域：背景颜色为淡蓝色。 代码环节： ...
css浮动的一些小练习
m0_51045721的博客
02-26 1709
1.小米模块练习 需求： 使用浮动，完成设计图中的布局效果
css常用demo练习
SundayGoG的博客
05-30 1663
1.横向弹性布局，溢出的部分换行 flex布局实现不同分辨率屏幕显示效果不同，”自适应布局“ (flex-flow是flex-direction和flex-wrap的复合属性） display:flex; flex-flow:wrap; white-space: nowrap; text-overflow: ellipsis; 2.文字多余部分用省略号表示 over-flow:hidden; white-space:nowarp; text-overflow:ellipsis; 3.弹性布局，水平均匀间
浮动相关试题
weixin_33915554的博客
08-12 202
1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？ 点我 2.清除浮动指什么？如何清除浮动？ 两种以上方法。 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这...
HTML核心+CSS基础（练习）
最新发布
2301_80441013的博客
11-19 282
学习语言练习是必不可少，重中之重的，这一周我进行了常规流，浮动，定位以及表单元素的练习下面就让我们一起看看这周的分享吧！
前端CSS基础-常规流练习.rar
04-09
结合博客前端CSS基础——常规流中练习对应图片代码，三大布局规则之一常规流布局，用常规流布局实现网页效果图。
css基础4-浮动布局
12-05
CSS基础-浮动布局 CSS 布局浮动目录是 CSS 中的一种基本布局方式，通过浮动可以实现网页的水平布局和垂直布局。浮动主要用于网页布局，让垂直布局的盒子变成水平布局。 一、结构伪类选择器 结构伪类选择器是一种...
Day06-CSS布局-浮动
07-10
Day06-CSS布局-浮动
CSS经典练习-css-diner-develop.7z
11-05
下载后直接解压，然后运行index.html即可开始练习 从最简单的标签选择器开始，逐渐提升难度。 总共32关
CSS基础-介绍及语法
11-22
CSS基础-介绍及语法，css入门必备资料
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
css基本练习
m0_62520946的博客
02-02 1014
一）图片标签 需要达成效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片标签</title> <link rel="stylesheet" href="reset.css" > <style> /*body{ background-color: #7E8C8D; }*/
CSS基础练习500题
qq_37637914的博客
04-23 619
基础部分 浏览区缺省设置，外部样式表，内部样式表，内联样式，这四个的优先度如何。 颜色的表示方式有哪些。 怎样同时使用多个选择器 使用一下ID选择器 使用一下类选择器 现有10个div，有的有title属性，有的没有，使用属性选择器选中有title这个属性的div 现有10个div，有的有title属性，有的没有这个属性，带有title属性的，值也不一样，现使用属性选择器选中属性值是demo的div。 现有10个div，有的有title属性，有的没有这个属性，带有title属性的，值也不一样，现使用属性选择
HTML+CSS+JavaScript基础
12-19
本阶段内容主要涵盖技术: HTML + CSS + JavaScript基础，同时包括JS函数式框架jQuery
前端面试笔试题目-CSS专项练习（基础）
weixin_45065754的博客
03-24 1046
题目来源：牛客网：https://www.nowcoder.com/ 1、标签、类、ID选择器 请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)"，“绿色"设置为"rgb(0, 128, 0)”，“黑色"设置为"rgb(0, 0, 0)”，且字体大小都为20px <html> <head> <meta charset=utf-8> <style type="text/css"> .
CSS入门 练习
DonkeyL's
02-19 1938
CSS入门 练习CSS练习1 -- 画三角形CSS练习2 -- 画太极 CSS练习1 – 画三角形 代码： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;style type="text/css&
理解CSS浮动（练习实例，附完整代码）
微子细的博客
07-02 766
本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 效果图： 代码： <!-- 仅定义一个父div，然后从左到右，从上到下的顺序 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...
CSS浮动布局练习
m0_46744635的博客
08-17 277
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS浮动</title> <style> *{ padding:0; m
css --w --h
07-27
CSS中的`--w`和`--h`不是真正的CSS属性，而是自定义属性（custom properties）或者叫做CSS变量（CSS variables）。它们是用来存储和重用值的。 在CSS中，我们可以使用`--`前缀来定义自定义属性。例如，你可以这样定义一个`--w`和`--h`变量： ```css :root { --w: 200px; --h: 100px; } ``` 然后，你可以在其他地方使用这些变量来设置元素的宽度和高度。例如： ```css .element { width: var(--w); height: var(--h); } ``` 这样，`.element`的宽度将会是200像素，高度将会是100像素。通过使用自定义属性，我们可以在多个地方同时使用相同的值，方便维护和修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值