前端web搭建及常用web頁面書寫技巧-有解無憂

一：靜態頁面和動態頁面的區別
1.靜態頁面：
（1）客戶端使用瀏覽器發送請求，告訴服務器我需要訪問哪一個頁面，然后服務器根據用戶的需要從檔案中取出內容，然后回傳給客戶端
（2）無法連接資料庫，每次改變內容都要去操作檔案，
2.動態頁面
（1）還是直接請求，但是會經過web server判斷，如果是靜態資源就直接請求，如果是動態，就動態拼接，然后再回傳，
二：如何搭建靜態網站
購買服務->安裝jdk和tomcat以及配置好環境變數->把web檔案放到指定的檔案夾下即可
在這里插入圖片描述
然后直接訪問域名加上tomcat的埠號即可，
三：如何搭建動態網站
路線不一樣，方法可能也不一樣，如果是spring框架，就打包運行即可
補：技術實作
前端： html + css + js + jquery + bootstrap(圖示) + less(優化寫css) + ajax(資料互動)
后端：SpringBoot(框架) + myBatis(或者JDBC操作資料庫) + Thymeleaf模板引擎
四：前端頁面的基礎知識
（1）一個頁面的內容都不是寫死的，而是通過ajax動態請求過來的，以淘寶首頁為例，淘寶首頁的源代碼去掉只有1000多行的代碼，而淘寶頁面的資料全是動態請求得到的，這樣做在以后需要修改資料時，只需要通過管理系統去修改資料庫就行，對前端的頁面幾乎不用操作，（動態頁面）
補: 定位的相關解釋
CSS 有三種基本的定位機制：普通流、浮動和絕對定位，
除非專門指定，否則所有框都在普通流中定位，也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定，
1.CSS position 屬性
static
元素框正常生成，塊級元素生成一個矩形框，作為檔案流的一部分，行內元素則會創建一個或多個行框，置于其父元素中，
relative
元素框偏移某個距離，元素仍保持其未定位前的形狀，它原本所占的空間仍保留，（相對于上一個沒有定位的元素進行定位）
在這里插入圖片描述

absolute
元素定位后生成一個塊級框，而不論原來它在正常流中生成何種型別的框，
（脫離文本流）用如果重疊用z-index來設定z軸方向上的顯示優先級
絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊，
fixed
元素框的表現類似于將 position 設定為 absolute，不過其包含塊是視窗本身，(也是脫離文本流，但是他是對于視窗定位，就是一直固定在某個位置)

浮動
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止，

由于浮動框不在檔案的普通流中，所以檔案的普通流中的塊框表現得就像浮動框不存在一樣，
當把框 1 向右浮動時，它脫離檔案流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：
在這里插入圖片描述
當框 1 向左浮動時，它脫離檔案流并且向左移動，直到它的左邊緣碰到包含框的左邊緣，因為它不再處于檔案流中，所以它不占據空間，實際上覆寫住了框 2，使框 2 從視圖中消失，

如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框，
在這里插入圖片描述
如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間，如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：

子元素浮動，父元素清除浮動

.clearfix:after{
    content: "";
    display: block;
    clear: both;
}

（2）通過添加一個class來實作特定的效果，
在這里插入圖片描述

在這里插入圖片描述
這是淘寶的商品型別選著實作，就是通過點擊事件，給點擊的當前這個節點添加一個tb-selected類實作的，

在比如淘寶的商品詳情模塊
在這里插入圖片描述
上面是通過添加selected類實作，下面是通過display:none實作，

五：權值問題
（1）demo演示
（2）權值表

!important > 行間樣式 > id > class | 屬性 > 標簽選擇器 > 通配符
	
權重
!important        正無窮
行間樣式            1000
id                  100
calss | 屬性 | 偽類   10
標簽|偽元素            1
通配符                 0
255進制

六：簡單輪播圖實作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>輪播圖</title>
    <style>
        .box{
            width: 600px;
            height: 400px;
            margin-top: 300px;
            margin-left: 500px;
            position: relative;
        }
        .box img{
            width: 600px;
            height: 400px;
         
         
        }
        ul li{   
            transition: 2s;
            position: absolute;
            opacity: 0;
        }
        .box ul{   
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/5.jpg" alt=""></li>
        </ul>
    </div>
    <script src="./jquery-3.5.1.js"></script>
    <script>
        $(function(){
            var cnt = 0;
            var timer = setInterval(function(){
                $("ul li").css("opacity", 0);
                $("ul li").eq(cnt).css("opacity", 1);
                cnt = (cnt + 1) % 5;
            }, 2000);
        });
    </script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/226882.html

標籤：其他

上一篇：Markdown教程

下一篇：移動端布局