HTML連載86-添加視頻、伸縮佈局

来源:https://www.cnblogs.com/ruigege0000/archive/2020/05/06/12833917.html
-Advertisement-
Play Games

一、複習了伸縮佈局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/base.css"> <link rel="s ...


一、複習了伸縮佈局

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="CSS/base.css">

    <link rel="stylesheet" href="CSS/index.css">

</head>

<body>

<!--頂部區域-->

<div class="top">

    <div class="top_in">

        <div class="top_left">

            <h1><a href="#" title="努比亞"></a></h1><!--a標簽裡面的title屬性，就是用於當滑鼠放到a標簽上面的時候會顯示的文字-->

        </div>

        <div class="top_right">

            <ul class="top_nav">

                <li><a href="#">首頁</a></li>

                <li><a href="#">商城</a></li>

                <li><a href="#">產品</a></li>

                <li><a href="#">應用</a></li>

                <li><a href="#">服務</a></li>

                <li><a href="#">體驗店</a></li>

                <li><a href="#">社區</a></li>

​

            </ul>

            <ul class="top_login">

                <!--這裡有一個註意點，我們想要使用的右浮動，所以三個li標簽應該倒敘寫，因為先寫的先浮動哦-->

                <li><a href="#">註冊</a></li>

                <li><a href="#">登錄</a></li>

                <li><a href="#"></a></li>

            </ul>

        </div>

    </div>

</div>

<!--廣告區域-->

<div class="banner">

    <div class="nav_out">

        <div class="nav">

            <ul>

                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>

                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>

                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>

                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>

                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>

                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>

                <li><a href="#"><img src="image/nav-phone1.png" alt=""></a></li>

            </ul>

        </div>

    </div>

    <div class="figure">

        <img src="image/banner.png" alt="">

        <ol>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ol>

    </div>

    <div class="video">

        <ul>

            <li>

                <img src="image/video1.png" alt="">

                <div class="video_info">

                    <img src="" alt="">

                    <h3>Z11黑金版本</h3>

                    <p>產品視頻</p>

                </div>

            </li>

            <li><img src="image/video2.png" alt=""></li>

            <li><img src="image/video3.png" alt=""></li>

        </ul>

    </div>

</div>

<!--內容區域-->

<div class="content"></div>

<!--底部區域-->

<div class="footer"></div>

</body>

</html>

 

/*頂部區域*/

.top{

    height:60px;

    width:100%;/*也就是和父元素一樣寬，這裡使用百分比的形式，使得網頁擴大減小都不會變形*/

    background-color: black;

​

}

.top .top_in{

    width: 1200px;

    margin:0 auto;

    height:100%;

    /*background-color: yellow;*/

}

.top  .top_left{

    float:left;

    height:100%;

    width:190px;

    /*background-color: pink;*/

}

.top .top_left>h1{

    width: 100%;

    height: 100%;

​

}

.top .top_left>h1>a{

    display: inline-block;

    width: 100%;

    height: 100%;

    background:url("../image/nubia_logo.png");

    background-size: 190px 60px;/*設置圖片大小正好適配div塊的大小*/

}

.top .top_right{

    float:right;

    height: 100%;

    width: 800px;

    /*background-color: pink;*/

}

.top .top_nav{

    float:left;

    width:550px;

    height: 100%;

    /*background-color: skyblue;*/

​

​

}

.top .top_nav>li{

    float:left;

    list-style: none;

}

.top .top_nav>li>a{

    font-size:25px;

    font-weight: bold;/*給文字加粗*/

    line-height:60px;

    color:white;/*文字的顏色，直接是color*/

    margin-left:20px;/*這是給文字添加空隙*/

    text-decoration:none;/*去掉文字的下劃線*/

}

/*.top .top_nav>li>a:hover{!*移動滑鼠上去變化顏色*!*/

    /*color:#e82c07;*/

/*}*/

.top .top_login{

    float:right;

    width: 150px;

    height: 100%;

    /*background-color: skyblue;*/

}

.top .top_login>li{

    list-style: none;

    float:right;

    margin-right:10px;

}

.top .top_login>li>a{

    font-size:20px;

    font-weight:bold;

    line-height:60px;

    color:white;

​

    text-decoration:none;

}

