CSS 模拟电影卡片

使用CSS模拟图片中红色区域的部分

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="reset.css"><link rel="stylesheet" href="./css/all.css"><style>/* 设置容器样式 */.outer{width: 240px;margin: 100px auto;/* 设置阴影 */box-shadow: 0 0 6px rgba(0,0,0,.3);  }/* 设置图片 */.image-wrapper{/* border:1px red solid; */}.image-wrapper img{width: 100%;/* 设置基线对齐 */vertical-align: bottom;}.info{padding:0 18px;}/* 设置标题 */.info .title{font-size:18px;color:#717171;margin:13px 0 15px 0;}.info .category{color:#acaaaa;font-size:14px;}.info .category i{margin-left: 4px;margin-right: 7px;margin-bottom:18px;}.info .intro{font-size:13px;color:#acaaaa;line-height: 1.4;margin-left: 4px;margin-bottom:18px;}/* 设置下边的样式 */.star-wrapper{height: 46px;border-top:1px solid #e9e9e9;line-height: 46px;color:#ddd;padding:0 16px;}/* 设置星星的样式 */.star{float: left;}.star-wrapper .weibo{float:right;}.star-wrapper .light{color:#b9cb41;}</style>
</head>
<body><!-- 创建外层容器 --><div class="outer"><!-- 创建图片容器 --><div class="image-wrapper"><img src="./1.png" alt=""></div><!-- 创建内容容器 --><div class="info"><h2 class="title">Animation films</h2><h3 class="category"><i class="fas fa-map-marker-alt"></i>Animations</h3><p class="intro">Lorem lpsum is simply dummy text of the printing &typesetting industry.</p></div><div class="line"></div><!-- 创建评分容器 --><div class="star-wrapper"><!-- 创建星星 --><ul class="star"><li class="fas fa-star light"></li><li class="fas fa-star light"></li><li class="fas fa-star"></li><li class="fas fa-star"></li><!-- 创建分享 --></ul><ul class="weibo"><li class="fab fa-weibo"></li></ul></div></div>
</body>
</html>

效果

原图中的英文字体没有找到，只用了默认字体。

CSS 模拟电影卡片相关推荐

CSS/HTML制作电影网站中的电影卡片
简介: 本案例宽度固.底部评分栏宽高固定,总体高度可根据文量和图片的大小自动调整效果图(通过不同文字和图片呈现效果): 源码: <!DOCTYPE html> <html lang ...
练习（京东图片，导航左侧，网易列表，3school导航条，京东轮播图/电影卡片）
图片列表 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
PS的安装、背景、背景练习、雪碧图/精灵图、线性渐变、径向渐变、电影卡片练习——06fontbackground
目录一.PS的安装二.背景(background-color.background-image. background-repeat.background-position.background- ...
css模拟select设置高度在ie67下有效（也可作为去除边框）
今天做测试页面碰到的第二个问题,IE6,IE7 下无法去除select下拉菜单的边框,新手伤不起...百度.... 以下为转载: 下面的描述都是根据这个结构来的 <div class=" ...
使用 CSS 模拟鼠标点击交互
使用 CSS 模拟鼠标点击交互通过 CSS 方式模拟鼠标点击交互动效的两个核心要素: HTML 元素需要使用 <input> 和 <label> 元素 CSS 使用 :che ...
CSS模拟实现色阶效果
CSS模拟实现色阶效果,对各种版本的浏览器兼容性考虑的挺周全,在兼容性方面出色,这个只是模拟色阶的效果,显示出不同的色块的深浅颜色,并标识出来英文的颜色名称,其实技术方面不太难,只是有些麻烦,非常感谢 ...
html th中加斜杠,css 模拟表格斜线
用div+css模拟表格对角线用div+css模拟表格对角线类别姓名年级班级成绩班级均分张三三 2 62 61 李四三 1 48 67 王五三 5 79 63 赵六三 4 89 ...
css表格表头对角线,用div+css模拟类excel表格对角线（斜线）
我们先看html代码吧用div+css模拟类excel表格对角线(斜线) 科目姓名数学语文张三 92 62 李四 91 67 第一种写法 css如下 * { padding: 0; marg ...
用纯css模拟下雪的效果
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非 ...
手机可以模拟NFC卡片吗？项目中如何解决不能模拟NFC Tag UID的问题
Android, BlackBerry都提供了模拟NFC卡片的API,理论上可以用手机模拟出一张饭卡,交通卡,甚至银行卡去进行身份认证,交易了,是不是很开心,心情很激动啊? 且慢实际情况是应用场景 ...

CSS 模拟电影卡片

使用CSS模拟图片中红色区域的部分

代码

效果

CSS 模拟电影卡片相关推荐

最新文章

热门文章