iT邦幫忙

0

1、更改CSS檔的字體但網頁沒有變化 (昨天嘗試了大神們提供的方法,仍有問題)

大神們好,非常感謝昨天回應我文章的大家,我昨天嘗試了大家提供的方法,仍出現問題,以下是程式碼的部分:還請各位大神救救小妹/images/emoticon/emoticon02.gif
1、更改CSS檔的字體但網頁沒有變化
我想將header跟bottom區塊的高縮小,並將其headertext及iconbar圖案字體調小
但更動css檔的headertext和iconbar沒有變化不知原因為何以及如何解決。

(1.這是網頁的部分)


 <?php
include 'connection.php';

session_start();

  if(isset($_SESSION['luseraccount']))
  {
     // $user = $_SESSION['luseraccount'];

  }else{
    header("location:new登入註冊.php");
  }
?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 <link rel="stylesheet"  href="paint.css ">
</head>
<body>
	<div id="header" style="position:absolute; top:0px; left:0px; height:50px; right:0px;overflow:hidden;background-color:#ffaaa7;">
<div class="headertext">Goodgoods好好藏</div>

		 <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="new客服頁面.html">客服中心</a>
        <a href="logout.php">登出</a>
      </div>
      <div class=absolute>
        <span style="font-size:110px;cursor:pointer;" onclick="openNav()">&#9776;</span>
      </div>
      <script>
function openNav() {
  document.getElementById("mySidenav").style.width = "200px";   /*右側導航欄*/
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>
	</div>
	 <div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; right:0px; overflow:auto;background-color:#555;">


<a href="倉庫.php">
  <div class="maim-container">
    <img src="2選1圖片/倉儲1.png" style="width: 100%;">
  </div>
</a>
<br>
<br>
<br>




<a href="https://shopee.tw/">
  <div class="container">
    <img src="2選1圖片/賣場1.jpg" style="width: 100%;">
  </div>
</a>

	</div>
    <div id="bottom" style=" position:absolute; bottom:0px; height:50px; left:0px; right:0px; overflow:hidden;background-color:#3b4465;">
    <div class="icon-bar">
      <a href="歡迎來到GoodGoods.php"><img src="導航欄圖片/goodgoods1.png" style="width:10%"></a>
      <a href="#"><img src="導航欄圖片/goodgoods2.png" style="width:10%"></a>
      <a href="朋友.php"><img src="導航欄圖片/goodgoods3.png" style="width:10%"></a>
      <a href="個人資料.php"><img src="導航欄圖片/goodgoods4.png" style="width:10%"></a>
    </div>
    </div>

</body>
</html>

2.(css檔的部分 檔名:paint.css)

/*下方導航欄*/
.icon-bar {
  width: 100%;
  background-color: #ffaaa7;  /*下方導航欄顏色*/
  overflow: auto;
  height: 200px;
}
.icon-bar a {
  float: left;
  width: 25%;
  text-align: center;
  padding: 8px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
  height: 100%;
}
.icon-bar a:hover {
  background-color: white;
}

.active {
  background-color: #04AA6D;
}
/*側邊欄*/
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 10px;
}

.sidenav a {
  padding: 6px 6px 6px 32px;
  text-decoration: none;
  font-size: 20px;  /*字體大小*/
  color: #818181;
  display: block;
  transition: 0.3s;

}

.sidenav a:hover {
  color: white;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 5px;
  margin-left: 50px;
}

div.absolute{
 position: absolute;
 top: 0px;
 right: 1%;
 line-height:100PX;  /*右側導航欄按鈕位置*/
}


@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
* {
  box-sizing: border-box;
}
#r {
  display: flex ;
  justify-content: center;
  align-items: center;
  float:left;
  width: 33%;
  padding: 20px;
  line-height: 75px;/*每列的高度*/
  margin-right: 3px

}

/* Create three equal columns that sits next to each other */
#c {
  flex: 33%;
  padding: 5px;

}

