HTML和CSS我的筆記

目錄

• 定位
• 文字顯示在圖片上
• ul的li元素的小圓點換成圖片
• 關於Bootstrap的響應式
  • 不要在container以外使用row
  • 不要使用padding的時候固定高度
  • 不要使用<hr
  • p標籤不換行
• 圖片寬高超過尺寸圖片重複
• 圖片旋轉
• 接入YouTube視頻
• 圖片默認圖
• 文字太長顯示...
• 響應式中佈局儘可能不要使用margin,padding,相對定位
• 滾動條的使用與隱藏
• css控制鼠標移過元素顯示小手

我的筆記,記錄遇到的一些問題

定位

下次再使用絕對定位的時候,好比子元素要定位在父元素上,就能夠像下面同樣

父元素寫一個相對定位,能夠多加一個display:block,子元素就相對於父元素寫一個絕對定位,使用top和left,不要使用margin-left這些

z-index:2;這個是讓一個元素置頂到另一個元素的上面,數字越大越在上面

opacity:0.5;這個是圖片的透明度,1是原圖,0.5是半透明

<a href="" target="_blank" style="display:block;position:relative">
    <img src="" style="position:absolute; z-index:2;opacity:0.5;top:34%;left:40%">
</a>

文字顯示在圖片上

正確的作法應該是把圖片做爲一個背景圖,在css裏面寫,以下

.testingplan {width:1210px;height:200px;background:url(/Themes/img/test_plan.jpg)}

ul的li元素的小圓點換成圖片

依然是使用css控制li元素,寫一個圖片

.testingplan li {font-size:14px;list-style-image:url(/Themes/StyleJotrin/img/test_dot.png)}

關於Bootstrap的響應式

不要在container以外使用row

首先,我寫了一個HTML以下

<div class="content content-memory">
    <div class="banner-panel">
        <div class="row">
            <div class="col-12">
                <img src="~/images/document_banner.jpg" />
            </div>
        </div>
    </div>
</div>

由於我想讓圖片是撐滿全圖的,可是我不知道class=row還有col-12這些東西,是Bootstrap裏面纔會有的東西

必須在class=container下面纔會生效,而我沒有寫container,卻用了Bootstrap的row和col,雖然不是錯的,可是沒意義

並且個人網頁也被撐得出現了橫向的滾動條,因此正確的作法是這樣的

<div class="content content-memory">
    <div class="banner-panel">
        <img src="~/images/document_banner.jpg" />
    </div>
</div>

而後在css裏面控制圖片的width=100%便可

不要使用padding的時候固定高度

我有一個具備邊框的div,裏面有不少內容,我但願內容和邊框有一個距離,可是我把div的高度固定了.....

這樣就致使個人響應式變小的時候,內容被撐了出來,因此若是打算使用padding來搞一個內邊距,那麼不要固定高度

不要使用<hr

我看到下滑線就使用<hr,結果大佬說不要使用<hr 這個是很老很low的寫法了,要使用 border-bottom

p標籤不換行

個人div寫好了是col-8,可是我內部的p元素的文字,在屏幕變小的時候,沒有按照8這個塊來換行,加上一個css便可

<div class="col-8 document-content">
    <p>aaaaaaaaaaaaaaaa &nbsp;&nbsp;<img src="~/images/file.png" /></p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

word-wrap: break-word;

圖片寬高超過尺寸圖片重複

個人圖片大小是18*9的,加入我把寬高設置的不是18,9就會出現重疊的情況,例如

只須要你的圖片自己是多大的,你就設置多大就行了,寬18,高9

我連這個都不知道,我真的是菜雞啊,前端菜雞🐔​

圖片旋轉

直接上css

-webkit-transform: rotate(180deg);
transition: transform .5s;

接入YouTube視頻

這個能夠參考官方文檔,說的很詳細了:YouTube文檔

我簡單的介紹一下,就下面一行HTML代碼

<iframe class="videodetail" type="text/html" src="@Model.Url?rel=0" frameborder="0"></iframe>

介紹一下參數rel=0,2018年9月份以前,rel參數是YouTube視頻暫停的時候是否顯示相關視頻推薦,9月份以後YouTube官方更改了設定,rel參數就是顯示的相關視頻是不是同一頻道的,那我確定要加rel=0啊

否則我接入的視頻一暫停出現的相關推薦都是競爭對手的視頻,那我不是哭了

接入YouTube視頻使用的路徑,必須是這樣的

https://www.youtube.com/embed/ifNysFzq2dA?rel=0

其中https://www.youtube.com/embed/這玩意是固定的,你若是不這樣寫,就會報錯

就是不讓你訪問,因此,必須按照這樣的格式,後面的rel知道了是相關視頻推薦的,中間的這個是視頻的id

打開一個youtube視頻,上面v=後面的就是視頻ID

圖片默認圖

有時候圖片會不顯示,出現錯誤,這個時候就須要設置一個默認圖,這樣就算圖片發生問題了也能夠展現一個默認圖,排版也不會亂

<img src="@technology.Picture" alt="@technology.Title" onerror="this.onerror='';this.src='/Themes/img/home_news_img.png'">

文字太長顯示...

標題有時候會太多字,致使排版全亂了,因此使用css控制一下最大寬度,超過就顯示...

max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

響應式中佈局儘可能不要使用margin,padding,相對定位

我據說過不要使用margin和padding進行佈局,因此我在佈局的時候想使用相對絕對定位

/*父元素*/
position:reletive;

/*子元素*/
position:absolute;
left:20%;

可是這樣也不行,有人說不能使用定位來進行佈局,仍是要使用柵格化

只能乖乖地使用col-12進行佈局,多寫幾層就能夠

<div class="container panel">
   <div class="row">
      <div class="col-md-2 col-5 parent-category">
         <img src="main.jpg" alt="Name">
         <p>Remark</p>
      </div>
      <div class="col-md-4 col-7">
         <ul class="row">
            <li class="col-2">
               <p>Name</p>
            </li>
            <li class="col-10">
               <p>Name</p>
            </li>
         </ul>
      </div>
   </div>
</div>

滾動條的使用與隱藏

我有一個ul下的li列表,太多數據了,能夠設置一個滾動條,加一個css便可

ul
{
    height: 500px;
    overflow-y: scroll;
}

可是滾動條太寬了,能夠隱藏滾動條的那個條,再加一個css就能夠了

ul::-webkit-scrollbar {
    display: none;
}

css控制鼠標移過元素顯示小手

li:hover{
   cursor:pointer; 
}