關於網頁導航欄製作的幾種方法與常見問題解決(新人向)

来源:http://www.cnblogs.com/chentianxingdeblog/archive/2017/07/13/7130458.html
-Advertisement-
Play Games

無序列表是html頁面排版經常用到的非常實用的標簽,但是新手在使用無序列表時,經常會在橫向排版上出現問題,筆者在這裡提供了筆者在使用無序列表製作網頁導航欄時的幾種方法與常見問題的解決問題。(以css內部樣式為例) [註:有同學之前問過我怎麼製作一張網頁,但只會html,本文用到均為css。故說明:若 ...


  無序列表是html頁面排版經常用到的非常實用的標簽,但是新手在使用無序列表時,經常會在橫向排版上出現問題,筆者在這裡提供了筆者在使用無序列表製作網頁導航欄時的幾種方法與常見問題的解決問題。(以css內部樣式為例)

[註:有同學之前問過我怎麼製作一張網頁,但只會html,本文用到均為css。故說明:若急需製作導航,無css技術基礎的,在<head>標簽中加<style rel="stylesheet" type="text/css"><style>,再將css寫入其中就行了。需要按鍵代碼,可在最後看到。]

  1.通過<li>標簽設置浮動排列。

  ①使用方法:在css樣式中加入float:left;屬性。

  ②常見問題:當網頁頁面有調整時導航同時改變,排版變混亂。

  ③解決方法:⑴在筆者接觸的網站學習中比較常見方法有對li標簽進行絕對定位,然後調節left大小。

  這種方式比較王道,利於單個修改。但是對於網頁要求低的,可能偏麻煩。

  ⑵基於自身實驗,筆者提出一個十分簡單的方法

  可以通過<div>標簽設置格式,方法十分簡單,只要把div的whith值設成等於或者大於網頁最大長度即可。

  2.第二種方法

①利用<li>標簽的display屬性的inline屬性值達到同行排列。同時可以通過對margin,padding值修改距離。

 ②問題與解決方法與第一種相同。

  3.第三種方法

①完全使用絕對定位,適用於對按鈕位置有特殊要求。(由於比較麻煩,而且一般導航都是一列,所以並不推薦,但是需要的朋友還是很好用的)

②一般不會出現排版問題

③優點:穩定,版面一般不會出問題,自由度高。缺點:不如前面的統一規整,相對麻煩,排版麻煩。

 

以上就是筆者整理出的所有內容。不能保證一定全面與精確,所以還請有更好方法的博友可以留言,有錯誤需要指出的也希望各位多多指教,本文旨在幫助和筆者一樣在學習前期遇到困難的博友。謝謝各位啦n(*≧▽≦*)n。

前面說的按鈕代碼:

a{ position: relative; overflow: hidden;
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 10px;
margin: 4px;
width: 80px;
}

 

 

 

 

  

  

   

 


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

-Advertisement-
Play Games
更多相關文章
  • 原創: "荊秀網 網頁即時推送 https://xxuyou.com" | 轉載請註明出處 鏈接: "https://blog.xxuyou.com/nodejs thinkjs study config/" 本系列教程以 ThinkJS v2.x 版本( "官網" )為例進行介紹,教程以實際操作為 ...
  • 在常見的用戶註冊頁面,需要用戶在本地選擇一張圖片作為頭像,並同時預覽。 常見的思路有兩種:一是將圖片上傳至伺服器的臨時文件夾中,並返回該圖片的url,然後渲染在html頁面;另一種思路是,直接在本地記憶體中預覽圖片,用戶確認提交後再上傳至伺服器保存。 這兩種方法各有利弊,方法一很明顯,浪費流量和伺服器 ...
  • html概念+三大元素inline,block,inline-block ...
  • 一.概述層疊樣式表;可以對HTML的元素,進行控制,使HTML的元素展現的效果和位置更好;二.基本語法css規則由兩個部分構成:選擇器和語句語句規則:1.css選擇器的名稱區分大小寫;屬性名和屬性值區分大小寫;2.每條語句的結尾都要使用;,最後一行可以省略;3.註釋格式:/**/4.css在html... ...
  • 函數的定義 1.函數的聲明 function 函數名(){ } 2.函數表達式 var aa=function(){ } 函數的調用 1.函數名() 函數分類:方式一: 有名函數 匿名函數(匿名函數無法直接調用,如果想要調用,需要使用匿名函數的自調用) ( function(){ alert(); ...
  • 首先,取值有以下兩種方式: 1:$('#com').combobox('getValue') 2:$('#com').combobox('getText) 區別就不說了。 作為選擇觸發事件,比較之後發現: onselect:事件觸發之後,獲取到的是改變之前的值 onsuncess:獲取到的是改變之後 ...
  • 緩存變數 DOM遍歷是昂貴的,所以儘量將會重用的元素緩存。 避免全局變數 jQuery與javascript一樣,一般來說,最好確保你的變數在函數作用域內。 使用匈牙利命名法 在變數前加$首碼,便於識別出jQuery對象。 使用 Var 鏈(單 Var 模式) 將多條var語句合併為一條語句,我建議 ...
  • 本文不是一篇 JavaScript 模塊化或者 RequireJS 的教程,只是從 RequireJS 的源碼來剖析了動態載入腳本和處理非同步的思想,如果你想閱讀一篇有關 RequireJS API 的文章,那麼這並不適合你,如果你對 RequireJS 載入腳本和處理回調的原理感興趣,那麼本篇文章一... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...