2. 程式人生 > >運用HTML與CSS -------模仿QQ音樂介面

運用HTML與CSS -------模仿QQ音樂介面

阿新 • • 發佈：2018-11-27

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ音樂</title>
    <style>
    body{
        background: url("背景.png");
    }
      #content_pic{
          width: 1410px;
          height: 90px;
          background-image
 
: url("導航欄.png");
      }
    #d1{
        float: left;
    }
    #d2,#d3,#d4,#d5{
            float: right;
        }
        #img{
            padding-left: 250px; width: 1000px;
            margin: 60px;
        }
        #img1,#img2,#img3,#img4,#img5,#img6,#img7,#img8{
            margin: 8px;
        }
 

    </style>
</head>

<body>
<div id="content_pic">
    <img src="QQ音樂圖示.png" width="200"height="90"id="d1">
    <img src="MV.png"width="116"height="90"id="d5">
    <img src="電臺.png" width="116"height="90"id="d4">
    <img src="歌單.png" width="116"height="90"id="d3"
 
>
    <img src="排行.png" width="116" height="90"id="d2">
</div>

<div id="img">
<a href="9.10.03.html">
    <img src="1.png" height="200"width="200"id="img1">
    <img src="2.png"height="200" width="200"id="img2">
    <img src="3.png"height="200" width="200"id="img3">
    <img src="4.png"height="200" width="200"id="img4"><br>
    <img src="5.png"height="200" width="200"id="img5">
    <img src="6.png"height="200" width="200"id="img6">
    <img src="7.png"height="200" width="200"id="img7">
    <img src="8.png"height="200" width="200"id="img8">
</a>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video src=" 2.mp4" controls autoplay ></video>
</body>
</html>

執行結果：
這裡寫圖片描述

相關推薦

運用HTML與CSS -------模仿QQ音樂介面

程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QQ音樂</title> <st

【幹貨】Html與CSS入門學習筆記12-14【完】

進度條 tom step char number 視頻容器 復選框 其中 私有 十二、HTML5標記 現代HTML html5新增的元素：header nav footer aside section article time 這些新增元素使頁面結構更清晰，取代<di

HTML與CSS

表現 構建 alt 寫代碼 是我 艱辛 代碼 log 效果 　　Html是用來做框架結構的，css用來排版的。 　　html就好比是一棟房子的主體框架，而css就是室內的墻壁門框窗戶這些。只有主體框架了才能在這基礎上去發揮css的功用。 　　要想做好一個好的網頁，結構一定要

Web前端開發精品課HTML與CSS基礎教程 (莫振傑著) 完整pdf掃描版

OS 選擇器 鏈接樣式 大量 整理 培養 分享圖片 mage 入門 Web前端開發精品課：HTML與CSS基礎教程結合大量開發實戰經驗，將前端開發知識系統化整理，濃縮精華，用通俗易懂的語言直指初學者的痛點。 全書分為兩部分：首部分是HTML基礎知識，幫助讀者認識和理解網

你不懂得HTML與CSS的戀情發展史

html css h5 css3 javascript HTML與CSS 樣式表的歷史科普 自從1990年代初HTML被發明，作為HTML代碼輔助的樣式表，就以各種形式出現； 最初，不同的瀏覽器結合了它們各自的樣式語言，讀者可以使用這些樣式語言來調節網頁的顯示方式；一開始樣式表是給讀者用的

html與CSS補充內容

rap 後臺管理 補充 pos osi col oot ;內 trap 1、基本的架子 float clear：both margin padding 如果需要指定一個東西在特定的位置就需要用到 position： left： 如果不好

前端HTML 與css 整理（未完）

簽名 跳轉 doc emp 分類 for ... 小寫 tar HTML 中的標簽存放於文本文件中 需要按照以下固定的文檔結構組織：<!DOCTYPE HTML><html> <head>頭部相關信息 </head>

HTML與CSS布局技巧總結

