首頁 web前端 css教學 div css頁面佈局的五個小技巧

div css頁面佈局的五個小技巧

May 16, 2016 pm 12:06 PM
頁面佈局

本章為大家介紹div css頁面版面的五個小技巧,有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

1、表單文字輸入的移動選擇: 

在文字輸入欄中,如果加入了提示,來訪者往往要用滑鼠選取後刪除,再輸入有用的信息。其實只要加入onmouseover="this.focus()" onfocus="this.select()" 程式碼到 

<textarea name=textarea wrap=virtual rows=2 cols=22 onmouseover="this.focus()" onfocus="this.select()">
input english..</textarea>
登入後複製

類似的,可以加入程式碼到

2、表單輸入單元點選刪除: 

本列同上則作用類似,只是使用滑鼠上略有變化,需要點選而不像上則的只要滑鼠覆蓋。如:

<input type=text name="address" size=19 value="enter,e-mail..."onfocus="this.value=''">
登入後複製

點選輸入單元後,提示訊息會刪除,是不是很方便。

3、表單輸入單元的邊框設定:
更改傳統的表單單元邊框,會讓你的主頁生色不少。如: 

<input type=radio name=action value=subscribe checked style="border-bottom: dashed 1px; 
border-left: dashed 1px; border-right: dashed 1px; border-top: dashed 1px;background-color: #fef5c8">
登入後複製

其中"style=***"為左右上下和背景色設置,適用於其它單元,請讀者親自試試。

4、表單輸入單元的文字設定:
表單中單元的字體是可以修改的,如: 

<input type=text name="address" size=19 value="enter,e-mail..." 
style=font-family:"verdana";font-size:10px >
登入後複製

5.修改表單屬性為彈出視窗: 

大多數表單啟動後,會在目前頁面中打開,影響正常瀏覽。不如修改一下,如:

<form method=POST action=url target=_blank>
登入後複製

其中"target=_blank"為控制在彈出視窗開啟。 

以上就是div css頁面佈局的五個小技巧的內容,更多相關內容請關注php中文網(www.php.cn)!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在Vue專案中使用第三方UI庫進行頁面佈局 如何在Vue專案中使用第三方UI庫進行頁面佈局 Oct 08, 2023 am 08:38 AM

如何在Vue專案中使用第三方UI函式庫進行頁面佈局Vue是一種流行的JavaScript框架,被廣泛用於建立使用者介面。在Vue專案中,我們常常需要使用第三方UI函式庫來幫助我們快速佈局和美化頁面。本文將詳細介紹如何在Vue專案中使用第三方UI函式庫進行頁面佈局,並提供具體的程式碼範例。步驟1:安裝第三方UI函式庫首先,我們需要從npm安裝所需的第三方UI函式庫。在本文中,我們以E

Vue開發經驗總結:解決頁面佈局和排版問題的實踐 Vue開發經驗總結:解決頁面佈局和排版問題的實踐 Nov 22, 2023 am 10:25 AM

Vue是一種流行的JavaScript框架,被廣泛應用於前端開發。在使用Vue進行開發的過程中,我們經常會遇到一些頁面佈局和排版的問題。本文將總結一些我們在Vue開發中遇到的問題,並分享一些解決這些問題的實務經驗。一、響應式佈局在開發Web應用時,我們往往需要實作一個響應式佈局,讓頁面在不同的裝置上都能很好地顯示。 Vue提供了許多解決方案,例如Vue的回應

Vue開發經驗總結:解決頁面佈局和響應式設計的技巧 Vue開發經驗總結:解決頁面佈局和響應式設計的技巧 Nov 23, 2023 am 09:53 AM

Vue是一款流行的JavaScript框架,它為開發者提供了許多有用的工具來創建動態的單頁應用程式(SPA)。但是在開發Vue應用程式時,設計合適的頁面佈局和響應式設計是非常重要的,因為這對使用者體驗和應用程式的整體效能有著很大的影響。在本文中,我們將介紹一些解決Vue頁面佈局和響應式設計問題的技巧。使用Flexbox和CSSGrid來設計佈局Flexbox

如何設計一個具有頁面響應式佈局的網站 如何設計一個具有頁面響應式佈局的網站 Jan 27, 2024 am 08:24 AM

如何設計一個具有頁面響應式佈局的網站隨著行動裝置的普及,越來越多的人開始使用手機和平板電腦瀏覽網頁。為了提供更好的使用者體驗,設計一個具有頁面響應式佈局的網站顯得格外重要。本文將介紹如何設計一個具有頁面響應式佈局的網站,並提供一些具體的程式碼範例。使用媒體查詢媒體查詢是CSS3中的重要特性,可以根據不同的裝置(如螢幕寬度或裝置類型)來套用不同的樣式。透過使用

Discuz編輯器:多樣化的頁面佈局設計 Discuz編輯器:多樣化的頁面佈局設計 Mar 09, 2024 pm 01:03 PM

Discuz編輯器:多樣化的頁面佈局設計,需要具體程式碼範例隨著互聯網的發展和網站建設的不斷進步,頁面佈局設計成為網站開發中的重要環節之一。在Discuz論壇系統中,編輯器扮演著極其重要的角色,它不僅影響使用者體驗,更直接關係到頁面佈局的多樣化和個人化設計。本文將介紹Discuz編輯器的使用方法,並結合具體的程式碼範例,探討如何實現多樣化的頁面佈局設計。在Dis

PHP如何處理HTML範本和頁面佈局? PHP如何處理HTML範本和頁面佈局? Jul 01, 2023 am 10:46 AM

PHP作為一種流行的伺服器端腳本語言,被廣泛用於開發網頁和網站。在網頁開發中,HTML範本和頁面佈局是重要的組成部分。本文將探討PHP如何處理HTML模板和頁面佈局。首先,HTML範本是一個網頁的骨架,包含了網頁的結構、版面配置和靜態內容。在PHP中處理HTML模板有多種方法,以下介紹兩種常用的方法。第一種方法是使用PHP本身的原生語法,將HTML程式碼直接嵌入到

PHP開發中如何最佳化佈局與響應式設計 PHP開發中如何最佳化佈局與響應式設計 Jun 30, 2023 pm 03:00 PM

在當今網路高速發展的時代,網頁設計的優化已成為開發者必備的技能之一。而隨著行動裝置的普及,響應式設計也變得越來越重要。在PHP開發中,如何優化頁面佈局和響應式設計成為了開發者的焦點。首先,頁面佈局的最佳化是提高使用者體驗的重要手段。一個好的頁面佈局能夠讓使用者更方便瀏覽網頁內容,並提高使用者留存率。在PHP開發中,可以透過以下幾個方面來優化頁面佈局。首先是

分析絕對定位技術對頁面佈局的影響與特點 分析絕對定位技術對頁面佈局的影響與特點 Jan 23, 2024 am 08:47 AM

絕對定位技術對於頁面佈局的影響與特性分析引言:在網頁設計中,準確地控制元素的位置和佈局是非常重要的。 CSS提供了多種定位機制,其中之一就是絕對定位(absolutepositioning)。絕對定位可以讓我們精確地指定元素在網頁中的位置,同時它也具有一些特點和影響。一、絕對定位的特點絕對定位脫離了正常的文檔流絕對定位不會對其他元素產生佈局的影響,它會將元素

See all articles