响应式设计（媒体查询）
Responsive Design(media query)
我是一名新手前端开发人员，从事图书出版博客项目，我被困在目标网页 header 的响应部分。
我使用带有一些 CSS 规则的媒体查询来使我的 header 响应，但在移动设备上显示时它不起作用。
我希望我的菜单栏在移动设备上看起来正确。有人可以帮助我吗？
enter code here
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 20px;
}
/*Navigation bar*/
header {
background-image: url("../Picture/sutterlin-g4d210ab6b_1920.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
display: flex;
justify-content: space-around;
width: 100%;
}
.logo img {
max-width: 100px;
max-height: 100px;
margin-top: 30%;
}
.nav_link {
text-align: center;
margin-top: 5%;
margin-bottom: 5%;
}
.nav_link li, a{
display: inline-block;
padding: 7px 13px;
text-transform: uppercase;
text-decoration: none;
border-radius: 3px;
font-weight: bold;
color: #ffffff;
}
.active,a:hover {
background: #FF2628;
transition: .10s;
}
main {
background-image: url("../Picture/background_page.jpg");
}
.function,
.publication {
margin: 0 20%;
}
h1 {
text-align: center;
margin: 16px;
color: #fafafa;
text-transform: uppercase;
font-family: 'Titillium Web', serif;
font-weight: bold;
font-style: italic;
}
.function p {
font-size: 1em;
text-align: center;
font-style: italic;
color: #b9aeae;
}
.function p:hover {
color: #ffffff;
}
.function {
position: relative;
top: -40px;
background-color: #701711;
padding: 20px;
box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(133, 42, 42),
0.3em 0.3em 1em rgba(0,0,0,0.3);
}
.publication h2 {
text-align: center;
font-family: 'Beau Rivage', cursive;
font-weight: bolder;
font-style: italic;
font-size: 2.5em;
color: #7B5A39;
position: relative;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.publication h2::before {
content: "";
display: block;
width: 340px;
height: 5px;
background: #060b11;
position: absolute;
left: 0;
top: 50%;
}
.publication h2::after {
content: "";
display: block;
width: 330px;
height: 5px;
background: #060b11;
position: absolute;
right: 0;
top: 50%;
}
.actualite h2 {
text-align: center;
font-family: 'Beau Rivage', cursive;
font-weight: bolder;
font-style: italic;
font-size: 2.5rem;
color: #7B5A39;
position: relative;
margin: 1.25rem;
}
.actualite h2::before {
content: "";
display: block;
width: 680px;
height: 5px;
background: #060b11;
position: absolute;
left: 0;
top: 50%;
}
.actualite h2::after {
content: "";
display: block;
width: 680px;
height: 5px;
background: #060b11;
position: absolute;
right: 0;
top: 50%;
}
.daily_news {
display: flex;
justify-content: center;
justify-content: space-between;
}
.daily_news p {
width: 500px;
margin: 1.25rem;
text-align: justify;
font-size: 1rem;
font-style: italic;
}
.books_title {
display: flex;
justify-content: center;
justify-content: space-between;
}
.books_title img {
height: 200px;
width: 180px;
.main_content {
display: flex;
justify-content: center;
justify-content: space-around;
padding-bottom: 1.25rem;
padding-top: 1.25rem;
background-color: #060b11;
color: rgb(255, 255, 255);
border-top: 6px solid #8C2C23;
}
h4 {
font-size: 1rem;
padding-bottom: 20px;
text-transform: uppercase;
}
.text , i{
padding: 5px;
}
.copyright h6{
text-align: center;
background-color:#262626;
color: #999999;
}
.social li {
display: inline;
}
.social a ,li {
color: #ffffff;
}
/* About us page */
label {
width: 100px;
display: inline-block;
padding: 10px;
}
.form_2 label {
width: 400px;
}
.container_2 {
display: flex;
padding-top: 60px;
margin-left: 40px;
margin-right: 40px;
padding-bottom: 50px;
align-items: flex-start;
border: 1px solid rgb(173, 172, 172);
font-size: 18px;
font-weight: bold;
background-color: #BC4913;
}
textarea {
resize: horizontal;
min-width: 320px;
}
h3 {
font-size: 1.875rem;
padding-bottom: 60px;
}
.form_1 {
padding-right: 80px;
padding-left: 200px;
flex: 2;
order: 2;
}
.form_2 {
flex: 2;
order: 2;
}
.form_2 button {
background-color: rgb(8, 8, 8);
border-radius: 0;
width: 400px;
}
/* Books Summary */
.title h1{
color: #fcf9f9;
background-color: #BC4913;
padding-bottom: 120px;
}
.Books_Sum {
display: flex;
width: 30%;
background-color: #fff;
padding: 15px;
gap: 20px;
margin-left: 210px;
}
.column {
box-shadow: 0 5px 5px rgba(0,0,0,0.30);
}
.card_image {
width: 250px;
display: block;
margin-bottom: 10px;
}
.Books_Sum p {
font-size: 1.125rem;
line-height: 1.5;
height: 90px;
overflow: hidden;
text-align: justify;
padding: 15px;
}
.Books_Sum a{
display: inline-block;
color: #fff;
background-color: #060b11;
text-decoration: none;
border-radius: 8px;
margin-top: 15px;
margin-left: 70px;
font-size: 1rem;
padding: 10px;
margin-bottom: 15px;
}
.Books_Sum a:hover {
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
.Books_Sum .showContent p{
height: auto;
}
.Books_Sum .showContent a.readmore-btn{
background-color: #f7090d;
}
/*Author lists */
.List_author {
display: flex;
}
.title_authors {
background-color: #BC4913;
padding-bottom: 120px;
}
@media only screen and(max-width: 480px){
.nav_link {
background-color: #060b11;
}
}
<!DOCTYPE html>
<html lang="en-fr">
<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">
<title>Accueil | Reflexionjuridique</title>
<link rel="stylesheet" href="../MaisonEdition/Resources/Css/styles.css">
<link rel="shortcut icon" type="image/jpg" href="../MaisonEdition/Resources/Picture/Logo.jpeg">
<link rel="stylesheet" href="../MaisonEdition/Resources/Css/fontawesome-free-5.15.4-web/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Beau+Rivage&display=swap" rel="stylesheet">
</head>
<body>
<header>
<figure class="logo">
<img src="../MaisonEdition/Resources/Picture/LogoTransparent.png" alt="logo">
</figure>
<ul class="nav_link">
<li><a class="active" href='index.html' target="_self">Accueil</a></li>
<li><a href='Catalogue.html' target="_self">Catalogue</a></li>
<li><a href='Service.html' target='_self'>Services</a></li>
<li><a href='Historique.html' target='_self'>Historique</a></li>
<li><a href='Contact.html' target='_self'>Contact</a></li>
</ul>
</header>
<main>
<section class="function">
<h1>RÉFLEXION JURIDIQUE</h1><br>
<p>La jeune maison d’édition Réflexion Juridique n’étant qu’une association d’impression et de la diffusion des livres ou d’autres documents agit comme un intermédiaire entre un auteur et ses lecteurs. Pour cela, elle supervise les productions des ouvrages mis à sa disposition au préalable tout en s’assurant que les productions puissent répondre aux critères ci-après :Qualité de l’écriture,e l’intrigue, et Originalité.
Ce mot est utilisé ici dans le sens de lutter contre une conspiration sécrète ou déloyale visant à obtenir les avantages qui peuvent nuire à l’auteur.
Cependant la sélection n’est pas la seule fonction de notre jeune maison d’édition des livres Réflexion Juridique ; après le choix ou la sélection de texte de nos clients, elle signe un contrat d’édition avec l’auteur qui l’oblige à accompagner ce dernier tout au long du processus de la création et de la diffusion du livre et cela en tenant compte de l’article 4 de la loi n° 74-003 du 2 Janvier 1974 relative au dépôt légal obligatoire des publications, le Décret du 2 juillet 2002 sur la nomenclature des actes générateurs des recettes sur la propriété intellectuelle et l’article 7 de l’Ordonnance n°89-010 du 18 Janvier 1989 portant la création de la Bibliothèque Nationale du Zaïre d’une part et d’autre part les arrêtes conjoints du 29 Juin 1977 fixant les modalités d’application et l’article 2 de l’arrêté n° 033/76 du 04 Octobre 1976 relatif au dépôt légal auprès de l’ambassade la plus proche de tous les documents ou livres que tout congolais rédige à l’étranger.
</p>
</section>
<section class="publication">
<h2>nos dernière publication</h2>
<div class="books_title">
<img src="../MaisonEdition/Resources/Picture/droit_image.jpg" alt="Droit"></a>
<img src="../MaisonEdition/Resources/Picture/Protection_Enfant.jpg" alt="Enfant"></a>
<img src="../MaisonEdition/Resources/Picture/Contrat.jpeg" alt="Contrat"></a>
<img src="../MaisonEdition/Resources/Picture/dime.jpg" alt="Dime"></a>
<img src="../MaisonEdition/Resources/Picture/police.jpg" alt="police"></a>
</div>
</section>
<section class="actualite">
<h2>actualités quotidiennes</h2>
<div class="daily_news">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
</div>
</section>
</main>
<footer>
<div class="main_content">
<div class="Place">
<h4>Place</h4>
<i class="fas fa-map-marker-alt"></i>
<span class="text">123 Avenue Kabila, Lubumbashi</span><br>
<i class="fas fa-phone-alt"></i>
<span class="text">+243 9006146871 | + 243 892850171</span><br>
<i class="fas fa-envelope"></i>
<span class="text">reflexionjuridiquerdclushi@gmail.com</span>
</div>
<div class="social">
<h4>réseaux sociaux</h4>
<ul>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
<div class="copyright">
<h6>©2021 Ashwell publishing Ldt-Register in England No.6431579 |</h6>
<h6>Terms & Conditions | Privacy Policy | Cookies Policy</h6>
</div>
</footer>
</body>
</html>
你只需要在and之后添加一个space:
@media only screen and (max-width: 480px){
.nav_link {
background-color: #060b11;
}
}
您还需要关闭 .books_title img
上的 class 标签
.books_title img {
height: 200px;
width: 180px;
}
您的图片后还有 </a> 个标签。如果你试图以某种方式格式化它们，你需要在 部分之前使用开始的 <a> 标签，因为目前，它们除了制造错误之外什么都不做。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 20px;
}
/*Navigation bar*/
header {
background-image: url("../Picture/sutterlin-g4d210ab6b_1920.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
display: flex;
justify-content: space-around;
width: 100%;
}
.logo img {
max-width: 100px;
max-height: 100px;
margin-top: 30%;
}
.nav_link {
text-align: center;
margin-top: 5%;
margin-bottom: 5%;
}
.nav_link li,
a {
display: inline-block;
padding: 7px 13px;
text-transform: uppercase;
text-decoration: none;
border-radius: 3px;
font-weight: bold;
color: #ffffff;
}
.active,
a:hover {
background: #FF2628;
transition: .10s;
}
main {
background-image: url("../Picture/background_page.jpg");
}
.function,
.publication {
margin: 0 20%;
}
h1 {
text-align: center;
margin: 16px;
color: #fafafa;
text-transform: uppercase;
font-family: 'Titillium Web', serif;
font-weight: bold;
font-style: italic;
}
.function p {
font-size: 1em;
text-align: center;
font-style: italic;
color: #b9aeae;
}
.function p:hover {
color: #ffffff;
}
.function {
position: relative;
top: -40px;
background-color: #701711;
padding: 20px;
box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(133, 42, 42), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}
.publication h2 {
text-align: center;
font-family: 'Beau Rivage', cursive;
font-weight: bolder;
font-style: italic;
font-size: 2.5em;
color: #7B5A39;
position: relative;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.publication h2::before {
content: "";
display: block;
width: 340px;
height: 5px;
background: #060b11;
position: absolute;
left: 0;
top: 50%;
}
.publication h2::after {
content: "";
display: block;
width: 330px;
height: 5px;
background: #060b11;
position: absolute;
right: 0;
top: 50%;
}
.actualite h2 {
text-align: center;
font-family: 'Beau Rivage', cursive;
font-weight: bolder;
font-style: italic;
font-size: 2.5rem;
color: #7B5A39;
position: relative;
margin: 1.25rem;
}
.actualite h2::before {
content: "";
display: block;
width: 680px;
height: 5px;
background: #060b11;
position: absolute;
left: 0;
top: 50%;
}
.actualite h2::after {
content: "";
display: block;
width: 680px;
height: 5px;
background: #060b11;
position: absolute;
right: 0;
top: 50%;
}
.daily_news {
display: flex;
justify-content: center;
justify-content: space-between;
}
.daily_news p {
width: 500px;
margin: 1.25rem;
text-align: justify;
font-size: 1rem;
font-style: italic;
}
.books_title {
display: flex;
justify-content: center;
justify-content: space-between;
}
.books_title img {
height: 200px;
width: 180px;
}
.main_content {
display: flex;
justify-content: center;
justify-content: space-around;
padding-bottom: 1.25rem;
padding-top: 1.25rem;
background-color: #060b11;
color: rgb(255, 255, 255);
border-top: 6px solid #8C2C23;
}
h4 {
font-size: 1rem;
padding-bottom: 20px;
text-transform: uppercase;
}
.text,
i {
padding: 5px;
}
.copyright h6 {
text-align: center;
background-color: #262626;
color: #999999;
}
.social li {
display: inline;
}
.social a,
li {
color: #ffffff;
}
/* About us page */
label {
width: 100px;
display: inline-block;
padding: 10px;
}
.form_2 label {
width: 400px;
}
.container_2 {
display: flex;
padding-top: 60px;
margin-left: 40px;
margin-right: 40px;
padding-bottom: 50px;
align-items: flex-start;
border: 1px solid rgb(173, 172, 172);
font-size: 18px;
font-weight: bold;
background-color: #BC4913;
}
textarea {
resize: horizontal;
min-width: 320px;
}
h3 {
font-size: 1.875rem;
padding-bottom: 60px;
}
.form_1 {
padding-right: 80px;
padding-left: 200px;
flex: 2;
order: 2;
}
.form_2 {
flex: 2;
order: 2;
}
.form_2 button {
background-color: rgb(8, 8, 8);
border-radius: 0;
width: 400px;
}
/* Books Summary */
.title h1 {
color: #fcf9f9;
background-color: #BC4913;
padding-bottom: 120px;
}
.Books_Sum {
display: flex;
width: 30%;
background-color: #fff;
padding: 15px;
gap: 20px;
margin-left: 210px;
}
.column {
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.30);
}
.card_image {
width: 250px;
display: block;
margin-bottom: 10px;
}
.Books_Sum p {
font-size: 1.125rem;
line-height: 1.5;
height: 90px;
overflow: hidden;
text-align: justify;
padding: 15px;
}
.Books_Sum a {
display: inline-block;
color: #fff;
background-color: #060b11;
text-decoration: none;
border-radius: 8px;
margin-top: 15px;
margin-left: 70px;
font-size: 1rem;
padding: 10px;
margin-bottom: 15px;
}
.Books_Sum a:hover {
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.Books_Sum .showContent p {
height: auto;
}
.Books_Sum .showContent a.readmore-btn {
background-color: #f7090d;
}
/*Author lists */
.List_author {
display: flex;
}
.title_authors {
background-color: #BC4913;
padding-bottom: 120px;
}
@media only screen and (max-width: 480px) {
.nav_link {
background-color: #060b11;
}
}
<!DOCTYPE html>
<html lang="en-fr">
<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">
<title>Accueil | Reflexionjuridique</title>
<link rel="stylesheet" href="../MaisonEdition/Resources/Css/styles.css">
<link rel="shortcut icon" type="image/jpg" href="../MaisonEdition/Resources/Picture/Logo.jpeg">
<link rel="stylesheet" href="../MaisonEdition/Resources/Css/fontawesome-free-5.15.4-web/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Beau+Rivage&display=swap" rel="stylesheet">
</head>
<body>
<header>
<figure class="logo">
<img src="../MaisonEdition/Resources/Picture/LogoTransparent.png" alt="logo">
</figure>
<ul class="nav_link">
<li><a class="active" href='index.html' target="_self">Accueil</a></li>
<li><a href='Catalogue.html' target="_self">Catalogue</a></li>
<li><a href='Service.html' target='_self'>Services</a></li>
<li><a href='Historique.html' target='_self'>Historique</a></li>
<li><a href='Contact.html' target='_self'>Contact</a></li>
</ul>
</header>
<main>
<section class="function">
<h1>RÉFLEXION JURIDIQUE</h1><br>
<p>La jeune maison d’édition Réflexion Juridique n’étant qu’une association d’impression et de la diffusion des livres ou d’autres documents agit comme un intermédiaire entre un auteur et ses lecteurs. Pour cela, elle supervise les productions des
ouvrages mis à sa disposition au préalable tout en s’assurant que les productions puissent répondre aux critères ci-après :Qualité de l’écriture,e l’intrigue, et Originalité. Ce mot est utilisé ici dans le sens de lutter contre une conspiration
sécrète ou déloyale visant à obtenir les avantages qui peuvent nuire à l’auteur. Cependant la sélection n’est pas la seule fonction de notre jeune maison d’édition des livres Réflexion Juridique ; après le choix ou la sélection de texte de nos
clients, elle signe un contrat d’édition avec l’auteur qui l’oblige à accompagner ce dernier tout au long du processus de la création et de la diffusion du livre et cela en tenant compte de l’article 4 de la loi n° 74-003 du 2 Janvier 1974 relative
au dépôt légal obligatoire des publications, le Décret du 2 juillet 2002 sur la nomenclature des actes générateurs des recettes sur la propriété intellectuelle et l’article 7 de l’Ordonnance n°89-010 du 18 Janvier 1989 portant la création de la
Bibliothèque Nationale du Zaïre d’une part et d’autre part les arrêtes conjoints du 29 Juin 1977 fixant les modalités d’application et l’article 2 de l’arrêté n° 033/76 du 04 Octobre 1976 relatif au dépôt légal auprès de l’ambassade la plus proche
de tous les documents ou livres que tout congolais rédige à l’étranger.
</p>
</section>
<section class="publication">
<h2>nos dernière publication</h2>
<div class="books_title">
<img src="../MaisonEdition/Resources/Picture/droit_image.jpg" alt="Droit"></a>
<img src="../MaisonEdition/Resources/Picture/Protection_Enfant.jpg" alt="Enfant"></a>
<img src="../MaisonEdition/Resources/Picture/Contrat.jpeg" alt="Contrat"></a>
<img src="../MaisonEdition/Resources/Picture/dime.jpg" alt="Dime"></a>
<img src="../MaisonEdition/Resources/Picture/police.jpg" alt="police"></a>
</div>
</section>
<section class="actualite">
<h2>actualités quotidiennes</h2>
<div class="daily_news">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
</div>
</section>
</main>
<footer>
<div class="main_content">
<div class="Place">
<h4>Place</h4>
<i class="fas fa-map-marker-alt"></i>
<span class="text">123 Avenue Kabila, Lubumbashi</span><br>
<i class="fas fa-phone-alt"></i>
<span class="text">+243 9006146871 | + 243 892850171</span><br>
<i class="fas fa-envelope"></i>
<span class="text">reflexionjuridiquerdclushi@gmail.com</span>
</div>
<div class="social">
<h4>réseaux sociaux</h4>
<ul>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
<div class="copyright">
<h6>©2021 Ashwell publishing Ldt-Register in England No.6431579 |</h6>
<h6>Terms & Conditions | Privacy Policy | Cookies Policy</h6>
</div>
</footer>
</body>
</html>
我是一名新手前端开发人员，从事图书出版博客项目，我被困在目标网页 header 的响应部分。 我使用带有一些 CSS 规则的媒体查询来使我的 header 响应，但在移动设备上显示时它不起作用。 我希望我的菜单栏在移动设备上看起来正确。有人可以帮助我吗？
enter code here
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 20px;
}
/*Navigation bar*/
header {
background-image: url("../Picture/sutterlin-g4d210ab6b_1920.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
display: flex;
justify-content: space-around;
width: 100%;
}
.logo img {
max-width: 100px;
max-height: 100px;
margin-top: 30%;
}
.nav_link {
text-align: center;
margin-top: 5%;
margin-bottom: 5%;
}
.nav_link li, a{
display: inline-block;
padding: 7px 13px;
text-transform: uppercase;
text-decoration: none;
border-radius: 3px;
font-weight: bold;
color: #ffffff;
}
.active,a:hover {
background: #FF2628;
transition: .10s;
}
main {
background-image: url("../Picture/background_page.jpg");
}
.function,
.publication {
margin: 0 20%;
}
h1 {
text-align: center;
margin: 16px;
color: #fafafa;
text-transform: uppercase;
font-family: 'Titillium Web', serif;
font-weight: bold;
font-style: italic;
}
.function p {
font-size: 1em;
text-align: center;
font-style: italic;
color: #b9aeae;
}
.function p:hover {
color: #ffffff;
}
.function {
position: relative;
top: -40px;
background-color: #701711;
padding: 20px;
box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(133, 42, 42),
0.3em 0.3em 1em rgba(0,0,0,0.3);
}
.publication h2 {
text-align: center;
font-family: 'Beau Rivage', cursive;
font-weight: bolder;
font-style: italic;
font-size: 2.5em;
color: #7B5A39;
position: relative;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.publication h2::before {
content: "";
display: block;
width: 340px;
height: 5px;
background: #060b11;
position: absolute;
left: 0;
top: 50%;
}
.publication h2::after {
content: "";
display: block;
width: 330px;
height: 5px;
background: #060b11;
position: absolute;
right: 0;
top: 50%;
}
.actualite h2 {
text-align: center;
font-family: 'Beau Rivage', cursive;
font-weight: bolder;
font-style: italic;
font-size: 2.5rem;
color: #7B5A39;
position: relative;
margin: 1.25rem;
}
.actualite h2::before {
content: "";
display: block;
width: 680px;
height: 5px;
background: #060b11;
position: absolute;
left: 0;
top: 50%;
}
.actualite h2::after {
content: "";
display: block;
width: 680px;
height: 5px;
background: #060b11;
position: absolute;
right: 0;
top: 50%;
}
.daily_news {
display: flex;
justify-content: center;
justify-content: space-between;
}
.daily_news p {
width: 500px;
margin: 1.25rem;
text-align: justify;
font-size: 1rem;
font-style: italic;
}
.books_title {
display: flex;
justify-content: center;
justify-content: space-between;
}
.books_title img {
height: 200px;
width: 180px;
.main_content {
display: flex;
justify-content: center;
justify-content: space-around;
padding-bottom: 1.25rem;
padding-top: 1.25rem;
background-color: #060b11;
color: rgb(255, 255, 255);
border-top: 6px solid #8C2C23;
}
h4 {
font-size: 1rem;
padding-bottom: 20px;
text-transform: uppercase;
}
.text , i{
padding: 5px;
}
.copyright h6{
text-align: center;
background-color:#262626;
color: #999999;
}
.social li {
display: inline;
}
.social a ,li {
color: #ffffff;
}
/* About us page */
label {
width: 100px;
display: inline-block;
padding: 10px;
}
.form_2 label {
width: 400px;
}
.container_2 {
display: flex;
padding-top: 60px;
margin-left: 40px;
margin-right: 40px;
padding-bottom: 50px;
align-items: flex-start;
border: 1px solid rgb(173, 172, 172);
font-size: 18px;
font-weight: bold;
background-color: #BC4913;
}
textarea {
resize: horizontal;
min-width: 320px;
}
h3 {
font-size: 1.875rem;
padding-bottom: 60px;
}
.form_1 {
padding-right: 80px;
padding-left: 200px;
flex: 2;
order: 2;
}
.form_2 {
flex: 2;
order: 2;
}
.form_2 button {
background-color: rgb(8, 8, 8);
border-radius: 0;
width: 400px;
}
/* Books Summary */
.title h1{
color: #fcf9f9;
background-color: #BC4913;
padding-bottom: 120px;
}
.Books_Sum {
display: flex;
width: 30%;
background-color: #fff;
padding: 15px;
gap: 20px;
margin-left: 210px;
}
.column {
box-shadow: 0 5px 5px rgba(0,0,0,0.30);
}
.card_image {
width: 250px;
display: block;
margin-bottom: 10px;
}
.Books_Sum p {
font-size: 1.125rem;
line-height: 1.5;
height: 90px;
overflow: hidden;
text-align: justify;
padding: 15px;
}
.Books_Sum a{
display: inline-block;
color: #fff;
background-color: #060b11;
text-decoration: none;
border-radius: 8px;
margin-top: 15px;
margin-left: 70px;
font-size: 1rem;
padding: 10px;
margin-bottom: 15px;
}
.Books_Sum a:hover {
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
.Books_Sum .showContent p{
height: auto;
}
.Books_Sum .showContent a.readmore-btn{
background-color: #f7090d;
}
/*Author lists */
.List_author {
display: flex;
}
.title_authors {
background-color: #BC4913;
padding-bottom: 120px;
}
@media only screen and(max-width: 480px){
.nav_link {
background-color: #060b11;
}
}
<!DOCTYPE html>
<html lang="en-fr">
<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">
<title>Accueil | Reflexionjuridique</title>
<link rel="stylesheet" href="../MaisonEdition/Resources/Css/styles.css">
<link rel="shortcut icon" type="image/jpg" href="../MaisonEdition/Resources/Picture/Logo.jpeg">
<link rel="stylesheet" href="../MaisonEdition/Resources/Css/fontawesome-free-5.15.4-web/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Beau+Rivage&display=swap" rel="stylesheet">
</head>
<body>
<header>
<figure class="logo">
<img src="../MaisonEdition/Resources/Picture/LogoTransparent.png" alt="logo">
</figure>
<ul class="nav_link">
<li><a class="active" href='index.html' target="_self">Accueil</a></li>
<li><a href='Catalogue.html' target="_self">Catalogue</a></li>
<li><a href='Service.html' target='_self'>Services</a></li>
<li><a href='Historique.html' target='_self'>Historique</a></li>
<li><a href='Contact.html' target='_self'>Contact</a></li>
</ul>
</header>
<main>
<section class="function">
<h1>RÉFLEXION JURIDIQUE</h1><br>
<p>La jeune maison d’édition Réflexion Juridique n’étant qu’une association d’impression et de la diffusion des livres ou d’autres documents agit comme un intermédiaire entre un auteur et ses lecteurs. Pour cela, elle supervise les productions des ouvrages mis à sa disposition au préalable tout en s’assurant que les productions puissent répondre aux critères ci-après :Qualité de l’écriture,e l’intrigue, et Originalité.
Ce mot est utilisé ici dans le sens de lutter contre une conspiration sécrète ou déloyale visant à obtenir les avantages qui peuvent nuire à l’auteur.
Cependant la sélection n’est pas la seule fonction de notre jeune maison d’édition des livres Réflexion Juridique ; après le choix ou la sélection de texte de nos clients, elle signe un contrat d’édition avec l’auteur qui l’oblige à accompagner ce dernier tout au long du processus de la création et de la diffusion du livre et cela en tenant compte de l’article 4 de la loi n° 74-003 du 2 Janvier 1974 relative au dépôt légal obligatoire des publications, le Décret du 2 juillet 2002 sur la nomenclature des actes générateurs des recettes sur la propriété intellectuelle et l’article 7 de l’Ordonnance n°89-010 du 18 Janvier 1989 portant la création de la Bibliothèque Nationale du Zaïre d’une part et d’autre part les arrêtes conjoints du 29 Juin 1977 fixant les modalités d’application et l’article 2 de l’arrêté n° 033/76 du 04 Octobre 1976 relatif au dépôt légal auprès de l’ambassade la plus proche de tous les documents ou livres que tout congolais rédige à l’étranger.
</p>
</section>
<section class="publication">
<h2>nos dernière publication</h2>
<div class="books_title">
<img src="../MaisonEdition/Resources/Picture/droit_image.jpg" alt="Droit"></a>
<img src="../MaisonEdition/Resources/Picture/Protection_Enfant.jpg" alt="Enfant"></a>
<img src="../MaisonEdition/Resources/Picture/Contrat.jpeg" alt="Contrat"></a>
<img src="../MaisonEdition/Resources/Picture/dime.jpg" alt="Dime"></a>
<img src="../MaisonEdition/Resources/Picture/police.jpg" alt="police"></a>
</div>
</section>
<section class="actualite">
<h2>actualités quotidiennes</h2>
<div class="daily_news">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
</div>
</section>
</main>
<footer>
<div class="main_content">
<div class="Place">
<h4>Place</h4>
<i class="fas fa-map-marker-alt"></i>
<span class="text">123 Avenue Kabila, Lubumbashi</span><br>
<i class="fas fa-phone-alt"></i>
<span class="text">+243 9006146871 | + 243 892850171</span><br>
<i class="fas fa-envelope"></i>
<span class="text">reflexionjuridiquerdclushi@gmail.com</span>
</div>
<div class="social">
<h4>réseaux sociaux</h4>
<ul>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
<div class="copyright">
<h6>©2021 Ashwell publishing Ldt-Register in England No.6431579 |</h6>
<h6>Terms & Conditions | Privacy Policy | Cookies Policy</h6>
</div>
</footer>
</body>
</html>
你只需要在and之后添加一个space:
@media only screen and (max-width: 480px){
.nav_link {
background-color: #060b11;
}
}
您还需要关闭 .books_title img
.books_title img {
height: 200px;
width: 180px;
}
您的图片后还有 </a> 个标签。如果你试图以某种方式格式化它们，你需要在 <a> 标签，因为目前，它们除了制造错误之外什么都不做。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 20px;
}
/*Navigation bar*/
header {
background-image: url("../Picture/sutterlin-g4d210ab6b_1920.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
display: flex;
justify-content: space-around;
width: 100%;
}
.logo img {
max-width: 100px;
max-height: 100px;
margin-top: 30%;
}
.nav_link {
text-align: center;
margin-top: 5%;
margin-bottom: 5%;
}
.nav_link li,
a {
display: inline-block;
padding: 7px 13px;
text-transform: uppercase;
text-decoration: none;
border-radius: 3px;
font-weight: bold;
color: #ffffff;
}
.active,
a:hover {
background: #FF2628;
transition: .10s;
}
main {
background-image: url("../Picture/background_page.jpg");
}
.function,
.publication {
margin: 0 20%;
}
h1 {
text-align: center;
margin: 16px;
color: #fafafa;
text-transform: uppercase;
font-family: 'Titillium Web', serif;
font-weight: bold;
font-style: italic;
}
.function p {
font-size: 1em;
text-align: center;
font-style: italic;
color: #b9aeae;
}
.function p:hover {
color: #ffffff;
}
.function {
position: relative;
top: -40px;
background-color: #701711;
padding: 20px;
box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(133, 42, 42), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}
.publication h2 {
text-align: center;
font-family: 'Beau Rivage', cursive;
font-weight: bolder;
font-style: italic;
font-size: 2.5em;
color: #7B5A39;
position: relative;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.publication h2::before {
content: "";
display: block;
width: 340px;
height: 5px;
background: #060b11;
position: absolute;
left: 0;
top: 50%;
}
.publication h2::after {
content: "";
display: block;
width: 330px;
height: 5px;
background: #060b11;
position: absolute;
right: 0;
top: 50%;
}
.actualite h2 {
text-align: center;
font-family: 'Beau Rivage', cursive;
font-weight: bolder;
font-style: italic;
font-size: 2.5rem;
color: #7B5A39;
position: relative;
margin: 1.25rem;
}
.actualite h2::before {
content: "";
display: block;
width: 680px;
height: 5px;
background: #060b11;
position: absolute;
left: 0;
top: 50%;
}
.actualite h2::after {
content: "";
display: block;
width: 680px;
height: 5px;
background: #060b11;
position: absolute;
right: 0;
top: 50%;
}
.daily_news {
display: flex;
justify-content: center;
justify-content: space-between;
}
.daily_news p {
width: 500px;
margin: 1.25rem;
text-align: justify;
font-size: 1rem;
font-style: italic;
}
.books_title {
display: flex;
justify-content: center;
justify-content: space-between;
}
.books_title img {
height: 200px;
width: 180px;
}
.main_content {
display: flex;
justify-content: center;
justify-content: space-around;
padding-bottom: 1.25rem;
padding-top: 1.25rem;
background-color: #060b11;
color: rgb(255, 255, 255);
border-top: 6px solid #8C2C23;
}
h4 {
font-size: 1rem;
padding-bottom: 20px;
text-transform: uppercase;
}
.text,
i {
padding: 5px;
}
.copyright h6 {
text-align: center;
background-color: #262626;
color: #999999;
}
.social li {
display: inline;
}
.social a,
li {
color: #ffffff;
}
/* About us page */
label {
width: 100px;
display: inline-block;
padding: 10px;
}
.form_2 label {
width: 400px;
}
.container_2 {
display: flex;
padding-top: 60px;
margin-left: 40px;
margin-right: 40px;
padding-bottom: 50px;
align-items: flex-start;
border: 1px solid rgb(173, 172, 172);
font-size: 18px;
font-weight: bold;
background-color: #BC4913;
}
textarea {
resize: horizontal;
min-width: 320px;
}
h3 {
font-size: 1.875rem;
padding-bottom: 60px;
}
.form_1 {
padding-right: 80px;
padding-left: 200px;
flex: 2;
order: 2;
}
.form_2 {
flex: 2;
order: 2;
}
.form_2 button {
background-color: rgb(8, 8, 8);
border-radius: 0;
width: 400px;
}
/* Books Summary */
.title h1 {
color: #fcf9f9;
background-color: #BC4913;
padding-bottom: 120px;
}
.Books_Sum {
display: flex;
width: 30%;
background-color: #fff;
padding: 15px;
gap: 20px;
margin-left: 210px;
}
.column {
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.30);
}
.card_image {
width: 250px;
display: block;
margin-bottom: 10px;
}
.Books_Sum p {
font-size: 1.125rem;
line-height: 1.5;
height: 90px;
overflow: hidden;
text-align: justify;
padding: 15px;
}
.Books_Sum a {
display: inline-block;
color: #fff;
background-color: #060b11;
text-decoration: none;
border-radius: 8px;
margin-top: 15px;
margin-left: 70px;
font-size: 1rem;
padding: 10px;
margin-bottom: 15px;
}
.Books_Sum a:hover {
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.Books_Sum .showContent p {
height: auto;
}
.Books_Sum .showContent a.readmore-btn {
background-color: #f7090d;
}
/*Author lists */
.List_author {
display: flex;
}
.title_authors {
background-color: #BC4913;
padding-bottom: 120px;
}
@media only screen and (max-width: 480px) {
.nav_link {
background-color: #060b11;
}
}
<!DOCTYPE html>
<html lang="en-fr">
<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">
<title>Accueil | Reflexionjuridique</title>
<link rel="stylesheet" href="../MaisonEdition/Resources/Css/styles.css">
<link rel="shortcut icon" type="image/jpg" href="../MaisonEdition/Resources/Picture/Logo.jpeg">
<link rel="stylesheet" href="../MaisonEdition/Resources/Css/fontawesome-free-5.15.4-web/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Beau+Rivage&display=swap" rel="stylesheet">
</head>
<body>
<header>
<figure class="logo">
<img src="../MaisonEdition/Resources/Picture/LogoTransparent.png" alt="logo">
</figure>
<ul class="nav_link">
<li><a class="active" href='index.html' target="_self">Accueil</a></li>
<li><a href='Catalogue.html' target="_self">Catalogue</a></li>
<li><a href='Service.html' target='_self'>Services</a></li>
<li><a href='Historique.html' target='_self'>Historique</a></li>
<li><a href='Contact.html' target='_self'>Contact</a></li>
</ul>
</header>
<main>
<section class="function">
<h1>RÉFLEXION JURIDIQUE</h1><br>
<p>La jeune maison d’édition Réflexion Juridique n’étant qu’une association d’impression et de la diffusion des livres ou d’autres documents agit comme un intermédiaire entre un auteur et ses lecteurs. Pour cela, elle supervise les productions des
ouvrages mis à sa disposition au préalable tout en s’assurant que les productions puissent répondre aux critères ci-après :Qualité de l’écriture,e l’intrigue, et Originalité. Ce mot est utilisé ici dans le sens de lutter contre une conspiration
sécrète ou déloyale visant à obtenir les avantages qui peuvent nuire à l’auteur. Cependant la sélection n’est pas la seule fonction de notre jeune maison d’édition des livres Réflexion Juridique ; après le choix ou la sélection de texte de nos
clients, elle signe un contrat d’édition avec l’auteur qui l’oblige à accompagner ce dernier tout au long du processus de la création et de la diffusion du livre et cela en tenant compte de l’article 4 de la loi n° 74-003 du 2 Janvier 1974 relative
au dépôt légal obligatoire des publications, le Décret du 2 juillet 2002 sur la nomenclature des actes générateurs des recettes sur la propriété intellectuelle et l’article 7 de l’Ordonnance n°89-010 du 18 Janvier 1989 portant la création de la
Bibliothèque Nationale du Zaïre d’une part et d’autre part les arrêtes conjoints du 29 Juin 1977 fixant les modalités d’application et l’article 2 de l’arrêté n° 033/76 du 04 Octobre 1976 relatif au dépôt légal auprès de l’ambassade la plus proche
de tous les documents ou livres que tout congolais rédige à l’étranger.
</p>
</section>
<section class="publication">
<h2>nos dernière publication</h2>
<div class="books_title">
<img src="../MaisonEdition/Resources/Picture/droit_image.jpg" alt="Droit"></a>
<img src="../MaisonEdition/Resources/Picture/Protection_Enfant.jpg" alt="Enfant"></a>
<img src="../MaisonEdition/Resources/Picture/Contrat.jpeg" alt="Contrat"></a>
<img src="../MaisonEdition/Resources/Picture/dime.jpg" alt="Dime"></a>
<img src="../MaisonEdition/Resources/Picture/police.jpg" alt="police"></a>
</div>
</section>
<section class="actualite">
<h2>actualités quotidiennes</h2>
<div class="daily_news">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
</div>
</section>
</main>
<footer>
<div class="main_content">
<div class="Place">
<h4>Place</h4>
<i class="fas fa-map-marker-alt"></i>
<span class="text">123 Avenue Kabila, Lubumbashi</span><br>
<i class="fas fa-phone-alt"></i>
<span class="text">+243 9006146871 | + 243 892850171</span><br>
<i class="fas fa-envelope"></i>
<span class="text">reflexionjuridiquerdclushi@gmail.com</span>
</div>
<div class="social">
<h4>réseaux sociaux</h4>
<ul>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
<div class="copyright">
<h6>©2021 Ashwell publishing Ldt-Register in England No.6431579 |</h6>
<h6>Terms & Conditions | Privacy Policy | Cookies Policy</h6>
</div>
</footer>
</body>
</html>