iT邦幫忙

0

CSS網站(很多)問題

  • 分享至 

  • xImage

更新:問題1、3已解決
請問各位前輩:
1.綠色的border在螢幕寬度變窄時,會超出螢幕,有什麼方法可以救嗎?
https://ithelp.ithome.com.tw/upload/images/20220512/20140542fuWreFbtRl.png
https://ithelp.ithome.com.tw/upload/images/20220512/20140542BkHvny7zQ8.png
2.螢幕寬度越窄,第二行文字和第三行文字間距會越大,該怎麼辦?
https://ithelp.ithome.com.tw/upload/images/20220512/20140542kPBm3MuPXj.pnghttps://ithelp.ithome.com.tw/upload/images/20220512/20140542WEobeuuMCI.png
3.如何讓導航欄裡的文字強制橫向排列?使文字在螢幕寬度變更時,不會自動換行
https://ithelp.ithome.com.tw/upload/images/20220512/20140542uDNlX6ZzkB.png
這裡是程式碼:
HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>Inspi.</title>
        <link rel ="icon" href="https://gcdnb.pbrd.co/images/qu6GMS2e9SYs.png?o=1"/>
        <link rel = "stylesheet" href="inspiMemories.css">
        <script src = "inspiMemories.js"></script>
        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    </head>
    <body>
        <nav class="nav"> 
            <a class="bar_a" id="bar_a1" aria-current="page" target='_self' href="inspi.html">部落格</a>
            <a class="bar_a" id="bar_a2" aria-current="page" target='_self' href="inspiTeach.html">教學區</a>
            <a class="bar_a" id="bar_a3" aria-current="page" target='_self' href="inspiService.html">服務</a>
            <a class="bar_a" id="bar_a4" aria-current="page" target='_self' href="aboutInspi.html">關於Inspi.</a>
            <a class="bar_a" id="bar_a5" aria-current="page" target='_self' href="inspiMemories.html">舊文回憶錄</a>
          </div>
      </nav>
      


      <div><a href="https://www.facebook.com/Inspiler/posts/147175587596715" class="tellLink" id="tell20210827">公告:即日起本網站不會再發布手機相關的資訊....     2021.08.27</a></div>
      <div><a href="https://www.facebook.com/Inspiler/posts/146462627668011" class="blogLink" id="blog20210826-1">神人成功將Linux裝在Mac系統:D     2021.08.26</a></div>
      <div><a href="https://www.facebook.com/Inspiler/posts/146365787677695" class="blogLink" id="blog20210826">舊iPhone跑太慢?將地區換到這國竟能提升效能ö     2021.08.26</a></div>
      </div>
    </body>
</html>

CSS:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}





/***WhenItLoadingh***/
.loading{
  cursor: wait;
}




/***操作區***/
img{
  user-select: none;
  -webkit-user-drag: none;
}
.nav {
  background: rgb(120, 155, 103);
  display: flex;
  align-items: center;
  user-select: none;
  -webkit-user-drag: none;
  height: 16vh;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
.bar_a {
  color: #fff;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 19px;
  margin: 0 24px;
  font-size: 33px;
  padding: 9px 24px;
  border: 8px solid transparent;
  border-radius: 32px;
  transition: .13s;
  position: relative;
  left: 5%;
  user-select: none;
  -webkit-user-drag: none;
}
.bar_a#bar_a5 {
  border: 8px solid rgb(156, 197, 138);
  
}
.bar_a:hover {
  border-color: rgb(133, 172, 117);
}
.blogLink{
    text-decoration: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 28px;
    color: #75819e;
  }
  .blogLink:hover{
    color: #617ece;
    transform: 0.4s;
  }
  #blog20210826{
    position: relative;
    left: 80px;
    top: 28vh;
  }
  #blog20210826-1{
    position: relative;
    left: 80px;
    top: 43vh;
  }
  
  
  
  .tellLink{
    text-decoration: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 28px;
    color: #ff0000;
  }
  .tellLink:hover{
    color: #ff2424;
    transform: 0.4s;
  }
  #tell20210827{
    position: relative;
    left: 80px;
    top: 24vh;
  }

抱歉,問題蠻多的~~

