我想做一個網站，通過這個網站，我希望它的外觀能與所有的小、大、中螢屏兼容
。我想做一個側邊欄，但是當我添加一個圖示時，它并沒有像圖片中顯示的那樣出現。
index.html:
<! DOCTYPE html>/span>
<html>
<head>
< meta name="viewport" content="with=device-width, initial-scale=1. 0">
<title>/span>
大學網站設計
</title>大學網站設計
<link rel="styleheet" href="style。 css">
<link rel="styleheet" href="https://cdn. jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">。
</head>
<body>
<section class="header">
<nav>/span>
<a href="index.html"/span>>
<img src="images/TP-Link-Logo.wine.svg"/span>>
</a>/span>
<div class="nav-links">
<i class="fafa-times"> </i>>
<ul>
<li>/span>
<a href=""/span>>
首頁
</a> 首頁
</li>/span>
<li>/span>
<a href=""/span>>
關于
</a> 關于
</li>/span>
<li>/span>
<a href=""/span>>
課程
</a>課程
</li>/span>
<li>/span>
<a href=""/span>>
BLOG
</a> BLOG
</li>/span>
<li>/span>
<a href="" >
聯系
</a>/span>
</li>/span>
</ul>/span>
</div>/span>
<i class="fa fa-bar"> </i>>
</nav>
<div class="text-box">
<h1>
世界上最大的大學
</h1> 世界最大的大學
<p>/span>
制作網站是現在世界上最簡單的事情之一。
你只需要學習HTML、CSS、<br> Javascript，你就可以了。
</p>
<a class="hero-btn">/span>
訪問我們以了解更多
</a>/span>
</div>/span>
</section>/span>
</body>
</html>
而這是我通過CSS代碼設計的帶側邊欄的界面，我希望圖示只出現在小界面中。
style.css:
*{
padding: 0;
margin: 0;
}
.header{
min-height: 100vh;
寬度：100%。
Background-image: linear-gradient(rgba(4,9,30,0.7) , rgba(4,9,30,0.7)) 。
url("images/b.png");
/*background-size: 100%; 這一行將使背景得到回應*/。
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
/*padding: 20em;*/
/*background-image: url("images/b.png");*/
/*背景重復: no-repeat;*/
/*背景尺寸: 100%;*/*背景位置: center
*/background-position: center center;*/*background-position: center center
/*background-position: 0 0;這個宣告像中心值*/*
}
nav{
display: flex;
/*padding: 1-top bottom 2-right left*/
padding: 1% 4%;
justify-content: space-between;
align-items: center;
}
nav img{
寬度: 150px;
}
.nav-links{
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
位置：相對。
padding: 8px 12px;
}
.nav-links ul li a{
文字裝飾：無。
顏色：白色。
字體大小: 0.813rem;
font-weight: 200;
}
.nav-links ul li::after{
內容。'';
寬度：0。
高度: 2px;
背景。#4accd5;
display: block;
margin: auto;
過渡。0.3s;
}
.nav-links ul li:hover::after{
寬度：100%。
}
.text-box{
color: #fff;
寬度：90%。
位置：絕對。
頂部。50%;
左邊：50%。
transform: translate(-50%, -50%);
文字對齊：居中。
}
.text-box h1{
字體大小: 3rem;
}
.text-box p{
字體大小: 1rem;
margin-top: 0.8rem;
margin-bottom: 1.8rem;
}
.hero-btn{
顯示: inline-block;
文字裝飾：無。
color: #fff;
邊界。1px solid #fff;
padding: 12px 34px;
字體大小：13px。
背景：透明。
位置：相對。
游標: 指標。
}
.hero-btn:hover{
邊界。1px solid #f44336;
背景。#f44336;
過渡。1s;
}
nav .fa{
顯示：無。
}
@media(max-width: 700px) {
.text-box h1{
字體大小: 1.8rem;
}
.nav-links ul li{
display: block;
}
.nav-links{
position: absolute;
背景。#f44336;
高度: 100vh;
寬度：200px。
top: 0;
right: 0;
text-align: left;
z-index: 2;
}
nav .fa{
display: block;
顏色：白色。
margin: 10px;
字體大小：22px。
游標：指標。
}
}
uj5u.com熱心網友回復：
你的專案中缺少Fontawesome JS檔案。在你的<head>中加入Fontawesome的all.min.js的鏈接，你的圖示就可以作業了。
你的專案中缺少FontAwesome的JavaScript檔案。在你的HTML檔案的<head>部分添加一個指向該檔案的鏈接。你的鏈接應該指向FontAwesome的all.min.js檔案。這樣做應該可以使你的圖示作業。
<head>
<script type="text/javascript" src="all. min.js"></script> <! -- 確保將`all.min.js`改為你的實際檔案位置 -->
</head>
uj5u.com熱心網友回復：
我認為這與圖片本身的鏈接有關。它是否是正確的格式/檔案夾等。也許可以嘗試復制你代碼中的鏈接，并將其應用于你的網站鏈接。
如果鏈接是正確的，影像應該通過你的瀏覽器顯示。否則就是鏈接本身的問題
如果鏈接是正確的，應該通過瀏覽器顯示出來。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/306712.html
標籤：