整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
、W3C標準
萬維網(wǎng)聯(lián)盟（外語縮寫：W3C）標準不是某一個標準，而是一系列標準的集合。網(wǎng)頁主要由三部分組成：結構（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。萬維網(wǎng)聯(lián)盟創(chuàng)建于1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。到目前為止，W3C已發(fā)布了200多項影響深遠的Web技術標準及實施指南。 http://www.w3school.com.cn/
規(guī)范是一種態(tài)度
2、頁面布局
2.1 布局元素
position定位：
們在設計網(wǎng)站的時候，有時候為了體現(xiàn)出別具一格的風格，往往會設計出一些特殊的風格。這里就舉一個比較常見的例子 —— 傾斜的背景顏色。
在CSS中，沒有某一個屬性能夠直接實現(xiàn)傾斜的背景顏色，而是需要通過一些“手段”來實現(xiàn)。最常想到的方案就是在內容的底部放置一個div，給這個div設定一個背景顏色，然后讓這個div傾斜一個角度，從而實現(xiàn)傾斜的背景顏色。比如像下圖所示的案例：
那么下面就來用一個基本的實例來解釋并實現(xiàn)傾斜背景的效果：
首先要說明一下，頁面導航條是固定在頁面頂部的，導航條不會隨著頁面的滾動而移動。這個效果的實現(xiàn)非常簡單，就是利用了 position 這個屬性的 fixed 值來實現(xiàn)的。
我下面的代碼實例中，HTML用來給頁面上添加元素，而在 CSS 部分需要精細化的設定屬性的參數(shù)值，而且需要若干個HTML標簽的CSS來配合，從而實現(xiàn)傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來描述這些屬性的效果和目的，大家在閱讀的時候可以將 CSS 結合著 HTML 一起來理解。或者可以直接拿我的這個實例作為一個模板來使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="navbar-bg">
<ul class="navbar">
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item sign">
<a href="https://www.baidu.com">Sign</a>
</li>
</ul>
</div>
<div class="box-bg">
<div class="box">
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
</div>
</div>
<div class="content">
<h1>This is content</h1>
</div>
<div class="footer">
<div class="footer-bg">
<ul class="list">
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
</ul>
</div>
</div>
</body>
</html>為了讓導航條和其他元素都能夠與頁面的兩邊留出距離，我在實際內容標簽的外圍又包裹了一層div，主要在這個包裹的div里設定左右內間距，從而實現(xiàn)兩邊留白的效果。這些外圍包裹的 div 的 class 名稱一般都會有一個后綴 "-bg"。
在實際內容的排列時，我采用了更加方便靈活的彈性布局，這樣會相對的減少HTML和CSS的代碼量。
另外，如果想要實現(xiàn)傾斜的背景顏色，那么這些帶有 bg 后綴的 div 就是需要傾斜的標簽。傾斜這些 div 其實很簡單，只需要設定一個 transform: skew(0deg, -9deg) 這樣的CSS代碼即可，但是我們可以想象一下，原本是長方形的 div 按照 Y 軸逆時針旋轉了一個弧度（-9deg）后，它會變成一個平行四邊形，這個平行四邊形是左邊低右邊高。這樣就會露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過多個 CSS 屬性的配合來遮住露出的白色的body部分。下面就來看一下這個HTML對應的 CSS 代碼部分。
在大家閱讀 CSS 的代碼之前，我給出一個原理圖來解釋一下其中的原理：
當外圍的 div 傾斜了之后，就需要把內容部分的div的上部的內間距增大，以此來遮住平行四邊形的左側露出的白色區(qū)域。這是頁面上部區(qū)域的原理。
那么頁面底部也同樣需要實現(xiàn)這樣傾斜背景顏色的設計，這樣才能將風格一致，產(chǎn)生美感。原理還是這個原理圖所示的邏輯，不同的地方在于，底部最外圍的 div 不傾斜，而是需要兩個屬性，height 和 overflow-y，并且這個 div 不能帶有背景顏色。它們的作用是當它里面的內容超出這個 div 的區(qū)域時就不顯示，這樣就會讓上圖中藍色的平行西變形的左下角區(qū)域被紅色的框線裁剪掉，從而讓這個div 乖乖的呆在頁面的底部。而這個 div 里面一層的 div 需要讓它傾斜，而且還帶有一個背景顏色。這樣組合出來的效果就是一個看似是左右兩邊是豎線，下部是橫線，只有上部是斜線的帶有背景顏色的四邊形，這個四邊形里面是實際的頁面內容。
最終的樣子在這篇 CSS 代碼的最后展示出來了。
了美化網(wǎng)站，我在網(wǎng)站上面添加了一個HTML懸浮音樂播放器，先來看看一下效果圖。
如何在自己的網(wǎng)站上添加HTML懸浮音樂播放器呢？今天和你們分享
首先申明三點：
1、本播放器實際上是調用網(wǎng)易云音樂的音樂進行播放，音樂版權歸網(wǎng)易云音樂所有，僅供個人學習研究，用于商用的后果自負！
2、本播放器的演示效果可以在我的博客首頁看到，默認支持所有Html和PHP環(huán)境的網(wǎng)站。
3、本播放器可以使用電腦、手機、IPAD等設備訪問，自適應。）
具體的操作方法：
在網(wǎng)站源文件中（如果有單獨的頁腳文件，也可以放在頁腳文件里面）添加這三行代碼：
<!--音樂播放器-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://myhkw.cn/player/js/player.js" id="myhk" key="demo" m="1"></script>
然后保存發(fā)布，在瀏覽器刷新網(wǎng)頁就看到效果了
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