ccutmis iT邦高手 2 級 ‧ 2022-05-12 15:36:03 檢舉
可以google搜'css hamburger menu' 找css手刻漢堡排選單的教學,學會後就是把它加到你的網頁裡,跟原本選單放一起,漢堡選單平常是隱藏的,當畫面寬度小於xxx時則原本選單隱藏,漢堡選單顯示,諸如此類的...
另一種偷懶的方式就是直接用現成的css框架如 Bootstrap5
裡面就有現成的範例能套用了,exam:
https://getbootstrap.com/docs/5.0/components/navbar/
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
小魚
iT邦大師 1 級 ‧ 2022-05-12 11:50:40
  1. 服用 box-sizing: border-box; 寬度會自動包含border, 如果還不行應該是RWD沒寫好
  2. 文字間距應該不會變大, 要自己檢查看看寫了甚麼
  3. 嘗試用 white-space: nowrap;

前端水很深,
還是多花時間學習比較實在.

謝謝,目前已經可以把字強制橫向排列了,但右上角的字(舊文...)有一部份被吃掉了,有什麼辦法嗎?
https://ithelp.ithome.com.tw/upload/images/20220512/201405426F5EVhGbNP.png

小魚 iT邦大師 1 級 ‧ 2022-05-12 15:03:27 檢舉

應該跟寬度有關係
努力學習前端,
努力學習RWD吧.

0
Felix
iT邦研究生 2 級 ‧ 2022-05-12 11:59:53

綠色的 Border 在螢幕寬度變窄時,會超出螢幕,有什麼方法可以救嗎?

窄螢幕請考慮 RWD 設計,例如:使用窄螢幕時,選單自動轉為縱向。
當然還有很多方式,這就要考驗創意了。

螢幕寬度越窄,第二行文字和第三行文字間距會越大,該怎麼辦?

請移除下列樣式:

#blog20210826-1 {
    position: relative;
    left: 80px;
    top: 43vh;
}

如何讓導航欄裡的文字強制橫向排列?使文字在螢幕寬度變更時,不會自動換行。

同第一題的回答,窄螢幕請考慮 RWD 設計。
如果要強制不換行,請加入下方樣式:

a {
    white-space: nowrap;
}

以上。

謝謝,目前已經可以把字強制橫向排列了,但右上角的字(舊文...)有一部份被吃掉了,有什麼辦法嗎?https://ithelp.ithome.com.tw/upload/images/20220512/20140542Armd02xs6S.png

css樣式新增

*{
  box-sizing:border-box;
}

試試看結果如何
文字內有兩列的可使用

<table>
  <tr>
    <td width="60%">
    公告:即日起本網站不會再發布手機相關的資訊....
    </td>
    <td width="40%">
    2021.08.27
    </td>
  </tr>
  <tr>
    <td>
    神人成功將Linux裝在Mac系統:D
    </td>
    <td>
    2021.08.26
    </td>
  </tr>
  <tr>
    <td>
    舊iPhone跑太慢?將地區換到這國竟能提升效能ö
    </td>
    <td>
    2021.08.26
    </td>
  </tr>
</table>
6

我就不一一回覆。
因為你問的都算是基本的東西。(雖然RWD勉強還算進階)

但有幾件事還是需要給你了解。

一個10公分長的容,放進去100公分開口的像皮套。因該是很簡單的事。
但如果是4個30公分的容器要放進去。
像皮套會撐大出去吧??

那要怎麼解決呢??自已想一下。不要認為這是WEB技術所以自已不明白來略過去。
開發及設計的東西,有很多只是日常的基本常識東西而已。而不是WEB的技術。

同上2位高手們。有些已經給你解法了。
但你要了解為何要這樣解。而不是照做後。
下次再有類同的東西,又再問一次。

2
huangsb
iT邦好手 1 級 ‧ 2022-05-15 16:38:09

針對你的問題,我調整的內容可參考以下網址:

https://jsfiddle.net/hp0adyus/1/

這可能不是你最終想要的結果,只是解決你提的3個問題。你要做的是 RWD 網站,所以我加上 @media 語法,在螢幕寬度變小時,讓選單直排。

剩下的就是你自己要調整了

基本上,你提的3個問題並不是問題,問題是你若不了解 CSS,當然也就做不出你想要的,或者說是你做網站的目的。使用 CSS 屬性是大有學問,不是隨便複製/貼上就能用了,你若不懂其中的原理,調了半天,也調不出你要的樣子。

建議你可以到 w3schools css 教學 學習 css。我最近花了 1 個半月的時間看完全部的教學,css 不難,也值得花時間學習,除非你這一生永遠都用不到 css。若不會 css,遇到 100 個問題都要問人,可能還解決不了。

若要做 RWD 網站,就如同前面的人所建議,可以考慮使用現成的框架(例如: Bootstrap),可以節省你調整 css 的時間。

我要發表回答

立即登入回答