.wrapper{
  max-width: 80%;
  width: 100%;
  height: 80%;
  background:  #fff;
  margin: 20px auto;
  padding:30px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.125)
}
.wrapper .form{
  width: 100%;
}
.wrapper .form .input_field{
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.wrapper .form .input_field label{
  width: 200px;
  color: #2f3640;
  margin-right: 10px;
  font-size: 20px;
}
.wrapper .form .input_field .input{
  width: 100%;
  outline: none;
  border: 1px solid #d5dbd9;
  font-size: 20px;
  padding: 8px 10px;
  border-radius: 3px;
  transition: all 0.3s ease;
}
.wrapper .form .input_field .custom_select{
  position: relative;
  width: 100%;
  height: 37px;
}
.wrapper .form .input_field .custom_select select{
  -webkit-appearance: none;
  appearance:none;
  border: 1px solid #d5dbd9;
  width:100%;
  height: 100%;
  padding: 8px 10px;
  border-radius: 3px;
  outline: none;
  font-size: 15px;
}
.wrapper .form .input_field .custom_select:before{
  content: "";
  position: absolute;
  top:12px;
  right: 10px;
  border:8px solid;
  border-color:#d5dbd9 transparent transparent;
}
.wrapper .form .input_field .input:focus,
.wrapper .form .input_field select:focus{
  border:1px solid #273c75;
}
.wrapper .form .input_field .btn{
  width: 40%;
  padding: 8px 10px;
  font-size: 20px;
  border:0;
  background: #0097e6;
  color: #fff;
  cursor: pointer;
  border-radius: 3px;
  outline: none;

}
.wrapper .form .input_field:last-child{
  margin-bottom: 0;
}
.wrapper .form .input_field .btn:hover{
  background: #40739e;
}
@media(max-width: 420px){
  .wrapper .form .input_field{
    flex-direction: column;
    align-items: flex-start;
  }
  .wrapper .form .input_field label{
    margin-bottom: 5px;
  }
}
.headertext{
  color: black;
  width: 80%;
  font-size: 20px; /*字體大小*/
  line-height:170PX; /*字置中*/
  position: absolute;
  left: 10px;
}

以上是我的程式碼及疑問,還請各位大神指教,因是新帳號無法回覆大家,
先在這裡謝謝大神們!/images/emoticon/emoticon37.gif

<link rel="stylesheet" href="paint.css ">
最後面是不是多了個空白導至瀏覽器無法讀取?
jack8900 iT邦新手 3 級 ‧ 2021-08-05 10:08:15 檢舉
CSS可能沒有重新載入,試試看CTRL+F5
這邊有個小建議,都已經有HTML5了,網頁段落請多多使用 語意標籤
例如
<header>:網頁的標頭,通常放置網站標題。
<nav>:網頁的選單、導覽。
<main>:網頁的主要內容。
<aside>:網頁的側欄、附加內容。
<article>:一篇文章內容。
<section>:自訂的區塊,例如數篇摘要組成的空間。
<footer>:網頁的頁尾,通常放置聯絡方式、著作權宣告等等。
<mark>:強調一小塊內容。
<time>:顯示日期時間。
CSS 本身就可以拿語意標籤做選擇器
有語意標籤網頁段落也會更清楚,不要全部都用 DIV
在某些搜尋引擎的BOT也會去尋找這些標籤的內容INDEX
小小的建議
還有都有載入了 bootstrap,怎麼不用 bootstrap 的定義
反而從頭定義自己需要的,已經載入還要自訂,載入的意義在哪
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
海綿寶寶
iT邦大神 1 級 ‧ 2021-08-04 17:12:06
最佳解答

https://ithelp.ithome.com.tw/upload/images/20210804/20001787UPCqi61e8O.png

.headertext{
  color: black;
  width: 80%;
  font-size: 20px; /*字體大小*/
  line-height: 60px; /*170PX; *//*字置中*/
  position: absolute;
  left: 10px;
}

你的 icon-bar 沒有文字可改字體

<div class="icon-bar">
      <a href="歡迎來到GoodGoods.php"><img src="導航欄圖片/goodgoods1.png" style="width:10%"></a>
      <a href="#"><img src="導航欄圖片/goodgoods2.png" style="width:10%"></a>
      <a href="朋友.php"><img src="導航欄圖片/goodgoods3.png" style="width:10%"></a>
      <a href="個人資料.php"><img src="導航欄圖片/goodgoods4.png" style="width:10%"></a>
    </div>

建議你可以把 html, css 貼在 JS Fiddle
可以馬上看到修改的成果
等到都 OK 了
再加入 php 的部份

我要發表回答

立即登入回答