javascript - 我需要一些关于 html css 我们的服务页面的帮助
问题描述
我已经在 html、CSS 中创建了一个服务页面,但我遇到了一个问题,我不知道如何解决这个问题
这是固定图像我希望看起来像这样
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
font-family: 'raleway';
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #fafafa;
}
.wrapper h1 {
font-size: 3em;
margin: 25px 0;
text-align: center;
font-weight: 500;
}
.content-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 1000px;
margin-top: 30px;
}
.card {
min-height: 220px;
width: 320px;
padding: 30px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #fff;
margin: 10px 4px;
box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.2);
}
.card i {
margin: 20px;
color: #ff5724;
}
.card h2 {
margin-bottom: 12px;
font-weight: 400;
text-align: center;
}
.card p {
color: #6c757d;
text-align: center;
}
.card:hover {}
.card:hover i,
.card:hover p {
color: #fff
}
.card:hover h2 {
font-weight: 500;
color: #f2f2f2;
}
.card:nth-child(1):hover {
background: linear-gradient(45deg, rgba(255, 28, 8, 0, 7) 0%, rgba(255, 0, 82, 0, 7) 100%), url('file:///E:/Html%20Web%20Design%20Codes/The%20Coffee%20Store/ourservices.html');
background-size: cover;
}
.card:nth-child(2):hover {
background: linear-gradient(45deg, rgba(255, 28, 8, 0, 7) 0%, rgba(255, 0, 82, 0, 7) 100%), url('file:///E:/Html%20Web%20Design%20Codes/The%20Coffee%20Store/ourservices.html');
background-size: cover;
}
.card:nth-child(3):hover {
background: linear-gradient(45deg, rgba(255, 28, 8, 0, 7) 0%, rgba(255, 0, 82, 0, 7) 100%), url('file:///E:/Html%20Web%20Design%20Codes/The%20Coffee%20Store/ourservices.html');
background-size: cover;
}
.card:nth-child(4):hover {
background: linear-gradient(45deg, rgba(255, 28, 8, 0, 7) 0%, rgba(255, 0, 82, 0, 7) 100%), url('file:///E:/Html%20Web%20Design%20Codes/The%20Coffee%20Store/ourservices.html');
background-size: cover;
}
.card:nth-child(5):hover {
background: linear-gradient(45deg, rgba(255, 28, 8, 0, 7) 0%, rgba(255, 0, 82, 0, 7) 100%), url('file:///E:/Html%20Web%20Design%20Codes/The%20Coffee%20Store/ourservices.html');
background-size: cover;
}
.card:nth-child(6):hover {
background: linear-gradient(45deg, rgba(255, 28, 8, 0, 7) 0%, rgba(255, 0, 82, 0, 7) 100%), url('file:///E:/Html%20Web%20Design%20Codes/The%20Coffee%20Store/my%20color.png');
background-size: cover;
/***Responsive****/
@media (max-width: 991px) {
.wrapper {
padding:25px;
}
.wrapper h1 {
font-size: 2.5em;
font-weight: 600;
}
.content-box {
flex-direction: column;
width: 100%;
}
.card {
min-width: 300px;
margin: 10px auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Our Services</title>
<!----External Css File---->
<link rel="stylesheet" type="text/css" href="ourservices.css">
<!----Boxicon font css ---->
<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="wrapper">
<h1> Our Services </h1>
<p>Aside from a love of that sweet java, this, Jack Wilson, owner of Radio Bistro </p>
<div class="content-box">
<div class="card">
<i class="bx bx-laptop bx-md"></i>
<h2>Web App Development</h2>
<p>
Need help getting started? Check out our business plan templates for guidance. They’re free real-world examples
</p>
</div>
<div class="card">
<i class="bx bx-line-chart bx-md"></i>
<h2>24/7 Call Center Services</h2>
<p>
Need help getting started? Check out our business plan templates for guidance. They’re free real-world examples
</p>
</div>
<div class="card">
<i class="bx bx-mail-send bx-md"></i>
<h2>Soical Media Marketing</h2>
<p>
Need help getting started? Check out our business plan templates for guidance. They’re free real-world examples
</p>
</div>
<div class="card">
<i class="bx bx-bar-chart-alt bx-md"></i>
<h2>Corporate Business </h2>
<p>
Need help getting started? Check out our business plan templates for guidance. They’re free real-world examples
</p>
</div>
<div class="card">
<i class="bx bx-paint bx-md"></i>
<h2>Creative Consultancy</h2>
<p>
Need help getting started? Check out our business plan templates for guidance. They’re free real-world examples
</p>
</div>
<div class="card">
<i class="bx bx-bar-chart-alt bx-md"></i>
<h2>Marketing Services</h2>
<p>
Need help getting started? Check out our business plan templates for guidance. They’re free real-world examples
</p>
</div>
</div>
</div>
</body>
</html>
请解决这个问题,请告诉我如何解决这个问题
解决方案
试试这个: css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper{
font-family: 'raleway';
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
background: #fafafa;
}
.wrapper h1{
font-size: 3em;
margin: 25px 0;
text-align: center;
font-weight: 500;
}
.content-box{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 1000px;
margin-top: 30px;
}
.card{
min-height: 220px;
width:320px;
padding: 30px;
border-radius: 5px;
display: flex;
justify-content:center;
align-items: center;
flex-direction: column;
background: #fff;
margin: 10px 4px;
box-shadow: 0px 15px 50px rgba(0,0,0,0.2);
}
.card i{
margin: 20px;
color :#ff5724;
}
.card h2{
margin-bottom: 12px;
font-weight: 400;
text-align: center;
}
.card p{
color: #6c757d;
text-align: center;
}
.card:hover{
}
.card:hover i,
.card:hover p{
color: #fff
}
.card:hover h2{
font-weight: 500;
color: #f2f2f2;
}
.card:nth-child(1):hover{
background:linear-gradient(45deg,
rgba(255,28,8,0,7) 0%,
rgba(255,0,82,0,7) 100%),
url('file:///E:/Html%20Web%20Design%20Codes/The%20Coffee%20Store/ourservices.html');
background-size: cover;
}
.card:nth-child(2):hover{
background:linear-gradient(45deg,
rgba(255,28,8,0,7) 0%,
rgba(255,0,82,0,7) 100%),
url('file:///E:/Html%20Web%20Design%20Codes/The%20Coffee%20Store/ourservices.html');
background-size: cover;
}
.card:nth-child(3):hover{
background:linear-gradient(45deg,
rgba(255,28,8,0,7) 0%,
rgba(255,0,82,0,7) 100%),
url('file:///E:/Html%20Web%20Design%20Codes/The%20Coffee%20Store/ourservices.html');
background-size: cover;
}
.card:nth-child(4):hover{
background:linear-gradient(45deg,
rgba(255,28,8,0,7) 0%,
rgba(255,0,82,0,7) 100%),
url('file:///E:/Html%20Web%20Design%20Codes/The%20Coffee%20Store/ourservices.html');
background-size: cover;
}
.card:nth-child(5):hover{
background:linear-gradient(45deg,
rgba(255,28,8,0,7) 0%,
rgba(255,0,82,0,7) 100%),
url('file:///E:/Html%20Web%20Design%20Codes/The%20Coffee%20Store/ourservices.html');
background-size: cover;
}
.card:nth-child(6):hover{
background:linear-gradient(45deg,
rgba(255,28,8,0,7) 0%,
rgba(255,0,82,0,7) 100%),
url('file:///E:/Html%20Web%20Design%20Codes/The%20Coffee%20Store/my%20color.png');
background-size: cover;
/***Responsive****/
@media (max-width: 991px)
{
.wrapper{
padding:25px;
}
.wrapper h1{
font-size: 2.5em;
font-weight: 600;
}
.content-box{
flex-direction: column;
width: 100%;
}
.card{
min-width: 300px;
margin: 10px auto;
}
}
html
<div class="wrapper">
<h1> Our Services </h1>
<p>Aside from a love of that sweet java, this, Jack Wilson, owner of Radio Bistro </p>
<div class="content-box">
<div class="card">
<i class="bx bx-laptop bx-md"></i>
<h2>Web App Development</h2>
<p>
Need help getting started? Check out our business plan templates for guidance. They’re free real-world examples
</p>
</div>
<div class="card">
<i class="bx bx-line-chart bx-md"></i>
<h2>24/7 Call Center Services</h2>
<p>
Need help getting started? Check out our business plan templates for guidance. They’re free real-world examples
</p>
</div>
<div class="card">
<i class="bx bx-mail-send bx-md"></i>
<h2>Soical Media Marketing</h2>
<p>
Need help getting started? Check out our business plan templates for guidance. They’re free real-world examples
</p>
</div>
</div>
<div class="content-box">
<div class="card">
<i class="bx bx-bar-chart-alt bx-md"></i>
<h2>Corporate Business </h2>
<p>
Need help getting started? Check out our business plan templates for guidance. They’re free real-world examples
</p>
</div>
<div class="card">
<i class="bx bx-paint bx-md"></i>
<h2>Creative Consultancy</h2>
<p>
Need help getting started? Check out our business plan templates for guidance. They’re free real-world examples
</p>
</div>
<div class="card">
<i class="bx bx-bar-chart-alt bx-md"></i>
<h2>Marketing Services</h2>
<p>
Need help getting started? Check out our business plan templates for guidance. They’re free real-world examples
</p>
</div>
</div>
</div>
推荐阅读
- css - @import 在 Ruby 应用程序的 application.scss 中不起作用
- sql - 将 2 个复杂的 GROUP BY / PARTITION BY 查询转化为 1 个查询
- reactjs - 如何避免 Typescript React 中的重复界面
- python - 如何将按钮的命令函数的返回值作为另一个按钮的命令函数的输入传递
- scala - 我想在 SBT 项目中做 Spark 教程,我需要安装哪些库?
- javascript - async/await 总是返回 undefined
- android - Android AVD 在应用程序运行时崩溃,因为“混合版本可能导致运行时崩溃”
- sql-server - 运行最新版本的 SQL Server,如何处理旧的 DB
- elixir - Ecto 查询中的条件参数
- string - TryStrToDateTime 忽略字符串中的尾随字符(“误报”)