.top ul>li>a:hover{/*移動滑鼠上去變化顏色*/

    color:#e82c07;

    /*這裡我們使用.top ,top_login>li>a:hover而使用了ul來替代top_login這個可以說是代碼的重構，我們希望

    li標簽里的文字滑鼠懸浮都變色，這樣我們把父層級一改，可以省略代碼，在後續編程中這些都是隱形的小技巧

     */

}

.top .top_login>li:nth-child(3){

    width: 30px;

    height: 37px;

    background:url("../image/nubia_person.png");

    margin-top:10px;

}

​

/*廣告區域*/

.banner{

    height: 800px;

    width: 100%;

    /*background-color: green;*/

}

/*內容區域*/

.content{

    height: 1883px;

    width: 100%;

    /*background-color: blue;*/

}

.banner .nav_out{

    background-color: white;

    height: 157px;

    width: 100%;

}

​

.banner .nav{

    width: 1200px;

    height: 157px;

    /*margin:0 auto;*//*這裡我們想要居中這個模塊，但是我們把定位流變成了絕對定位,所以就不管用了*/

    /*background:pink;*/

    position:absolute;/*只所所以改成絕對定位流，就是想要讓這個盒子脫標，這樣就可以讓nav這個盒子懸浮在下個盒子上面*/

    left:50%;/*通過這種方式來進行居中盒子，靠左邊的一邊，然後利用一半的寬度-600px進行回退*/

    margin-left:-600px;

    background:white;

}

.banner .nav>ul{

    width:100%;

    height:100%;

    /*background:yellow;*/

    padding-left: 75px;

    padding-right:75px;

    box-sizing:border-box;/*上面使用了內邊距，這裡是為了不讓大盒子變形*/

}

.banner .nav>ul>li{

    width: 150px;

    height:100%;

    /*background:purple;*/

    float:left;/*之所以變成浮動流，是因為li會獨占一行，這樣會占有七行，浮動流可以使它水平排版了*/

    /*border:1px solid black;*/

    box-sizing:border-box;/*為了就是不用因為邊框而使得盒子變大變小*/

    list-style: none;

}

.banner .nav>ul>li:hover{

    border-bottom:3px red solid;

    box-sizing:border-box;

}

.banner .nac>ul>li image{

    width:150px;

    height:157px;

}

.banner .figure{

    width: 100%;

    height: 600px;

    /*background:red;*/

    overflow:hidden:/*隱藏圖片的滾動條*/

    position:relative;

}

.banner .figure>img{

    /*margin:0 auto;這個語法沒有效果，對其父元素使用text-align:center；也是沒有用的，因為圖片太大了，解決方式如下：*/

    /*如果圖片的寬度大於了父元素的寬度，不可能使用margin:0 auto；或者text-align:center;來使圖片居中*/

    /*如果圖片的寬度大於父元素的寬度，可以使用定位流，來使得圖片居中,但是定位流的弊端也是比較明顯*/

    /*弊端：1.需要寫三行代碼；2.必須知道圖片的寬度；*/

    /*還有一種方法：margin:0 -100%; 註意點：父元素必須設置text-align:center;*/

    width:1200px;

    position:absolute;

    margin-left:540px;

    /*如果圖片太長而多了一個滾動條，那麼可以在父元素的CSS代碼中添加overflow屬性*/

}

.banner .figure>ol{

    width: 150px;

    height: 20px;

    /*background:red;*/

    position:absolute;/*子絕父相*/

    left:50%;

    margin-left:-75px;

    bottom:300px

}

.banner .figure>ol>li{

    float:left;

    width: 8px;

    height: 8px;

    background:red;

    margin-left:15px;

    border-radius:50%;

    border:2px solid transparent;/*transparent代表的是透明色，當然你也可以用rgba來顯示透明色*/

    transition: all 1s;

    list-style: none;

 }

.banner .figure>ol>li:hover{

    border:2px solid black;

    background: transparent;

    transform:scale(2,2);/*放大兩倍*/

}

.banner .video{

    width: 1200px;

    height: 250px;

    margin: 0 auto;

    margin-top: 10px;

    /*background:skyblue;*/

}

.banner .video>ul{

    width: 100%;

    height: 100%;

    /*background:yellow;*/

    /*display:flex;!*這是伸縮佈局*!*/

    /*justify-content: space-between;!*這個語句代表著所有的li標簽能夠水平鋪開*!*/

​

}

