17.电影卡片练习
猫眼电影
实现目标
实现代码
<!DOCTYPE html> <html lang=""> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 清空格式 --> <link href="css/reset.css" rel="stylesheet"> <!-- 引入图标 --> <link href="./fontawesome/css/all.css" rel="stylesheet"> <style> /* 设置外层容器 */ .banner { width: 100%; min-height: 1200px; margin-top: 80px; } /* 设置内层容器 */ .container { width: 1200px; height: 376px; /* 径向渐变 */ background-image: radial-gradient(circle at 200px -100px, #a06d6d, #3e2f67 600px); margin: 0 auto 0; } /* 设置图片容器 */ .img-g { float: left; width: 300px; } /* 设置图片 */ .img-g img { height: 322px; width: 232px; border: 5px solid white; position: relative; top: 72px; left: 33px; } /* 设置内容容器 */ .intro { width: 340px; padding-top: 72px; float: left; } /* 电影摘要 */ .synopsis ul { color: aliceblue; line-height: 25px; } ul .title1 { font-size: 25px; font-weight: bold; } ul .title2 { font-size: 18px; margin-bottom: 5px; } ul .title3 { font-size: 15px; } /* 点赞评分 */ .score { padding-top: 113px; } .score a { color: white; text-decoration: none; background-color: rgb(117, 97, 137); border-radius: 2px; float: left; padding-left: 33px; padding-right: 33px; line-height: 35px; margin-right: 10px; } /* 票房统计 */ .count { float: left; color: white; font-size: 10px; padding-top: 210px; } ul .c-title2 { font-size: 28px; line-height: 60px; color: rgb(255, 198, 0); } ul .c-title3 { font-size: 28px; line-height: 60px; color: rgb(154, 139, 176); } </style> </head> <body> <!-- 外部容器 --> <div class="banner"> <!-- 内部容器 --> <div class="container"> <!-- 图片容器 --> <div class="img-g"> <img src="./img/fimal/gadGirl.jpeg" alt=""> </div> <!-- 内容容器 --> <div class="intro"> <!-- 电影摘要 --> <div class="synopsis"> <ul> <li class="title1">新灰姑娘2</li> <li class="title2">Cinderella and the Spellbinder</li> <li class="title3">动画 奇幻 冒险 合家欢</li> <li class="title3">中国大陆 / 90分钟</li> <li class="title3">2022-10-01中国大陆上映</li> </ul> </div> <!-- 点赞评分 --> <div class="score"> <ul> <li> <a href="javascript:;"> <i class="fas fa-heart"></i> <span>想看</span> </a> </li> <li> <a href="javascript:;"> <i class="fas fa-star"></i> <span>评分</span> </a> </li> </ul> </div> </div> <!-- 统计 --> <div class="count"> <ul> <li class="">想看数</li> <li class="c-title2">66516</li> <li class="">累计票房</li> <li class="c-title3">暂无</li> </ul> </div> </div> </div> </body> </html>
显示