css实现一个电影卡片
1 <!DOCTYPE html> 2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <link rel="stylesheet" href="./reset.css">
7 <link rel="stylesheet" href="./css/all.css">
8 <style>
9 .clearfix::before,
10 .clearfix::after{
11 content:"";
12 display:table;
13 clear:both;
14 }
15 .outter {
16 width:675px;
17 height:274px;
18 }
19 .movie_image {
20 width: 135px;
21 height: 189px;
22 background-image:url("./image/1.jpeg") ;
23 background-size: cover;
24 float:left;
25 }
26 .movie_decoration {
27 width: 333px;
28 height: 274px;
29 margin:0 10px;
30 float:left;
31 }
32 .movie_decoration ul li {
33 margin:10px 0;
34 }
35 .movie_appraise {
36 width: 171px;
37 height: 212px;
38 float:left;
39 }
40 .director span {
41 margin-top:none;
42 }
43 .logo {
44 float:left;
45 }
46 .hide{
47 float:right;
48 }
49 .star-list .sta{
50 float:right;
51 display:block;
52 }
53 .number {
54 float:left;
55 }
56 .sum {
57 float:right;
58 position: relative;
59 top:-18px;
60 clear:both;
61 }
62 .item {
63 margin:10px 0;
64 }
64 }
65 .star5 {
66 float:left;
67 }
68 .star4 {
69 float:left;
70 }
71 .star3 {
72 float:left;
73 }
74 .star2 {
75 float:left;
76 }
77 .star1 {
78 float:left;
79 }
80 .power5 {
81 width:17px;
82 height:14px;
83 margin: 0 10px;
84 background-color:#FFD596;
85 float:left;
86 }
87 .power4 {
88 width:64px;
89 height:14px;
90 margin: 0 10px;
91 background-color:#FFD596;
92 float:left;
93 }
94 .power3 {
95 width:30px;
96 height:14px;
97 margin: 0 10px;
98 background-color:#FFD596;
99 float:left;
100 }
101 .power2 {
102 width:2px;
103 height:14px;
104 margin: 0 10px;
105 background-color:#FFD596;
106 float:left;
107 }
108 .power1 {
109 width:0.4px;
109 width:0.4px;
110 height:14px;
111 margin: 0 10px;
112 background-color:#FFD596;
113 float:left;
114 }
115 .pointe {
116 margin-top:10px;
117 position: relative;
118 }
119 .number {
120 font-size:45px;
121 }
122 .s {
123 color:#FFAC2D;
124 }
125 .a {
126 color:#DADADA;
127 }
128 .st {
129 color:#9B9BB4;
130 }
131 .vote {
132 color:#9FB2E3;
133 }
134 </style>
135 </head>
136 <body>
137 <div class="outter clearfix">
138 <div class="movie_image">
139 </div>
140 <div class="movie_decoration">
141 <ul class="decoration_list">
142 <li>
143 <div class="director">
144 <span>导演:</span>
145 <span class="hight">黄绮琳</span>
146 </div>
147 </li>
148 <li>
149 <div class="screemwriter">
150 <span>编剧:</span>
151 <span class="hight">黄绮琳</span>
152 </div>
153 </li>
154 <li>
155 <div class="role">
156 <span>主演:</span>
157 <span class="hight elli"> 邓丽欣<span class="lin e">/</span>朱柏康<span class="line">/</span>鲍起静<span class="line">/</ span>金楷杰<span class="line">/</span>林二汶<span class="line">/</span>> 许素莹<span class="line">/</span>岑珈其<span class="line">/</span>卢镇业
<span class="line">/</span>易健儿<span class="line">/</span>陆添新<span class="line">/</span>麦梓亨<span class="line">/</span>袁绮雯<span class= "line">/</span>陈健朗</span>
158 </div>
159 </li>
160 <li>
161 <div class="type">
162 <span>类型:</span>
163 <span class="hight">剧情</span>
164 </div>
165 </li>
166 <li>
167 <div class="country">
168 <span>制片国家/地区:</span>
169 <span class="hight">中国香港</span>
170 </div>
171 </li>
172 <li>
173 <div class="language">
174 <span>语言:</span>
175 <span class="hight">粤语/汉语普通话</span>
176 </div>
177 </li>
178 <li>
179 <div class="time">
180 <span>上映时间:</span>
181 <span class="hight">2020-06-11(中国香港)/2019-11 -17</span>
182 </div>
183 </li>
184 <li>
185 <div class="long-time">
186 <span>时长:</span>
187 <span class="hight">91分钟</span>
188 </div>
189 </li>
190 </ul>
191
192 </div>
193 <div class="movie_appraise">
194 <div class="clearfix inner-top">
195 <div class="logo st">豆瓣评分</div>
196 <div class="hide">
197 <i class="fas fa-external-link-alt st"></i>
198 <span>引用</span>
199 </div>
200 </div>
201 <div class="pointe clearfix">
202 <strong class="number">7.6</strong>
203 <div class="star">
204 <div class="star-num">
205 <ul class="star-list">
206 <li class="sta a"><i class="fas fa-star" ></i></li>
207 <li class="sta s"><i class="fas fa-star" ></i></li>
208 <li class="sta s"><i class="fas fa-star" ></i></li>
209 <li class="sta s"><i class="fas fa-star" ></i></li>
210 <li class="sta s"><i class="fas fa-star" ></i></li>
211 </ul>
212
213 </div>
214 <div class="sum">
215 <span class="vote">9114人评价</span>
216
217 </div>
218 </div>
219 </div>
220 <div class="item">
221 <span class="star5 st">5星</span>
222 <div class="power5"></div>
223 <span class="per st">14.9%</span>
224 </div>
225 <div class="item">
226 <span class="star4 st">4星</span>
227 <div class="power4"></div>
228 <span class="per st">55.8%</span>
229 </div>
230 <div class="item">
231 <span class="star3 st">3星</span>
232 <div class="power3"></div>
233 <span class="per st">26.6%</span>
234 </div>
235 <div class="item">
236 <span class="star2 st">2星</span>
237 <div class="power2"></div>
238 <span class="per st">2.2%</span>
239 </div>
240 <div class="item">
241 <span class="star1 st">1星</span>
242 <div class="power1"></div>
243 <span class="per st">0.6%</span>
244 </div>
245 </div>
246 </div>
247 </body>
248 </html>
还有一些细节没有还原，代码过于乱，可读性差。
css实现一个电影卡片的更多相关文章
- 用Vue.js开发一个电影App的前端界面
我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目.这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界 ...
- 纯 CSS 创建一个三角形
[要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...
- 用css实现一个空心圆，并始终放置在浏览器窗口左下角
用css实现一个空心圆,并始终放置在浏览器窗口左下角 div{ position:fixed; bottom:0; ...
- 用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 使用css画一个箭头
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 如何用css实现一个三角形？
昨天被人问到说如何用css实现一个三角形?em.... 当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:
- 纯CSS实现一个微信logo，需要几个标签？
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个 ...
- [ASP.NET MVC2 系列] ASP.Net MVC教程之《在15分钟内用ASP.Net MVC创建一个电影数据库应用程序》
[ASP.NET MVC2 系列] [ASP.NET MVC2 系列] ASP.Net MVC教程之<在15分钟内用ASP.Net MVC创建一个电影数据库应用程序> ...
随机推荐
- HDU 4049 Tourism Planning（状压DP）题解
题意:m个城市,n个人,让这n个人按固定顺序走遍m个城市.每个城市有一个单人票价pi.每个人在每个城市能获得vij的价值.如果多个人在同一城市,那么会额外获得价值,给出一张n * n价值表,额外价值为 ...
- 使用 Jenkins 搭建 CI/CD All In One
使用 Jenkins 搭建 CI/CD All In One https://ci.jenkins.io/ https://www.jenkins.io/zh/ jobs pipelines refs ...
- element-ui & babel-plugin-component config bug
element-ui & babel-plugin-component config bug vue-cli bad babel.config.js module.exports = { pr ...
- javascript module system all in one
javascript module system all in one AMD & CMD https://github.com/amdjs/amdjs-api/wiki/AMD http:/ ...
- MathJax TeX & LaTeX
MathJax TeX & LaTeX mathcal https://leetcode-cn.com/problems/binary-search/solution/er-fen-cha-z ...
- anatomy app
anatomy app https://appolicious.com/the-best-iphone-apps-for-anatomy-students/ ios anatomy app Compl ...
- 小程序 & taro 踩坑指南
小程序 & taro 踩坑指南 微信开发者工具, 不支持 react bug https://github.com/NervJS/taro/issues/5042 solution just ...
- Python序列之列表（一）
在Python中,列表是一种常用的序列,接下来我来讲一下关于Python中列表的知识. 列表的创建 Python中有多种创建列表的方式 1.使用赋值运算符直接赋值创建列表 在创建列表时,我们直接使用赋 ...
- 又长又细，万字长文带你解读Redisson分布式锁的源码
前言 上一篇文章写了Redis分布式锁的原理和缺陷,觉得有些不过瘾,只是简单的介绍了下Redisson这个框架,具体的原理什么的还没说过呢.趁年前项目忙的差不多了,反正闲着也是闲着,不如把Rediss ...
- 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)
浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...