HTML實例之搜索欄(附源碼)

来源:https://www.cnblogs.com/xsd1/archive/2019/12/02/11970561.html

1. 簡書類 實現效果 html代碼 <div class="container"> <form action="" class="parent"> <input type="text" class="search" placeholder="搜索"> <input type="button" na ...


1. 簡書類

實現效果

html代碼

<div class="container">
    <form action="" class="parent">
        <input type="text" class="search" placeholder="搜索">
        <input type="button" name="" id="" class="btn">
    </form>
</div>

css代碼

* {
    margin: 0;
    padding: 0;
}
.container {
    height: 70px;
    width: 800px;
    margin: 100px auto 0 auto;
}
.parent {
    position: relative;
}
.search {
    width: 300px;
    height: 40px;
    border-radius: 18px;
    outline: none;
    border: 1px solid #ccc;
    padding-left: 20px;
    position: absolute;
}
.btn {
    height: 35px;
    width: 35px;
    position: absolute;
    background: url("images/topbar.png") no-repeat -2px -99px;
    top: 6px;
    left: 285px;
    border: none;
    outline: none;
    cursor: pointer;
}

2. 百度類

實現效果

html代碼

<div class="container">
    <form action="" class="parent">
        <input type="text">
        <input type="button" value="百度一下">
    </form>
</div>

css代碼

重點:
1.當input框foucus時,border顏色改變,而不是保留outline
2.button按鈕預設box-sizing: border-box

.container {
                width: 500px;
                height: 50px;
                margin: 100px auto;
            }
            
            .parent {
                width: 100%;
                height: 42px;
                top: 4px;
                position: relative;
            }
            
            .parent>input:first-of-type {
                /*輸入框高度設置為40px, border占據2px,總高度為42px*/
                width: 380px;
                height: 40px; 
                border: 1px solid #ccc;
                font-size: 16px;
                outline: none;
            }
            
            .parent>input:first-of-type:focus {
                border: 1px solid #317ef3;
                padding-left: 10px;
            }
            
            .parent>input:last-of-type {
                /*button按鈕border並不占據外圍大小,設置高度42px*/
                width: 100px;
                height: 44px; 
                position: absolute;
                background: #317ef3;
                border: 1px solid #317ef3;
                color: #fff;
                font-size: 16px;
                outline: none;
            }


 

 

 


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

