HTML連載84-添加中部的圖片

来源:https://www.cnblogs.com/ruigege0000/archive/2020/04/21/12741709.html
-Advertisement-
Play Games

一、設置圖片居中margin:0 auto;這個語法沒有效果，對其父元素使用text-align:center；也是沒有用的，因為圖片太大了，解決方式如下： 如果圖片的寬度大於了父元素的寬度，不可能使用margin:0 auto；或者text-align:center;來使圖片居中 如果圖片的寬度大 ...


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

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

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

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

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

 

 

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

    </div>

    <div class="video"></div>

</div>

<!--內容區域-->

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

<!--底部區域-->

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

</body>

</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="">

    </div>

    <div class="video"></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:/*隱藏圖片的滾動條*/

}

.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:570px;

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

}

​

.banner .video{

    width: 1200px;

    height: 250px;

    margin: 0 auto;

    margin-top: 10px;

    /*background:skyblue;*/

}

​

/*底部區域*/

.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
更多相關文章
  • PostgreSQL密碼安全策略
    引用地址：https://blog.csdn.net/weixin_34143774/article/details/89561946 請以原文為主，引用註明出處。問題：今天公司進行軟體測評，在測評期間，測評人員問起PostgreSQL登錄失敗導致用戶鎖定的次數，密碼輸錯幾次賬戶會被鎖定？網上查了一... ...
  • 天天在用Redis，持久化方案你又知道哪些？
    前言 文章首發於微信公眾號【碼猿技術專欄】：天天用Redis，持久化方案有哪些你知道嗎？ Redis目前已經成為主流的記憶體資料庫了，但是大部分人僅僅是停留在會用的階段，你真的瞭解Redis內部的工作原理嗎？ 今天這篇文章將為大家介紹Redis持久化的兩種方案，文章將會從以下五個方面介紹： 什麼是RD ...
  • Kafka 2.5.0發佈——棄用對Scala2.11的支持
    近日Kafka發佈了最新版本 2.5.0，增加了很多新功能： 下載地址：https://kafka.apache.org/downloads 2.5.0 對TLS 1.3的支持（預設為1.2） 引入用於 Kafka Streams 的 Co groups 用於 Kafka Consumer 的增量 ...
  • 【趙強老師】利用資料庫觸發實現複雜的安全性檢查
    一、什麼是觸發器 資料庫觸發器是一個與表相關聯的，存儲的PL/SQL 語句。每當一個特定的數據操作語句（insert update delete）在指定的表上發出時，Oracle自動執行觸發器中定義的語句序列。 觸發器的應用場景如下： 複雜的安全性檢查 數據的確認 資料庫審計 數據的備份和審計 二、 ...
  • MySQL 配置統計數據
    什麼是統計數據統計數據怎麼存儲兩種存儲方式：存儲形式：存儲的信息如何更新統計數據NULL 值如何統計參考文檔什麼是統計數據MySQL 為了制定執行計劃收集表的相關信息，如索引行數，索引基數（不同值的數量），占用頁面數等等。這些信息被稱為統計數據。同一條 sql 語句，在不同的數據量級下，不同的索引結... ...
  • RxHttp ，比Retrofit 更優雅的協程體驗
    1、前言 Hello，各位小伙伴，又見面了，迴首過去， "RxHttp" 就要迎來一周年生日了(19年4月推出)，這一年，走過來真心....真心不容易，代碼維護、寫文章、寫文檔等等，經常都是乾到零點之後，也是我首次花費大部分業餘時間來維護一個開源項目，全程一個人維護，要知道，網路請求庫不同於其它開源 ...
  • Android開發之Spinner
    今天課上學習了Spinner,做了一個很簡單的程式，現將代碼和截圖放在這裡供大家參考。 activity_spinner.xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schema ...
  • 用Taro做個微信小程式Todo, 小白工作記錄
    本篇本著學習的目的, 用Taro做一個簡單的微信小程式. 代碼在這裡: https://github.com/mengdd/mini-program-todo ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類