HTML連載88-今天把努比亞界面模擬寫完了（完結連載）

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

一、完結HTML連載，手寫努比亞首頁界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/base.css"> < ...


一、完結HTML連載，手寫努比亞首頁界面

 

 

<!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">

    <dl>

        <dt>

            <h3>最新產品</h3>

            <p>查看全部 &gt;</p>

        </dt>

        <dd>

            <ul class="content_phone">

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

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

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

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

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

            </ul>

        </dd>

    </dl>

</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:black;

    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:0.5;

}

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

    opacity:0.5;/*這個就是添加蒙版*/

}

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

    animation: sport 2s .5s ease-in-out infinite;

}

@keyframes sport {

    20% {

        transform:scale(0.8);

    }

    40% {

        transform:scale(1.2);

    }

    60% {

        transform:scale(0.9);

    }

    80% {

        transform:scale(1);

    }

    100% {

        transform:scale(1);

    }

}

.content>dl{

    width: 1200px;

    height: 100%;

    /*background:green;*/

    margin:0 auto;

}

.content>dl>dt{

    text-align: center;

    margin-top:40px;

    margin-bottom:30px;

​

}

.content>dl>dt>h3{

    font-size:35px;

    color:black;

}

.content>dl>dt>p{

    color:#e8340e;

}

.content .content_phone{

    width: 1200px;

    height: 1200px;

    /*background:yellow;*/

}

/*.content .content_accessories{*/

    /*width: 1200px;*/

    /*height: 1200px;*/

    /*background:skyblue;*/

    /*display:flex;*/

    /*justify-content: space-between;!*這個屬性就是自適應盒子*!*/

/*}*/

.content .content_phone>li{

    float:left;

}

.content .content_phone>li:nth-child(1){

    width: 1200px;

    height: 395px;

    /*background:pink;*/

    margin-bottom:10px;

}

.content .content_phone>li:nth-child(2){

    width: 395px;

    height: 795px;

    /*background:purple;*/

    margin-right:10px;

}

.content .content_phone>li:nth-child(3){

    width: 795px;

    height: 390px;

    /*background:palegreen;*/

    margin-bottom:10px;

}

.content .content_phone>li:nth-child(4){

    width: 390px;

    height: 395px;

    /*background:gold;*/

    margin-right:10px;

}

.content .content_phone>li:nth-child(5){

    width: 395px;

    height: 395px;

    /*background:tomato;*/

}

.content .content_accessories>li{

    float:left;

    width: 295px;

    height: 300px;

    /*background: saddlebrown ;*/

    margin-right: 5px;

}

​

.content .content_phone>li>img{

    height:100%;/*這個是讓圖片能夠自適應我們的盒子*/

    transform:all 1s;

}

.content .content_phone>li:nth-child(1)>img{

    margin-left: 30%;

}

.content .content_phone>li:nth-child(1)>img:hover{

    margin-left: 50%;

}

/*底部區域*/

.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
更多相關文章
  • Glide異常：Failed to find GeneratedAppGlideModule 解決實踐
    情況 App採用Glide做載入網路圖片功能。穩定版本的App，突然有很多圖片無法載入出來，經排查，除了Glide框架已經緩存過的圖片其他圖片都觸發了Glide.onError 異常為 大意是系統無法生成GlideModule。 我的編譯環境： 第一個解決方案： 無效 第二個解決方案 用 Java ...
  • 深入探索 iOS 啟動速度優化
    介紹 App 的啟動時間是體現其性能優劣的一個重要指標，啟動時間越快用戶的等待時間就越短，提升用戶體驗感，大廠應用甚至會做到“ 毫秒必究 ”。 我們將 App 啟動方式分為： 名稱說明 冷啟動 App 啟動時，應用進程不在系統中（初次打開或程式被殺死），需要系統分配新的進程來啟動應用。 熱啟動 Ap ...
  • 第一行Kotlin系列（三）Intent 向上一頁返回數據onActivityResult的使用
    1.MainActivity.kt跳轉處理 聲明全局的按鈕對象 private lateinit var button8: Button 實例化按鈕對象 button8 = findViewById(R.id.mButton8) button8.setOnClickListener(this) 添加 ...
  • Flutter Weekly Issue 55
    新聞 1. "Flutter 1.17 | 2020 首個穩定版發佈！" 1. "Dart 2.8 發佈了" 1. "Flutter web 最新進展: 發掘更多可能！" 教程 1. "Flutter線上代碼覆蓋率解決方案——FlutterCodeX" 插件 1. "flutter h5pay" A ...
  • 第一行Kotlin系列（二）Intent隱式顯式跳轉及向下傳值
    1.Intent顯式跳轉頁面 val button5 = findViewById<Button>(R.id.mButton5) button5.setOnClickListener { val intent = Intent() intent.setClass(this, ThirdActivit ...
  • 第一行Kotlin系列（一）kotlin按鈕點擊事件
    按鈕findViewBuId <Button android:id="@+id/mButton4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="跳轉" app:layou ...
  • Android佈局的一些屬性和開關、創建log圖片
    文本的一些屬性 android:id="@+id/editText" 給文本的id重命名 android:layout_width="wrap_content" 必要的長寬 android:layout_height="wrap_content" android:ems="10" 本文本框一行的最大 ...
  • 6.jQuery動畫和隊列，簡單的queue()入隊和dequeue()出隊實現
    # jQuery動畫 - 1.hide() 隱藏 - 2.show() 展示 ```js $('.demo').show(3000, 'swing');//width height opacity padding 對這些參數同時進行操作 ``` - 3.toggle() 隱藏，展示操作 - 4.fa ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類