.banner .video>ul>li{

    width: 396px;

    height: 250px;

    /*background:deepskyblue;*/

    float:left;/*換成左漂浮，迅速就占領了黃色的全域,這是因為一個挨著一個排版了，原來是每一行進行排版*/

    list-style:none;

    margin-right:4px;/*這一行可以換成伸縮佈局來進行代替，方法如上一個標簽樣式*/

    overflow:hidden;

    position:relative;

​

}

.banner .video>ul>li>img{

    width: 396px;

    height: 250px;

}

.banner .video .video_info{

    position:absolute;

    width: 100%;

    height: 155px;

    bottom:0;

    opacity:1;/*作用：設置元素的透明度   特點：子元素也是跟著透明*/

​

​

}

.banner .video .video_info>h3{

    font-size: 16px;

    color:black;

    line-height:40px;

    text-align: center;

​

}

.banner .video .video_info>p{

    color:black;

​

}

.banner .video >ul>li:hover  .video_info{

    opacity:1;

​

}

/*底部區域*/

.footer{

​

​

​

}

二、源碼：

1.項目：Nubia

地址:

https://github.com/ruigege66/HTML_learning/tree/master/Nubia

2.CSDN：https://blog.csdn.net/weixin_44630050

3.博客園：https://www.cnblogs.com/ruigege0000/

4.歡迎關註微信公眾號：傅里葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大數據學習視頻禮包

 

 


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

-Advertisement-
Play Games
更多相關文章
  • 使用JQuery完成表格的隔行換色
    使用JQuery完成表格的隔行換色 Js相關技術 獲得所有的行 ​ table.rows[] 修改行的顏色 ​ row.bgColor ="red" ​ row.style.backgroundColor = "black" ​ row.style.background = "red" ​ "bac ...
  • 使用JQuery完成頁面定時彈出廣告
    使用JQuery完成頁面定時彈出廣告 Js相關技術 定時器: ​ setInterval & clearInterval ​ setTimeout & clearTimeout 顯示: img.style.display = "block" 隱藏: img.style.display = "none ...
  • JQuery入門+js庫文件分享
    資料 鏈接：https://pan.baidu.com/s/1aHUnfPcs1VJAas5zj5abQA 提取碼：b1hb 包括本章節需要的js庫文件，以及JQuery的api文檔 什麼JQuery jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的Ja ...
  • 使用JavaScript完成控制下拉列表左右選擇
    使用JS控制下拉列表左右選擇 需求分析 在我們的分類管理中,我們要能夠去修改我們的分類信息,當我們一點修改的時候,跳轉到一個可以編輯的頁面,這裡面能夠修改分類的名稱,分類的描述,以及分類的商品 技術分析 ondblclick="selectOne()"：雙擊事件 select標簽的屬性multipl ...
  • 使用JavaScript完成省市聯動效果
    省市聯動效果 技術分析 什麼是DOM: Document Object Model : 管理我們的文檔，增刪改查規則 【HTML中的DOM操作】 一些常用的 HTML DOM 方法： getElementById(id) 獲取帶有指定 id 的節點（元素） appendChild(node) 插入新 ...
  • 使用JavaScript完成覆選框的全選和全不選
    覆選框的全選和全不選 需求分析 ​ 商品分類界面中，當我們點擊全選框的時候，我們希望選中所有的商品，當我們取消掉的時候，我們希望不選中所有的商品 技術分析 checked="checked" 選擇覆選框 事件 : onclick點擊事件 getElementsByTagName：返回包含帶有指定標簽 ...
  • 使用JavaScript完成表格隔行換色
    表格隔行換色 需求分析 ​ 我們商品分類的信息太多，如果每一行都顯示同一個顏色的話會讓人看的眼花，為了提高用戶體驗，減少用戶看錯的情況，需要對錶格進行隔行換色 技術分析 table對象 集合 cells[]：返回包含表格中所有單元格的一個數組。 rows[]：返回包含表格中所有行的一個數組。 tBo ...
  • 使用JavaScript完成表單的校驗
    完成表單的校驗 需求分析 ​ 昨天我們做了一個簡單的表單校驗，每當用戶輸入出錯的時候，我們是彈出了一個對話框，提示用戶去修改。這樣的用戶體驗效果非常不好好。我們今天就是需要來對他進行一個修改，當用戶輸入信息有問題的時候，我們就再輸入框的後面給他一個友好提示。 技術分析 【HTML中innerHTML ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類