overflow 絕對定位 back hidden port 子元素 屏幕 hex key 很多人對CSS的布局有困惑，實際的應用場景中由於布局種類多難以選擇。今天我花些時間總結下自己對CSS布局的理解，分析下了解各種布局的優劣，同時希望能分享給初入前端的朋友

html與css學習1

劃分 代碼 之路 裏的 而是 小時 框架 F12 描述 html是接觸很久了，或許很多人覺得這個東西很簡單，是的，他其實就是一些再簡單不過的標簽組成，所有標簽的意思在w3school裏面1小時就能看完（記不記住關系不大，看久了自然記住了），這個文章當然不是生搬如何使用標簽的

Html與Css關聯到一起

文件 頁面 開始 a標簽 屬性 relation charset 通知 需要 在HTML文件中使用Link標簽連接獨立的Css文件 　　將Link標簽放在head標簽中 　　like標簽是空標簽，只寫開始標簽，不寫結束標簽 我們需要為like標簽設置一些屬性 　　typ

HTML與CSS基礎知識

行編輯 區別 問題 margin div external 兩個 .... 特殊 HTML 1.文本標簽 - 水平分隔符標簽: <hr> - 預格式化文本標簽(保留文本的原有格式): <pre>文字</pre> - 將文字設置為上標或下標

Html與CSS學習記錄四

HTML5新標籤和特性     *header：定義文件的頁首 頭部     *aside：定義其所處內容之外的內容 側邊     *article：定義文章。 <!DOCTYPE htm

Html與CSS學習記錄三

元素的顯示與隱藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <

html與css學習2

我胡漢三又回來糾結這兩個玩意了。這兩個東西真是越看越有東西,而且真的是,做專案時才知道自己小瞧他們了。 前端：結構（html）+表現（css）+行為(js) 好的程式碼：各自負責各自的，儘量寫規範，別雜糅在一起。 1.html標籤更多關注的是語義，至於樣式css都可以去改 2.元素分

《HTML與CSS知識》系列分享專欄

收藏HTML和CSS方面的技術文章，作為一個WEB開發者，必須要知道HTML和CSS方面的知識，即使作為後臺開發者也應該知道一些常用的HTML和CSS知識，甚至架構師也要了解，這樣才會開發出實用的網站來 《HTML與CSS知識》已整理成PDF文件，點選可直接下載至本地查閱https://www.

HTML與css入門總結

HTML：超文字標記語言，超文字指的是超連結，標記指的是標籤，這是一種由一個個標籤組成的製作網頁的語言。 HTML基本結構： <!DOCTYPE html><html>    <head>   &nb

html與css的網頁佈局

網頁佈局分為四類 1.一列布局   2.二列布局    3.三列布局   4.混合佈局 1.一列布局 <!DOCTYPE html> <html> <head> <title><

HTML與CSS的一些知識（一）

　　一般寫程式碼的時候，總會有些小錯誤。為了便於修改以及查詢，所以程式碼格式要寫規範，而且一定一定要寫註釋。因為有時候程式碼寫得多了，真的連自己都找不到自己要找的東西在哪裡。還有命名也要見名知意。 　　再說一些HTML相關： 　　1、標籤分類：　 　　　　　　a、塊級標籤：<div><

HTML與CSS的一些知識（二）

　　續； 　　5、表單標籤<form></form> 　　　　用於收集使用者資訊，統一提交到伺服器 　　　　一般用input標籤收集，再用提交按鈕提交；input標籤根據type屬性值不同有不同的型別；而且表單裡面要把name屬性寫上，因為提交都要有； 　　　　選項的單選和多選

python筆記-HTML與CSS

文字標籤 h1-h6:標題 p:文欄位落標籤 b/strong:加粗 u:下劃線 s:劃去線 換行標籤: br-----(第一個沒有成對出現的標籤) 水平分隔符標籤: hr-----(第一個沒有成對出現的標籤) 預格式化文字標籤(保留文字的原有格式): pre標