視頻網站大雜燴--HTML+CSS練手項目1【Frameset】

-Advertisement-

【本文為原創，轉載請註明出處】技術【CSS+HTML】佈局【Frameset】步驟1 Frameset 佈局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>視頻網站大雜燴</title> <link ...

【本文為原創，轉載請註明出處】

技術【CSS+HTML】佈局【Frameset】

------------------------------------------------------------------------------------------------------------

步驟1 Frameset 佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>視頻網站大雜燴</title>
    <link rel="stylesheet" href="">
</head>
<frameset cols="200px ,*">
    <frame src="html/list.html" noresize="noresize"/>
    <frame name="video" src="html/video.html" noresize="noresize"/>
</frameset>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
    <link rel="stylesheet" href="">
</head>
<frameset rows="33.33%,33.33%,*">
    <frameset cols="33.33%,33.33%,*">
        <frame src="http://www.360kan.com/"/>
        <frame src="http://www.iqiyi.com/"/>
        <frame src="https://v.qq.com/"/>
    </frameset>
    <frameset cols="33.33%,33.33%,*">
        <frame src="https://www.mgtv.com/"/>
        <frame src="https://tv.sohu.com/"/>
        <frame src="https://www.bilibili.com/"/>
    </frameset>
    <frameset cols="33.33%,33.33%,*">
        <frame src="http://www.73mao.com/"/>
        <frame src="http://www.hanju.cc/"/>
        <frame src="https://www.dadatutu.com/"/>
    </frameset>
</frameset>
</html>

list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
</head>
<frameset rows="33.33%,33.33%,*">
    <frameset cols="33.33%,33.33%,*">
        <frame src="http://www.360kan.com/"/>
        <frame src="http://www.iqiyi.com/"/>
        <frame src="https://v.qq.com/"/>
    </frameset>
    <frameset cols="33.33%,33.33%,*">
        <frame src="https://www.mgtv.com/"/>
        <frame src="https://tv.sohu.com/"/>
        <frame src="https://www.bilibili.com/"/>
    </frameset>
    <frameset cols="33.33%,33.33%,*">
        <frame src="http://www.73mao.com/"/>
        <frame src="http://www.hanju.cc/"/>
        <frame src="https://www.dadatutu.com/"/>
    </frameset>
</frameset>
</html>

video.html

步驟2 CSS樣式【大小、位置、顏色、圖片】

css要求：左邊導航欄列表居中，顏色，字體大小

*{
    margin:0px;
    padding: 0px;
}
body{
    background-color: #f1f1f1;
}
ul{
    /* 消除有序列表的項目符號 list-style-type:none; */
    list-style-type:none;
}
li{
    width: 100%;
    height: 40px;
    line-height:40px;;
}
li a{
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 18px;
    font-family: "Book Antiqua";
    color: #000;
}
li a:hover{
    background-color: #555;
    color: #FFFFFF;
}
.list-homepage{
    background-color: #4CAF50;
    color: white;
}
/* 消除有序列表的項目符號 list-style-type:none; */
/*<li>裡面的<a>內容居中：display: block;  text-align: center;*/

list.css

步驟4 知識點整理

1.消除有序列表的項目符號 list-style-type:none;

2.<li>裡面的<a>內容居中：display: block; text-align: center;

3.垂直導航欄【未整理】

4.調用網頁適應frame大小【未整理】

------------------------------------------------------------------------------------------------------------

【完整代碼鏈接：還未上傳，可私聊我】

【不足之處望指出，一起努力學習前端】

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

對賬單月欄位按逗號分隔形成多條數據

''' SELECT a.id, substring_index(substring_index(a.bill_ids, ',', b.id), ',', 1) bill_ids, a.status, a.card_name FROM (SELECT id, bill_ids,status,card ...
漫談Redis分散式鎖實現

在Redis上，可以通過對key值的獨占來實現分散式鎖，錶面上看，Redis可以簡單快捷通過set key這一獨占的方式來實現分散式鎖，也有許多重覆性輪子，但實際情況並非如此。總得來說，Redis實現分散式鎖，如何確保鎖資源的安全&及時釋放，是Redis實現分散式鎖的最關鍵因素。如下逐層分析Redi ...
Mysql數據處理/行轉列/列轉行/分割/拼接/數據複製彙總

Mysql將欄位用逗號拼接、分割，行轉列/列轉行/兩表間複製數據/生成不同位數的隨機數 ...
QSqlDatabase

QSqlDatabase 使用靜態方法addDatabase來創建一個資料庫連接。如果你的程式中只有一個資料庫連接，可以使用如下語句創建連接 QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE"); 如果你的程式要處理多個資料庫連接，那麼就使用 ...
PostgreSQL limit

1. select * from my_table limit 10 offset 5 數據是從第0條開始的，所以這句代碼表示從第六條數據開始的10行數據。 2. select * from my_table limit 10 不帶 offset 時，表示查詢10條數據。 ...
Oracle資料庫備份---導出與導入

利用windows的cmd命令備份導出數據（也可以連接上sqlplus進行操作）--導出--將資料庫orcl完全導出 exp system/oracle@orcl file=c:\oracle_bak\orcl_bak.dmp full=y --將資料庫中scott用戶的所有對象導出 exp sco ...
HTML連載20-並集選擇器&兄弟選擇器

一、並集選擇器 1.作用：給所有的選擇器選中的標簽設置屬性。 2.格式： 3.例如： 4.註：支持多個標簽取並集，中間用逗號連接就行。上一節中交集選擇器也可以取多個交集二、兄弟選擇器 1.相鄰兄弟選擇器（1）定義：給指定選擇器後面緊跟的那個選擇器選中的標簽設置屬性。（2）格式：（3）例子： ...
簡單後臺管理系統框架--HTML練手項目2【Frameset】

【本文為原創，轉載請註明出處】技術【HTML】佈局【Frameset】無步驟 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>後臺管理系統框架</title> </head> <frameset row ...