如何利用html寫一個簡單的搜尋頁面

利用html,您可以寫一個簡單的搜尋頁面,不過實際的搜尋頁面需要利用資料庫做支持,簡單的搜尋頁面可以先用來練習,等以後您技術學好了,就可以做真正的搜尋頁面了。

工具/原料

CSS
html

方法/步驟

首先,創建一個html文檔。

接下來,您可以在這個文檔中開始編輯。如果需要做得稍微漂亮一些,您需要使用到CSS。

CSS代碼需要在Style標籤之間寫。為了您方便您理解,我就不在寫過多的CSS代碼,我將代碼放到標籤中寫。

整體效果圖如下圖所示,您可以先看一下效果,試想一下,如果您來寫,您會怎麼寫。

在body開始添加代碼我們首先先來做下圖幾個文字的代碼

代碼如下圖所示:

接下來,我們來做搜尋框

代碼如下圖所示

接下來,我們來做搜尋框旁邊的按鈕。代碼如下:

以下是整體代碼,您可以看一些您的代碼有沒有缺什麼。添加到其中即可。

最後,希望對您有用,祝您學習順利,生活愉快!

注意事項

CSS與HTML需要分開,但是為了您方便理解,我並沒有將CSS代碼與HTML代碼分開。

相關文章

  1. 用django寫一個簡單的網頁頁面

    django的快速部署和開發web功能很強大,這裡開始一個簡單的頁面測試 工具/原料 django python 方法/步驟 一.創建django項目 先創建一個項目為testweb,創建一個應用為h ...
  2. 如何寫一個簡單的c語言程序

    我們知道,對於一個剛剛接觸到c語言的人來說,寫一個hello的程序老說,就是很難,這裡小編根據自己的學習和一個操作經驗, 寫一篇關於寫一個簡單c語言程序的介紹.對於一些後學習的人,希望有所幫助. 1: ...
  3. 如何寫一個簡單的進度條

    當我每每在後台更新網站的時候總是顯示更新的進度的進度條,當時我就特別想做一做進度條,看看是什麼原理,由於當時很忙,也沒有做.現在有時間了,今天查了查資料終於把進度條弄出來了,順便以經驗的形式寫出來了, ...
  4. 詳解用javascript寫一個簡單計算器(二)

    上一篇已經寫好計算器的界面,和最簡單的計算功能,這篇主要是繼續完善計算器的機能,增強其功能,和提高其使用的容錯率. 方法/步驟 var results=""; var calres ...
  5. 怎樣用java寫一個簡單的文件複製程序

    這裡是一個文件複製的DEMO類,基本功能已經形成,拿來給大家分享.大家可以隨便用,添加一些想要的功能也好,做進一步修改也罷.總之,教給初學者們這個DEMO還是很有幫助的. 工具/原料 一台再正常不過的 ...
  6. 易語言寫一個簡單的整蠱、愚人、惡搞的遊戲

    主要是通過不停地打開無數個網頁,來造成cpu的壓力以及影響電腦的正常操作,給朋友的一個小小的整蠱,但別太過火了哦. 代碼如下: .版本 2 .支持庫 EThread .子程序 _按鈕1_被單擊 .計次 ...
  7. 如何寫一個簡單的html

    我們平時上網時,看到很多好看好炫的網頁,他們是怎麼設計.編寫出來的呢.其實這種很炫的網站,都是從最簡單的頁面做起的.如果你以前不了解編程,那麼現在小編教你如何做一個最簡單的html 工具/原料 電腦, ...
  8. 怎樣用易語言寫一個簡單的程序?

    易語言作為一門全中文可視化的程式語言,已經受到越來越多人的重視.而它簡單的操作,也使編程變得簡單.這篇經驗將告訴你如何用易語言做你的第一個程序. 工具/原料 易語言 方法/步驟 安裝完成後,雙擊易語言 ...
  9. 詳解用javascript寫一個簡單計算器(一)

    本文將詳細講解如果用HTML,css,javascript與正則表達寫一個簡單計算器,由於篇幅較長,我們分開幾篇來講. 方法/步驟 首先我們要做好一個計算器的界面,主要用到html與css的知識,下面 ...
  10. 如何用易語言寫一個簡單的關機軟體

    每天想控制自己上網時間但是有控制不住,改怎麼辦呢?只需一句話代碼實現電腦強制快速關機,編譯後可以直接在Windows系列作業系統中運行,直接再到規定時間自動強制關閉電腦. 工具/原料 一台電腦 易語言 ...
  11. 易語言寫一個簡單的計算器

    這裡先寫一個 簡單的計算器, 方法/步驟 新建一個窗口,都是死的操作 先放一些控制項 打好相關的代碼, 如果沒有錯誤的話,就編譯成exe文件 這裡就是他運行之後的軟體了 注意事項 作者聲明:本篇經驗系本 ...
  12. 如何寫一個簡單的javascript

    如果你想做出自己喜歡的網頁,不光要學會html,js也很重要.但由於很多網友大學不是學的計算機,所以一些自己的想法被埋沒了,下面小編告訴你,其實js跟簡單,下面就跟小編來學習一個最簡單的js,學會以後 ...
  13. 如何用記事本寫一個簡單網頁

    作為一名UI,可能經常需要新建一個html格式的web文件進行些簡單的測試,可是用一些安裝好的IDE打開新建太麻煩,有沒有一種比較快速的方法可以新建一個網頁文件呢 工具/原料 記事本 方法/步驟 在電 ...
  14. 如何寫一個簡單的shell腳本

    shell類似於windows下面的bat文件,是一個用來執行一系列命令的腳本. 下面來簡答介紹下一個shell腳本所要注意的地方 工具/原料 linux電腦 方法/步驟 首先先看一個簡單的例子 #! ...
  15. 怎樣自己寫一個簡單的作業系統?

    怎樣自己寫一個簡單的作業系統? 方法/步驟 (1)首先按照要求寫一個合法的引導程序(通常用彙編,機器碼也可以 (2)然後將其通過彙編程序,如NASM彙編成二進位文件: (3)最後,將這個二進位文件寫入 ...
  16. 如何用易語言寫一個簡單的MP3播放器

    簡單教教如何用易語言寫一個MP3播放器,獻給喜愛編程的且尚未入門的新人們! 工具/原料 易語言 台式機/筆記本 方法/步驟 首先,運行易語言(筆者用的是v5.11),選擇"Windows窗口 ...
  17. 用 Sublime Text 2 寫一個簡單的網頁

    現在寫網頁的工具有好幾種,今天推薦一個 占用內存少 但是功能很強大的 Sublime Text 2. 工具/原料 電腦 Sublime Text 2 方法/步驟 將  Sublime Text 2 打 ...
  18. div css寫一個簡單導航條

    div css寫一個簡單導航條 工具/原料 dreamweaver cs6 方法/步驟 新建文件,創建導航列表 為導航設置高度和添加背景 效果如圖 為導航設置寬度,然後居中顯示 效果如圖 設置導航文字 ...
  19. 如何利用記事本製作一個簡單的網頁

    對於一些網頁設計的編程人員有一些專門的網頁開發軟體,但是對於業餘用戶並且沒有這些軟體那麼如何利用記事本製作一個網頁呢,本教程教授給大家. 工具/原料 電腦一台 方法/步驟 新建一個記事本,txt文檔, ...
  20. 如何用C++寫一個簡單的程序

    C++是C語言的繼承,它既可以進行C語言的過程化程序設計,又可以進行以抽象數據類型為特點的基於對象的程序設計,還可以進行以繼承和多態為特點的面向對象的程序設計.C++擅長面向對象程序設計的同時,還可以 ...