網頁設計學習筆記(1)

来源:https://www.cnblogs.com/qzj-it/archive/2018/02/18/8453006.html
-Advertisement-
Play Games

3 添加標題圖片 首先,要加入圖標,需要.ico格式的圖片才可以。 可以在:http://www.bitbug.net/ 這裡上傳圖片,製成.ico格式的文件。 然後在html的<head>標簽中插入: <link rel="shortcut icon" href="WEB-INF/favicon. ...


3 添加標題圖片

首先,要加入圖標,需要.ico格式的圖片才可以。

可以在:http://www.bitbug.net/    這裡上傳圖片,製成.ico格式的文件。

然後在html的<head>標簽中插入:

  <link rel="shortcut icon" href="WEB-INF/favicon.ico" type="image/x-icon"/>  

若插入之後不顯示,重啟瀏覽器即可。

4 多行文本框、單覆選框和下拉框

多行文本框後面可直接加一個required表示其必須填寫,placeholder預設內容

<textarea rows="3" cols="20" placeholder="請介紹自己...">

    網站建設教程。

</textarea>

單選和覆選類似:

<label><input type="radio" name="indoor-outdoor" checked</label>

<label><input type="radio" name="indoor-outdoor"> Outdoor</label>

<label><input type="checkbox" name="personality" checked</label>

<label><input type="checkbox" name="personality"> Lazy</label>

<label><input type="checkbox" name="personality"> Energetic</label>

下拉框例子:

例如:  <select class="form-control" id="numbers">

              <option value="1">數字1</option>

              <option value="2" selected>數字2</option>

        </select>

$("#numbers option:selected").val();   獲取到下拉框被選中的optionde value值:2;

$("#numbers option:selected").text();   獲取到下拉框被選中的optionde 文本內容:數字2; 

 

可以不加label標簽,添加一個value屬性設置預設值

5 css樣式覆蓋及常識

!impotant>內聯>Id>class>鏈接

例如:color: pink !important;

不用16進位設定顏色:background-color: rgb(0, 255, 0);

如果需要設置透明度則(0-1,越小透明度越高):background-color: rgba(0, 255, 0,0.2);

設置圖片或邊框圓角度(50以上即為圓):border-radius: 50%;

6 bootstrap小技巧

自帶的class屬性img-responsive可以使太大的圖片正好適應屏幕。

其它簡單學習bootstrap方法地址:

https://www.w3cschool.cn/codecamp/list?pename=responsive_design_with_bootstrap_camp

7 單元格之間消除空隙

(1)

<style>

table{ border-collapse:collapse; }

<style>

(2)
<table border="0" cellspacing="0" cellpadding="0">
<!—cellpadding可以理解為使單元格四周變大-->

.8 圖片和文字居中

左右居中方法:

<div style="width:500px;text-align:center;">
<img src="" width="300" style="display:block;margin:0 auto;"/>sdf
</div>

上下居中方法:

可以先用行高把文字上下居中再用

vertical-align: middle;把圖片和文字垂直居中顯示

如果沒用可在後面加個!import或者在適當的位置加上display:table-cell將塊級元素轉為單元格元素


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

-Advertisement-
Play Games
更多相關文章
  • 在數據傳輸前,SSH會對需要傳輸的數據進行加密,保證會話安全與會話中傳輸數據的安全,SSH客戶端還包含一個遠程拷貝scp。 1、SSH的結構 SSH服務由服務端軟體(openssh)和客戶端(SSH、SecureCRT、Xshell)組成,SSH預設使用22埠,SSH服務端是一個守護進程,在後臺時 ...
  • RT ...
  • 這個文件描述系統中各種文件系統的信息。一般而言,應用程式僅讀取這個文件,而不對它進行寫操作。對它的維護是系統管理員的工作。 ...
  • 本節介紹: 表結構操作 創建數據表、 查看數據表和查看欄位、 修改數據表結構 刪除數據表 欄位操作 新增欄位、 修改欄位數據類型、位置或屬性、 重命名欄位 刪除欄位 首發時間:2018-02-18 21:31 表結構操作 創建數據表: 語法 : create table [if not exists... ...
  • Android安卓Die With Me不限電量破解版出爐,初二學生就能做到,你為什麼不能? ...
  • 轉載請註明來源。 加入新特性: 對話框,NumberPicker,專項訓練入口界面,新兵、文職人員專欄,自動更新。 總結問題: 1. startActivityForResult(Intent intent,int requestCode)中requestCode要是自然數,否則返回後不會調用onA ...
  • View寬高測量方法: 測量方法有三種,如下: 1)(直接在onCreate()執行) 2)2和3都是在onCreate()調用完後回調拿到組件的寬高 3) 註意:方法一比其他方法多一次onMeasure計算,方法二的回調函數會被多次調用。 轉自http://blog.csdn.net/johnny ...
  • JavaScript數組的方法不完全整理 (未完待續:JavaScript字元串的方法不完全整理2018年2月18日20:52:42) ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...