html - 为什么我的文本中没有显示 HTML 链接
问题描述
我是编程新手，我遇到了问题。我无法弄清楚为什么链接没有显示。我引用的链接称为“食品出租车”。我在上面放了一个href标签，它仍然没有链接。我试图移动一些代码，但我无法弄清楚/我不确定为什么。如果您需要更多信息，请告诉我。任何帮助都会很好。谢谢
@font-face {
font-family: 'futuralight';
src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'),
url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'tekoregular';
src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'),
url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'playfair_displayregular';
src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'),
url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'poppinsmedium';
src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'),
url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{
margin:0px;
padding:0px;
border:0px;
}
.topnav {
background-color: rgb(84,104,217);
overflow: hidden;
font-family: 'futuralight';
font-weight:900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left:2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom:6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.bigcomser{
text-align:center;
font-size: 80px;
}
.bodycs{
background-color: #EEF0FC;
height:8000px;
}
.comser{
font-family: 'tekoregular';
padding-top:42px;
font-family: 'playfair_displayregular';
font-weight:900;
}
.abtcomser{
padding-top: 48px;
padding-bottom: 28px;
font-size: 20px;
position: relative;
left:10%;
width:80%;
}
.s4s{
position: relative;
left:10%;
margin-top:60px;
height:350px;
width:80%;
background-color: white;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.s4simage{
width:38.3%;
position: absolute;
right:0%;
padding-top:10px;
padding-right:10px;
}
.s4stitle{
position: relative;
left:4%;
padding-top:30px;
color:rgb(84,104,217);
font-weight:900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
}
.s4stitle::before {
content: '';
background-color: rgb(84,104,217);
width:12px;
height: 100%;
position:absolute;
left: -4%;
top: 30px; /* = padding-top of parent */
}
.s4slink{
text-decoration:none;
color:rgb(84,104,217);
}
.titles4s{
padding-top:2px;
font-size:22px;
padding-left:4%;
font-family: 'futuralight';
font-weight:300;
}
.s4sparagraph{
width:55%;
position: relative;
left:4%;
font-size:17px;
top:60px;
font-family: 'futuralight';
}
#s4slink2{
text-decoration:none;
color:rgb(84,104,217);
position: relative;
left:4%;
top:90px;
font-family: 'futuralight';
font-size:18px;
}
.adaptennis{
position: relative;
left:10%;
margin-top:60px;
height:350px;
width:80%;
background-color: white;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.adaptenimage{
width:38.3%;
position: absolute;
left:0%;
padding-top:10px;
padding-left:10px;
}
.adapten {
position: absolute;
right: 0;
padding-top: 30px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-right: 4%;
}
.adapten::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 0;
top: 30px;
}
.titleadap{
position: absolute;
right:4%;
padding-top:71px;
font-size:22px;
padding-left:4%;
font-family: 'futuralight';
font-weight:300;
}
.adappar{
width:55%;
position: absolute;
right:4%;
font-size:17px;
padding-top:140px;
font-family: 'futuralight';
}
.bh{
position: relative;
left:10%;
margin-top:60px;
height:350px;
width:80%;
background-color: white;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.bhimg{
width:38.3%;
position: absolute;
right:0%;
padding-top:10px;
padding-right:10px;
}
.bht{
position: relative;
left:4%;
padding-top:30px;
color:rgb(84,104,217);
font-weight:900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
}
.bht::before {
content: '';
background-color: rgb(84,104,217);
width:12px;
height: 100%;
position:absolute;
left: -4%;
top: 30px; /* = padding-top of parent */
}
.bhl{
text-decoration:none;
color:rgb(84,104,217);
}
.tbh{
padding-top:2px;
font-size:22px;
padding-left:4%;
font-family: 'futuralight';
font-weight:300;
}
.bhp{
width:55%;
position: relative;
left:4%;
font-size:17px;
top:60px;
font-family: 'futuralight';
}
#bhl2{
text-decoration:none;
color:rgb(84,104,217);
position: relative;
left:4%;
top:90px;
font-family: 'futuralight';
font-size:18px;
}
.ft{
position: relative;
left:10%;
margin-top:60px;
height:350px;
width:80%;
background-color: white;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.ftimg{
width:38.3%;
position: absolute;
left:0%;
padding-top:10px;
padding-left:10px;
}
.ftas {
position: absolute;
right: 0;
padding-top: 30px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-right: 4%;
}
.ftas::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 0;
top: 30px;
}
.ftl{
text-decoration:none;
color:rgb(84,104,217);
}
.ftltitle{
position: absolute;
right:4%;
padding-top:71px;
font-size:22px;
padding-left:4%;
font-family: 'futuralight';
font-weight:300;
}
.ftp{
width:55%;
position: absolute;
right:4%;
font-size:17px;
padding-top:140px;
font-family: 'futuralight';
}
#ftl2{
text-decoration:none;
color:rgb(84,104,217);
position: absolute;
right:4%;
top:288px;
font-family: 'futuralight';
font-size:18px;
}
@media only screen and (max-width: 830px) and (min-width: 760px) {
.topnav {
background-color: yellow;
overflow: hidden;
}
}
@media only screen and (max-width: 759px) and (min-width: 646px) {
.topnav {
background-color: red;
overflow: hidden;
}
}
@media only screen and (max-width: 645px) {
.topnav {
background-color: black;
overflow: hidden;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/stylecomser.css" />
<title>Community Service</title>
</head>
<body class='bodycs'>
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="link" href="#Projects">Projects</a>
<a class="active-menu" href="../Pages/communityservice.html">Community Service</a>
</header>
<div class='bigcomser'>
<p class='comser'>
Community Service
</p>
</div>
<div class='abtcomser'>
<p>Lorem, ipsum dolor sit amet consectetur adipisici
ng elit. Dicta, libero! Recusandae provident est quam quisquam.
Sequi itaque suscipit tempore corrupti officia maxime
nihil consequatur perspiciatis repellat placeat sed, voluptatum vitae.lor
em Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro similique, prov
ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est
distinctio commodi quod aut numquam temporibus?
</p>
</div>
<div class='s4s'>
<img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='s4stitle'>
<a class='s4slink' href="https://www.solve4success.org" target="_blank">Solve 4 Success</a>
</p>
<p class='titles4s'>
F
</p>
<p class='s4sparagraph'>
Lorem ipsum dolor sit amet consectetu
r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
itia dicta error aliquam aliquid aperiam est repellat iure vitae
bum exercitationem nihil, accusam
us libero.
</p>
<a id = 's4slink2' href="https://www.solve4success.org" target="_blank">solve4success.org</a>
</div>
<div class='adaptennis'>
<img class='adaptenimage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='adapten'>
Adaptive Tennis
</p>
<p class='titleadap'>
Engineer
</p>
<p class='adappar'>
Lorem ipsum dolor sit amet consectetu
r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
itia dicta error aliquam aliquid aperiam est repellat iure vitae
bum exercitationem nihil, accusam
us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci vitae iste, aut tenetur natu
s tempora error voluptates, beatae obcaecati ducimus commodi et a repellat sequi ullam eligendi, expedita modi? Obcaecati!
</p>
</div>
<div class='bh'>
<img class='bhimg' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='bht'>
<a class='bhl' href="https://binaryheart.org" target="_blank">Biart</a>
</p>
<p class='tbh'>
Board Member
</p>
<p class='bhp'>
Lorem ipsum dolor sit amet consectetu
r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
itia dicta error aliquam aliquid aperiam est repellat iure vitae
bum exercitationem nihil, accusam
us libero.
</p>
<a id = 'bhl2' href="https://binaryheart.org" target="_blank">binaryheart.org</a>
</div>
<div class='ft'>
<img class='ftimg' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='ftas'>
<a class='ftl' href="https://ntfoodtaxi.wordpress.com" target="_blank">Food Taxi</a>
</p>
<p class='ftltitle'>
Leading Member
</p>
<p class='ftp'>
Lorem ipsum dolor sit amet consectetu
r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
itia dicta error aliquam aliquid aperiam est repellat iure vitae
bum exercitationem nihil, accusam
us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amus commodi et
</p>
<a id='ftl2' href="https://ntfoodtaxi.wordpress.com" target="_blank">ntfoodtaxi.wordpress.com</a>
</div>
<div class='s4s'>
<img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='s4stitle'>
<a class='s4slink' href="https://binaryheart.org" target="_blank">Binary Heart</a>
</p>
<p class='titles4s'>
Greater Chicago Food Packing
</p>
<p class='s4sparagraph'>
Lorem ipsum dolor sit amet consectetu
r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
itia dicta error aliquam aliquid aperiam est repellat iure vitae
bum exercitationem nihil, accusam
us libero.
</p>
<a id = 's4slink2' href="https://binaryheart.org" target="_blank">binaryheart.org</a>
</div>
</body>
</html>解决方案
需要设置z-index: 1为.ftas
@font-face {
font-family: 'futuralight';
src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'tekoregular';
src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'playfair_displayregular';
src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'poppinsmedium';
src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.topnav {
background-color: rgb(84, 104, 217);
overflow: hidden;
font-family: 'futuralight';
font-weight: 900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left: 2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.bigcomser {
text-align: center;
font-size: 80px;
}
.bodycs {
background-color: #EEF0FC;
height: 8000px;
}
.comser {
font-family: 'tekoregular';
padding-top: 42px;
font-family: 'playfair_displayregular';
font-weight: 900;
}
.abtcomser {
padding-top: 48px;
padding-bottom: 28px;
font-size: 20px;
position: relative;
left: 10%;
width: 80%;
}
.s4s {
position: relative;
left: 10%;
margin-top: 60px;
height: 350px;
width: 80%;
background-color: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.s4simage {
width: 38.3%;
position: absolute;
right: 0%;
padding-top: 10px;
padding-right: 10px;
}
.s4stitle {
position: relative;
left: 4%;
padding-top: 30px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
}
.s4stitle::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
left: -4%;
top: 30px;
/* = padding-top of parent */
}
.s4slink {
text-decoration: none;
color: rgb(84, 104, 217);
}
.titles4s {
padding-top: 2px;
font-size: 22px;
padding-left: 4%;
font-family: 'futuralight';
font-weight: 300;
}
.s4sparagraph {
width: 55%;
position: relative;
left: 4%;
font-size: 17px;
top: 60px;
font-family: 'futuralight';
}
#s4slink2 {
text-decoration: none;
color: rgb(84, 104, 217);
position: relative;
left: 4%;
top: 90px;
font-family: 'futuralight';
font-size: 18px;
}
.adaptennis {
position: relative;
left: 10%;
margin-top: 60px;
height: 350px;
width: 80%;
background-color: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.adaptenimage {
width: 38.3%;
position: absolute;
left: 0%;
padding-top: 10px;
padding-left: 10px;
}
.adapten {
position: absolute;
right: 0;
padding-top: 30px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-right: 4%;
}
.adapten::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 0;
top: 30px;
}
.titleadap {
position: absolute;
right: 4%;
padding-top: 71px;
font-size: 22px;
padding-left: 4%;
font-family: 'futuralight';
font-weight: 300;
}
.adappar {
width: 55%;
position: absolute;
right: 4%;
font-size: 17px;
padding-top: 140px;
font-family: 'futuralight';
}
.bh {
position: relative;
left: 10%;
margin-top: 60px;
height: 350px;
width: 80%;
background-color: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.bhimg {
width: 38.3%;
position: absolute;
right: 0%;
padding-top: 10px;
padding-right: 10px;
}
.bht {
position: relative;
left: 4%;
padding-top: 30px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
}
.bht::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
left: -4%;
top: 30px;
/* = padding-top of parent */
}
.bhl {
text-decoration: none;
color: rgb(84, 104, 217);
}
.tbh {
padding-top: 2px;
font-size: 22px;
padding-left: 4%;
font-family: 'futuralight';
font-weight: 300;
}
.bhp {
width: 55%;
position: relative;
left: 4%;
font-size: 17px;
top: 60px;
font-family: 'futuralight';
}
#bhl2 {
text-decoration: none;
color: rgb(84, 104, 217);
position: relative;
left: 4%;
top: 90px;
font-family: 'futuralight';
font-size: 18px;
}
.ft {
position: relative;
left: 10%;
margin-top: 60px;
height: 350px;
width: 80%;
background-color: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.ftimg {
width: 38.3%;
position: absolute;
left: 0%;
padding-top: 10px;
padding-left: 10px;
}
.ftas {
position: absolute;
right: 0;
padding-top: 30px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-right: 4%;
z-index: 1; /* Add z-index to put the element on top of the paragraph */
}
.ftas::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 0;
top: 30px;
}
.ftl {
text-decoration: none;
color: rgb(84, 104, 217);
}
.ftltitle {
position: absolute;
right: 4%;
padding-top: 71px;
font-size: 22px;
padding-left: 4%;
font-family: 'futuralight';
font-weight: 300;
}
.ftp {
width: 55%;
position: absolute;
right: 4%;
font-size: 17px;
padding-top: 140px;
font-family: 'futuralight';
}
#ftl2 {
text-decoration: none;
color: rgb(84, 104, 217);
position: absolute;
right: 4%;
top: 288px;
font-family: 'futuralight';
font-size: 18px;
}
@media only screen and (max-width: 830px) and (min-width: 760px) {
.topnav {
background-color: yellow;
overflow: hidden;
}
}
@media only screen and (max-width: 759px) and (min-width: 646px) {
.topnav {
background-color: red;
overflow: hidden;
}
}
@media only screen and (max-width: 645px) {
.topnav {
background-color: black;
overflow: hidden;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/stylecomser.css" />
<title>Community Service</title>
</head>
<body class='bodycs'>
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="link" href="#Projects">Projects</a>
<a class="active-menu" href="../Pages/communityservice.html">Community Service</a>
</header>
<div class='bigcomser'>
<p class='comser'>
Community Service
</p>
</div>
<div class='abtcomser'>
<p>Lorem, ipsum dolor sit amet consectetur adipisici ng elit. Dicta, libero! Recusandae provident est quam quisquam. Sequi itaque suscipit tempore corrupti officia maxime nihil consequatur perspiciatis repellat placeat sed, voluptatum vitae.lor em Lorem
ipsum dolor sit amet consectetur adipisicing elit. Porro similique, prov ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est distinctio commodi quod aut numquam temporibus?
</p>
</div>
<div class='s4s'>
<img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='s4stitle'>
<a class='s4slink' href="https://www.solve4success.org" target="_blank">Solve 4 Success</a>
</p>
<p class='titles4s'>
F
</p>
<p class='s4sparagraph'>
Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero.
</p>
<a id='s4slink2' href="https://www.solve4success.org" target="_blank">solve4success.org</a>
</div>
<div class='adaptennis'>
<img class='adaptenimage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='adapten'>
Adaptive Tennis
</p>
<p class='titleadap'>
Engineer
</p>
<p class='adappar'>
Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Adipisci vitae iste, aut tenetur natu s tempora error voluptates, beatae obcaecati ducimus commodi et a repellat sequi ullam eligendi, expedita modi? Obcaecati!
</p>
</div>
<div class='bh'>
<img class='bhimg' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='bht'>
<a class='bhl' href="https://binaryheart.org" target="_blank">Biart</a>
</p>
<p class='tbh'>
Board Member
</p>
<p class='bhp'>
Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero.
</p>
<a id='bhl2' href="https://binaryheart.org" target="_blank">binaryheart.org</a>
</div>
<div class='ft'>
<img class='ftimg' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='ftas'>
<a class='ftl' href="https://ntfoodtaxi.wordpress.com" target="_blank">Food Taxi</a>
</p>
<p class='ftltitle'>
Leading Member
</p>
<p class='ftp'>
Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Amus commodi et
</p>
<a id='ftl2' href="https://ntfoodtaxi.wordpress.com" target="_blank">ntfoodtaxi.wordpress.com</a>
</div>
<div class='s4s'>
<img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='s4stitle'>
<a class='s4slink' href="https://binaryheart.org" target="_blank">Binary Heart</a>
</p>
<p class='titles4s'>
Greater Chicago Food Packing
</p>
<p class='s4sparagraph'>
Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero.
</p>
<a id='s4slink2' href="https://binaryheart.org" target="_blank">binaryheart.org</a>
</div>
</body>
</html>推荐阅读
- r - R 包“JM”：需要 TRUE/FALSE 的缺失值
- android - 想要从导航抽屉移动到另一个活动
- javascript - 如何使 XPages 应用程序布局左栏可折叠/调整大小？
- docker - 从 Eventviewer 解码 docker 错误日志
- assembly - Lodsb 汇编命令语法：GS: 是什么意思？
- python - 在Python中检索括号中的第一个单词
- c++ - 检查向量是否具有所有可能的字符组合
- node.js - Docker-compose 和 pm2 - 过滤日志消息的方法？
- laravel - 字段“”没有默认值（laravel 5.6.33）（firstOrCreate）
- plsql - PL/SQL 块的 Oracle 执行