利用CSS製做靜態網頁的注意事項

時間 2019-11-16

標籤利用 css 製做靜態網頁注意事項欄目 CSS 简体版

原文原文鏈接

利用CSS製做靜態網頁主要是在<head>裏面使用外聯CSS文件來賦予網頁樣式佈局

首先用div分區塊，瞭解網頁佈局，腦子裏面有個大概的頁面佈局

目前學習寫的幾種的網頁佈局能夠分爲如下幾種狀況：學習

1.頁面中間 centen ,兩邊留白：直接測量 centen 內容的寬度和高度，利用 maigin:auto 讓內容居中便可；字體

2.頁面頂部 head 滿頁面內容，下面centen 居中，兩邊留白：head 寬度設爲100%，中間centen 內容的寬度和高度，利用 maigin:auto 讓內容居中便可；url

3.頂部 head 和底部 footer 滿頁面，中間centen 居中，兩百留白：head 和 footer 寬度設爲100%，中間conten 內容的寬度和高度，利用 maigin:auto 讓內容居中便可spa

總結一下最近聯繫寫頁面遇到的一些問題：

1.在一個 input 文本框裏面，讓光標不頂住文本框：給input 設置一個 padding left：3px;3d

input[type="text"]{
    width: 520px;
    height: 30px;
    padding-left: 3px;    //距離頂部最左邊3個像素
    outline: none;      //去掉文本框的邊框色
}

2.製做一個可點擊的圖片（圖片替換）code

.douban ul li:{
    width: 150px;
    height: 30px;
    background: url(../D.img/lg_main_a11_1.png);
    overflow: hidden;      //超出部分隱藏
}
.douban ul li a{
    display: inline-block;     //行類元素轉換爲行類塊級
    width: 180px;    //字體的寬高大於圖片
    height: 80px;
    line-height: 100px;
    tab-index: 30px;
}

3.一個div包裹4張圖，圖片排列一排，中間有間隙，去掉間隙：font-size：0；blog

4.當鼠標移入時背景圖有動態感：先讓背景圖片居中：center圖片

.box:hover{
        bacfground-size:150%;        //總體放大
}

.box:hover{
       transfrom:scale(2);        //從中間放大，2表示放大的倍數
}

5.區分盒子模型中的 margin 和 padding文檔

margin 只要用於兩個元素之間，誰距離誰多遠

padding 主演用於父元素和子元素之間，包裹元素，撐大元素自己

若是要將標準盒模型轉換爲IE盒模型，還原元素自己，父級不佔像素：box-sizing：border-box;

6.在一個div中，讓圖片左右居中：

方法一：position:relative 絕對定位

方法二：給圖片設置一個margin：auto，左右居中

方法三：將圖片轉換爲 inline-block ，在父級設置 text-aligen：center 文本居中

7.上標文字和文檔的下基線對齊：

.將上邊字體選中，設置 line-height：距離縮小

.選中上標字體，父級設置一個 position:relative 相對定位選中的上標字體設置一個 position:absolute 絕對定位

8.製做一個三角形的圖片：

 .box{
            width:100px;
            height: 100px;
            background-color: black;
            border-top: 20px solid red;
            border-right:20px solid blue;
            border-left: 20px solid yellow;
            border-bottom: 20px solid green;
        }

轉變之後的代碼：

 .box{
            width: 0px;
            height: 0px;
            background-color: transparent;     //透明色
            border-top: 20px solid red;
            border-right:20px solid transparent;
            border-left: 20px solid transparent;
            border-bottom: 20px solid transparent;
        }

改變之後：