更多相關文章
  • 為什麼要配置babel? 因為在webpack中,預設只能處理一部分es6的語法,一些更高級的es6和es7語法webpack不能處理,這時就需要第三方的loader即babel來幫助webpack來處理這些高級的語法 配置步驟 1、先通過兩套命令來安裝loader: npm i babel-cor ...
  • 推薦查看MDN 線上的幫助文檔 實例對象: 通過構造函數創建出來,實例化的對象 靜態對象: 不需要創建,直接就是一個對象,方法(靜態方法)直接通過這個對象名字調用 實例方法必須通過實例對象調用 靜態方法必須通過大寫的對象調用 Math.PI π Math.E 常數的底數 Math.abs(值) 絕對 ...
  • js學習中三種對象: 內置對象 js系統自帶的對象 自定義對象 自己定義的構造函數創建的對象 瀏覽器對象 BOM的時候講 內置對象: Math Date String Array Object //如何驗證變數是不是對象? console.log(Array instanceof Object); ...
  • 構建表格 表格的基本元素包括:table、tr和td。table表示HTML文檔中的表格,支持border屬性,用於定義表格邊框的寬度;tr表示表格中的行;td表示表格中的單元格,包括如下屬性:1)colspan:規定單元格可橫跨的列數;2)rowspan:規定單元格可橫跨的行數; <table> ...
  • 原始數據類型: number, string, boolean, undefined, null, object 基本類型(簡單類型), 即值類型: number, string, boolean 複雜類型(引用類型): object 空類型:undefined, null 存儲空間 值類型的值在哪 ...
  • 1. 對象: 有屬性和方法,特指的某個事物 對象: 一組無序屬性的集合的鍵值對,屬性的值可以是任意的類型 2.JSON格式的數據:一般都是成對的,是鍵值對, json也是一個對象, 數據都是成對的, 一般json格式的數據無論是鍵還是值都是用雙引號括起來的 var json = { "name": ...
  • 在使用jquery-validate.js插件時可以做一些初始化配置在初始化jquery-validate.js對象的時候,將外部的一些配置和該插件內部的一些預設配置合併在一起,如果有相同的配置,前者覆蓋後者(預設)的配置 // Constructor for validator $.validat ...
  • JS是一門什麼樣的語言? 是一門解釋性的語言 是一門腳本語言 是一門弱類型語言,聲明變數都用var 是一門基於對象的語言 是一門動態類型的語言: 1. 代碼(變數)只有執行到這個位置的時候,才知道這個變數中到底存儲的是什麼,如果是對象,就有對象的屬性和方法,如果是變數就是變數的作用 2. 對象沒有什 ...
一周排行
  • 背景 習慣使用markdown的人應該都知道Typora這個神器,它非常簡潔高效。雖然博客園的線上markdown編輯器也不錯,但畢竟是網頁版,每次寫東西需要登錄系統-進後臺-找到文章-編輯-保存草稿。。。非常難受。。。 但是使用Typora來寫的話,文章圖片又是個問題,本地寫完粘貼到網站上,圖片全 ...
  • 案例:修改預設線程個數 1.NameValueCollection System.Collections.Specialized.NameValueCollection collection = new System.Collections.Specialized.NameValueCollecti ...
  • // from https://stackoverflow.com/questions/35381238/how-to-use-custom-fonts-in-emgucv string text = "塗聚文(Geovin Du)"; // 下麵定義一個矩形區域 int rectWidth = t ...
  • 場景 ASP.NET中新建Web網站並部署到IIS上(詳細圖文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107199747 前面講過將ASP.NET的項目部署到本機的IIS上。 但是如果將其部署到伺服器上Window ...
  • 在不同的區域中使用Convert.ToDouble可能會產生問題。 string str = "20.0"; double val = Convert.ToDouble(str); 比如在某些區域語言中得到的結果是200,如: Thread.CurrentThread.CurrentCulture ...
  • 1、前言 ​ 不知道你是否對.NET裡面的定時器產生過一些疑問,以下是武小棧個人的一些總結。 2、官方介紹 在.NET的框架之內定時器有四種,先看一下微軟官方對他們各自特點介紹: System.Timers.Timer,它將觸發事件,並定期在一個或多個事件接收器中執行代碼。 類旨在用作多線程環境中基 ...
  • 筆試考試系統需求分析 1. 引言 1.1編寫目的 項目需求分析目的是使用戶和軟體開發者雙方對項目開發目標有一個共同的理解,便於對軟體開發各個過程的控制與管理,通過對項目開發目標的描述,使開發人員能夠正確理解用戶需求,明確該系統應具有的功能。性能與界面要求。 需求分析作為項目開放的基礎和依據,其預期讀 ...
  • 使用Topshelf部署.net core windows服務 首先新建一個.net core的模板worker程式 過程 略 打開Program.cs namespace TopshelfDemo { public class Program { public static void Main(s ...
  • xaml裡面使用很簡單 xmlns:i="http://schemas.microsoft.com/xaml/behaviors" <i:Interaction.Behaviors> <i:MouseDragElementBehavior/> </i:Interaction.Behaviors> 後 ...
  • Application Insignhts是微軟開發的一套監控程式。他可以對線上的應用程式進行全方位的監控,比如監控每秒的請求數,失敗的請求,追蹤異常,對每個請求進行監控,從http的耗時,到SQL查詢的耗時,完完整整的被記錄下來。當對程式進行優化跟排錯時非常好使。它原來是visualstudio ...