CSS基础 华为渐变色产品列表 综合实战
华为网页链接:https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent
html代码部分: <div class="box">
<ul>
<li>
<a href="#"> <img src="./images/product.jpeg" alt="">
<div class="product-info">
<h4>产品</h4>
<h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
<p class="more">了解更多 <i class="iconfont icon-arrow-right"></i></p> </div>
<div class="mask"></div> </a>
</li> <li>
<a href="#"> <img src="./images/huawei1.jpeg" alt="">
<div class="product-info">
<h4>行业洞察</h4>
<h5>迈向智能世界2030</h5>
<p class="more">了解更多 <i class="iconfont icon-arrow-right"></i></p> </div>
<div class="mask"></div> </a>
</li> <li>
<a href="#"> <img src="./images/huawei2.jpeg" alt="">
<div class="product-info">
<h4>产品</h4>
<h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
<p class="more">了解更多 <i class="iconfont icon-arrow-right"></i></p> </div>
<div class="mask"></div> </a>
</li>
</ul> </div>
CSS样式部分
/* 清除默认的margin和padding */
*{
margin: 0;
padding: 0;
}
/* 去除a标签下划线 */
a{
text-decoration: none;
}
/* 去除li标签圆点 */
li {
list-style: none;
}
/* 设置版心,也就是最大的外面的盒子 */
.box{
width: 1110px;
height: 247px;
/* background-color: pink; */
margin: 0 auto;
}
/* 用按标签设置盒子,并将其左浮动 */
.box li a{
position: relative;
float: left;
width: 350px;
height: 247px;
/* background-color: skyblue; */
margin-right: 30px;
overflow: hidden; /*超出盒子大小不显示*/
}
.box li:last-child a {
margin-right: 0;
}
.box img{
transition: all .5s;
width: 350px;
/* height: 247px; */
}
/* 设置文字部分的样式,并定位 */
.box .product-info{
position: absolute;
bottom: -50px;
left: 0;
/* margin: 0 auto; */
width: 350px;
height: 181px;
/* background-color: orange; */
padding: 20px 30px;
box-sizing: border-box;
z-index: 2; /*提升显示层叠,不然会受到渐变背景影响*/
transition: all .5s;
}
.box .product-info h4{
font-weight: inherit;
font-size: 14px;
height: 29px;
color: #fff;
}
.box .product-info h5{
height: 54px;
font-weight: inherit;
font-size: 18px;
margin-bottom: 40px;
color: #fff;
}
.box .product-info p{
font-size: 14px;
color: #fff; }
.box .product-info .icon-arrow-right{
display: inline-block; /* 使用transform,不能是行内元素,否则无效*/ transition: all .5s; color: red;
}
/* 设置渐变色,并定位 */
.box .mask{
position: absolute;
left: 0;
bottom: 0;
width: 350px;
height: 247px;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
opacity: 0;
} /* 设置hover */
.box a:hover .mask{
opacity: 1;
}
.box a:hover img{
transform: scale(1.2);
}
.box a:hover .product-info {
transform: translateY(-50px);
}
.box .more:hover .icon-arrow-right{ transform: translateX(20px);
}
CSS基础 华为渐变色产品列表 综合实战的更多相关文章
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- html基础 表单相关属性综合实战案例 附有注释
html结构代码: <form > <!-- form 为了让重置按钮生效--> <h1>青春不常在,抓紧谈恋爱</h1> <hr> 昵称: ...
- 【WEB基础】HTML & CSS 基础入门(4)列表及其样式
前面 网页中漂亮的导航.整齐规范的文章标题列表和图片列表等等.这些都是离不开HTML里一个重要的元素----列表,在HTML中有无序列表.有序列表和定义列表三种类型.其中,无序列表应用最为广泛,下面, ...
- css基础-盒子模型+背景和列表
border-style的值: none 无 dotted 点状 dashed 虚线 solid 实线 double 双实线 margin: 垂直方向两个相邻元素都设置了外边距,那么外边距会发生合并 ...
- HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...
- 第五模块:WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
[图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...
- CSS基础知识筑基
01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...
- Web开发——CSS基础
参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...
随机推荐
- Zookeeper客户端链接
一.zkCli.sh ./zkCli.sh -server 39.97.176.160:2182 39.97.176.160 : zookeeper服务器Ip 2182:zookeeper端口 二.Z ...
- 【Service】【Database】【Oracle】Oracle client 12.1.0.2 for MacOS
1. 概述:为了在我的macos上搭建python的cx_Oracle开发环境,首先需要配置oracle client 2. 环境与版本: 2.1. OS:Mac OS Sierra 10.12.2 ...
- Apache Log4j 2 报高危漏洞,CODING 联手腾讯安全护卫软件安全
导语 12 月 9 日晚间,Apache Log4j 2 发现了远程代码执行漏洞,恶意使用者可以通过该漏洞在目标服务器上执行任意代码,危害极大. 腾讯安全第一时间将该漏洞收录至腾讯安全漏洞特征库中,C ...
- Mysql的基操
创建一个数据库 (myschool是数据库名) create database myschool; 删除数据库 drop database myschool 创建一个表:(Student是 表名) ...
- 统计图—柱状图可视化(python)
# 柱状图 import matplotlib.pyplot as plt import matplotlib as mpl mpl.rcParams['font.sans-serif']=['Fan ...
- xmake v2.6.2 发布,新增 Linux 内核驱动模块构建支持
Xmake 是一个基于 Lua 的轻量级跨平台构建工具. 它非常的轻量,没有任何依赖,因为它内置了 Lua 运行时. 它使用 xmake.lua 维护项目构建,相比 makefile/CMakeLis ...
- LuoguP7285 「EZEC-5」修改数组 题解
Content 有一个长度为 \(n\) 的 \(0/1\) 串,你可以修改当中的一些元素,求修改后最长的连续为 \(1\) 的子串长度减去修改次数的最大值. 数据范围:\(1\leqslant n\ ...
- IDEA 无法显示 Run Dashboard 的解决方法
前言 最近开始接触微服务的项目,项目很多有时候本地调测需要启动多个项目,看到同事都是使用dashboard管理项目,服务和端口排列的整整齐齐.但是我dashboard里面啥都没有,一顿百度最后解决问题 ...
- SpringBoot整合MQTT (使用官方demo)
依赖 <dependency> <groupId>org.eclipse.paho</groupId> <artifactId>org.eclipse. ...
- ubantu电脑无法开机修复
重启Ubuntu,随即长按F9进入grub菜单:在grub菜单中,选择recovery mode,回车确认:在Recovery Menu中,选择"Root Drop to root shel ...