html - 为什么我不能将 .panel 定价部分移到网页的中心？
问题描述
有几件事我无法弄清楚：
类.panel。我应用于这个类的任何 CSS 都应该应用于整个面板，但事实并非如此。（第 153、235 行），大部分都可以，但我无法将其置于中心屏幕。
在第 235 行，仅当我使用 .panel 时才应用 CSS，如果我更改本节 HTML 中的类名，然后更改 CSS 中的类名，则 CSS 不再起作用。
我现在的主要目标是使网站具有响应性并使面板居中，目前我必须横向滚动才能看到整个页面，诚然在尺寸问题上我没有做太多研究，但也许有人可以给我一个快速提示它。
/* * {
} */
#title1 {
color: #ffffff;
text-align: center;
font-weight: 700;
font-style: oblique;
text-decoration: #D8E2DC;
font-size: 40px;
display: flex;
position: relative;
bottom: 50px;
left: 100px;
font-family: 'Abril Fatface', cursive;
}
#title2 {
color: black;
text-align: center;
font-weight: 700;
font-style: oblique;
text-decoration: #000000;
font-size: 80px;
display: flex;
position: relative;
top: 30px;
left: 440px;
font-family: 'Dancing Script', cursive;
}
body {
background-color: #FB8500;
}
#type {
border: 1px solid #D8E2DC;
background-color: #FFB703;
border-style: solid;
}
#price {
border: 1px solid #D8E2DC;
background-color: #F8EDEB;
border-style: solid;
}
#time {
border: 1px solid #D8E2DC;
background-color: #F8EDEB;
border-style: solid;
}
.navigation {
display: flex;
position: relative;
left: 500px;
bottom: 135px;
}
#home {
background: none;
border-color: white;
color: white;
border: 2px solid;
padding: 20px;
font-size: 1em;
transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
#home:hover {
border-color: #a7b13f;
color: white;
box-shadow: 0 0.7em 0.7em -0.4em #023047;
transform: translateY(-0.25em);
cursor: pointer;
}
#about {
background: none;
color: white;
border: 2px solid;
padding: 20px;
font-size: 1em;
transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
#about:hover {
border-color: #a7b13f;
color: white;
box-shadow: 0 0.7em 0.7em -0.4em #023047;
transform: translateY(-0.25em);
cursor: pointer;
}
#contact {
background: none;
color: white;
border: 2px solid;
padding: 20px;
font-size: 1em;
transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
#contact:hover {
border-color: #f1ff5c;
color: white;
box-shadow: 0 0.7em 0.7em -0.4em #023047;
transform: translateY(-0.25em);
cursor: pointer;
}
#signup {
background: none;
color: #ffffff;
border: 2px solid;
padding: 20px;
font-size: 1em;
transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
#signup:hover {
border-color: #f1ff5c;
color: white;
box-shadow: 0 0.7em 0.7em -0.4em #023047;
transform: translateY(-0.25em);
cursor: pointer;
}
#logo {
max-height: 70px;
max-width: 70px;
position: relative;
bottom: 320px;
left: 10px;
border-radius: 50%;
}
#logo:hover {
max-width: 80px;
max-height: 80px;
}
.table {
position: relative;
left: 1000px;
}
.panel {
background-color: white;
border-radius: 10px;
padding: 15px 25px;
width: 100%;
max-width: 1200px;
display: flex;
flex-direction: column;
text-align: center;
text-transform: uppercase;
}
.Exams {
border-bottom: 5px solid #000000;
}
.Exams:last-child {
border-bottom: none;
}
.logo-img {
margin-bottom: 25px;
max-width: 100%;
}
.pricing-header {
color: #888;
font-weight: 600;
letter-spacing: 1px;
}
.pricing-features {
margin: 50px 0 25px;
color: #016ff9;
}
.pricing-features-item {
font-weight: 600;
letter-spacing: 1px;
font-size: 12px;
line-height: 1.5;
padding: 15px 0;
border-top: 1px solid #e1f1ff;
}
.pricing-features-item:last-child {
border-bottom: 1px solid #e1f1ff;
}
.pricing-price {
color: #016ff9;
display: block;
font-size: 32px;
font-weight: 700;
}
.pricing-button {
border: 1px solid #9dd1ff;
border-radius: 10px;
color: #348efe;
display: inline-block;
padding: 15px 35px;
text-decoration: none;
margin: 25px 0;
transition: background-color 200ms ease-in-out;
}
.pricing-button:hover, .pricing-button:focus {
background-color: #e1f1ff;
}
.pricing-button.is-featured {
background-color: #48aaff;
color: white;
}
.pricing-button.is-featured:hover, .pricing-button.is-featured:focus {
background-color: #269aff;
color: white;
}
@media (min-width: 900px) {
.panel{
flex-direction: row;
}
.Exams {
border-bottom: none;
border-right: 1px solid #e1f1ff;
padding: 25px 50px;
}
.Exams:last-child {
border-right: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="portfolio.css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Newsreader:wght@200&family=Roboto:wght@100&display=swap"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=Josefin+Slab:wght@100&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Newsreader&display=swap" rel="stylesheet">
<title>Portfolio</title>
</head>
<nav id="title1">
<h1>Learn online with
<span id=title2>David</span>
</h1>
</nav>
<nav class="navigation">
<button id="about" class="navigation"><a href="#about">About</a></button>
<button id="contact" class="navigation"><a href="#contact">Contact</a></button>
<button id="signup" class="navigation"><a href="#signup">Sign up</a></button>
<button id="home" class="navigation"><a href="#home">Home</a></button>
</nav>
<body>
<main>
<img id="logo" src="LOWD.png">
<section class="panel">
<div class="Exams">
<img src="LOWD.png" alt="" class="logo-img">
<h2 class="pricing-header">Enterprise</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Dedicated</li>
<li class="pricing-features-item">Simple horizontal scalability</li>
</ul>
<span class="pricing-price">$400</span>
<a href="#/" class="pricing-button">Free trial</a>
</div>
<div class="Exams">
<img src="LOWD.png" alt="" class="logo-img">
<h2 class="pricing-header">Something else</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Dedicated</li>
<li class="pricing-features-item">Simple horizontal scalability</li>
</ul>
<span class="pricing-price">$400</span>
<a href="#/" class="pricing-button">Free trial</a>
</div>
<div class="Exams">
<img src="LOWD.png" alt="" class="logo-img">
<h2 class="pricing-header">Another thing</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Dedicated</li>
<li class="pricing-features-item">Simple horizontal scalability</li>
</ul>
<span class="pricing-price">$400</span>
<a href="#/" class="pricing-button">Free trial</a>
</div>
<!--<div class="table">
<table>
<tr>
<th id="type">Exam type</th>
<th id="time">30 minutes</th>
<th id="time">45 minutes</th>
<th id="time">1 hour</th>
</tr>
<tr>
<td id="type">IELTS</td>
<td id="price">$15</td>
<td id="price">$22.50</td>
<td id="price">$30</td>
</tr>
<tr>
<td id="type">FCE</td>
<td id="price">$15</td>
<td id="price">$22.50</td>
<td id="price">$30</td>
</tr>
<tr>
<td id="type">CAE</td>
<td id="price">$15</td>
<td id="price">$22.50</td>
<td id="price">$30</td>
</tr>
<tr>
<td id="type">CAE</td>
<td id="price">$15</td>
<td id="price">$22.50</td>
<td id="price">$30</td>
</tr>
<tr>
<td id="type">CPE</td>
<td id="price">$15</td>
<td id="price">$22.50</td>
<td id="price">$30</td>
</tr>
<tr>
<td id="type">BEC</td>
<td id="price">$15</td>
<td id="price">$22.50</td>
<td id="price">$30</td>
</tr>
<tr>
<td id="type">OGE</td>
<td id="price">$15</td>
<td id="price">$22.50</td>
<td id="price">$30</td>
</tr>
<tr>
<td id="type">EGE</td>
<td id="price">$15</td>
<td id="price">$22.50</td>
<td id="price">$30</td>
</tr>
<tr>
<td id="type">GRE</td>
<td id="price">$20</td>
<td id="price">$27.50</td>
<td id="price">$35</td>
</tr>
</table>-->
</div>
</section>
<section id=flexpractice>
<div style="background-color: #80ffdb"></div>
<div style="background-color: #64dfdf"></div>
<div style="background-color: #48bfe3"></div>
<div style="background-color: #5390d9"></div>
<div style="background-color: #6930c3"></div>
</section>
</main>
</body>
</html>解决方案
- 添加：
margin:auto;在课堂面板上将起作用； - 不要使用：
position: relative;在导航标签上，尝试其他方式； - 删除 className 面板上的填充；
推荐阅读
- php - 如何将我的 Window 页面从名为 php 的 ajax 函数重定向到另一个 URL，我不想从 jQuery 或 javascript 重定向它
- bash - bash 源文件中的多个变量定义行为不同
- azure - 由于在 Azure CosmosDB 中的物理分区上存在时间，文档存档有什么影响
- webpack - 如何将导入的gem中的vue组件加载到rails中的lib目录？
- python - 如何使用预定义的字母部分（Django 模型）声明基于时间的字母数字 id 字段
- php - 设置 PHP Rest Api 的请求方法
- python - 使用 psycopg 将 json 中的嵌套字段从 REST API 解析到 PostgreSQL
- linux - 在文本文件中查找特定单词
- c# - 将具有 90 度旋转的横向页面叠加到具有 0 度旋转的横向页面上
- php - phpMyAdmin CCS 渲染问题