【发布时间】：2021-02-17 01:50:39
【问题描述】：
我一直在尝试制作一个新闻网站。这只是为了练习，到目前为止，我能够为它制作一个响应式导航栏和自定义滚动条。但是，由于某种原因，在那之后我无法制作响应式新闻卡。我想在 h1 下制作响应式新闻卡片，其中包括可点击的链接照片、链接标题、小描述和指向要显示在其上的文章作者的链接。有人可以解释一下这个问题并给我一个解决方案吗？
const selectElement = (element) => document.querySelector(element);
selectElement('.mobile-menu') .addEventListener('click',() => {
selectElement('header').classList.toggle('active');
})*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
a{
text-decoration: none;
display: block;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position:fixed;
top: 0px;
z-index: 1400;
height: 5rem;
width: 100%;
background-color: rgba(0,0,0,0.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -1rem;
}
.nav-list-mobile{
display:none;
}
.nav-link{
font-size: 1.4rem;
color: #fff;
padding: 0 1rem;
transition: .3s;
}
.nav-link:hover{
color: greenyellow;
}
.nav-link-logo{
width: 1.6rem;
height: 5rem;
background: url("apple.svg") center no-repeat;
background-size: 22px;
}
.nav-link-search{
width: 1.6rem;
height: 5rem;
background: url("magnifying-glass.svg") center no-repeat;
}
.nav-link-bag{
width: 1.6rem;
height: 4.4rem;
background: url("magnifying-glass.svg") center no-repeat;
}
@media screen and (max-width: 767px){
header{
height: 4.8rem;
transition: background .36s cubic-bezier(0.32,0.08,0.24, 1),;
height: .56s cubic-bezier(0.32,0.08,0.24, 1);
}
header .container{
padding: 0;
}
.nav-list{
margin-top: 0;
}
.nav-list-mobile{
display: flex;
}
.nav-item{
width: 4.8rem;
height: 4.8rem;
display: flex;
justify-content: center;
}
.nav-item-hidden{
display: none;
}
.mobile-menu{
position: relative;
z-index: 1500;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.line{
position: absolute;
width: 1.7rem;
height: 1px;
background-color: #fff;
transition: margin-top .3192s cubic-bezier(0.04,0.04,0.12,0.96);
}
.line-top{
margin-top: -1rem;
margin-left: 10px;
}
.line-mid{
margin-top: 0rem;
margin-left: 20px;
}
.line-bottom{
margin-top: 1rem;
margin-left: 10px;
}
.active .line-top{
margin-top: 0;
transform: rotate(45deg);
transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
}
.active .line-mid{
display: none;
}
.active .line-bottom{
margin-top: 0;
transform: rotate(-45deg);
transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
}
header.active{
height: 100%;
background-color: #000;
transition: .3s;
}
.nav-link-logo{
width: 1.8rem;
height: 4.8rem;
position: relative;
z-index: 1500;
}
.nav-link-bag{
width: 100%;
height: 4.8rem;
}
.nav{
position: relative;
}
.nav-link{
font-size:1.7rem;
padding: 0;
margin: auto 0;
}
.nav-list-larger{
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
display: block;
padding: 10.5rem 5rem;
z-index: 1000;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity .3s;
}
.active .nav-list-larger{
width: 100%;
height: 100vh;
opacity: 1;
visibility: visible;
}
.active .nav-link-bag{
opacity: 0;
transition: opacity .3s;
}
.nav-list-larger .nav-item{
width: 100%;
justify-content: center;
}
.nav-list-larger .nav-item:nth-child(9){
border-bottom: none;
}
.active .nav-list-larger .nav-item{
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
}
h1{
margin-top: 5rem;
margin-left: 20px;
font-weight: bolder;
font-size: 24px;
}
::-webkit-scrollbar{
width: 17px;
}
::-webkit-scrollbar-track{
border: 7px solid rgba(0,0,0,0.8);
box-shadow: inset 0 0 2.5px 2px rgba(0,0,0,0.8);
}
::-webkit-scrollbar-thumb{
background: linear-gradient(45deg,#06dee1,greenyellow);
border-radius: 15px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>News</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-mid"></span>
<span class="line line-bottom"></span>
</div>
</li>
<li class="nav-item">
<a href="index.html" class="nav-link nav-link-logo"></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link nav-link-bag"></a>
</li>
</ul>
<!-- /.nav-list nav-list-mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
<a href="index.html" class="nav-link nav-link-logo"></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Tech</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Science</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Travel</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">How To ?</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">More</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link nav-link-search"></a>
</li>
<li class="nav-item nav-item-hidden">
<a href="#" class="nav-link nav-link-bag"></a>
</li>
</ul>
<!-- /.nav-list nav-list-larger -->
</nav>
</div>
</header>
<h1>Trending Now</h1>
<script src="main.js"></script>
</body>
</html>【问题讨论】：
标签： javascript html css web