搜尋

首頁  >  文章  >  web前端  >  CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）

CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）

易达
易达原創
2020-06-04 10:35:314344瀏覽

本文目標：

1、掌握CSS3中border-radius的用法

#問題：

實現以下介面效果，（不要求實現搜尋功能），要求不使用任何框架，純div css3，同時必須使用border-radius知識點

CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）

#其他說明：

1、整個寬度是800x,要求居中顯示

2、logo圖片以寬300px,居中顯示

3、搜尋框width=500px,高度總共是50px

#想法分析：

1、該頁面分成上下2部分，上面是一張Logo,下面是負責搜尋的功能

2、下面搜尋功能的組成部分從左到右依序是，一個帶圓角的輸入框，一個照相機小圖標，最右邊是一個帶圓角的按鈕

具體程式碼實現如下：

1、我們先把素材準備好，一個百度Logo圖片，和一個相機小圖示,然後我們把他們放到images目錄中，方便管理

CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）

CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）

##2 、先寫好div架構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟百度搜索</title>
</head>
<body>
    <div class="container">
        <!-- 上面部分:logo图片 -->
        <div class="logo">
            
        </div>
        <!-- 下面部分：搜索功能 -->
        <div class="search">

        </div>
    </div>
</body>
</html>

3、填滿細節，先不寫樣式，只是填入好元素

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟百度搜索</title>
</head>
<body>
    <div class="container">
        <!-- 上面部分:logo图片 -->
        <div class="logo">
            <img  src="images/CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）"/ alt="CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）" >
        </div>
        <!-- 下面部分：搜索功能 -->
        <div class="search">
            <input  type="text" class="txtInput" />
            <img  src="images/cam.png" class="camIcon" / alt="CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）" >
            <input type="button" class="btnSearch" value="百度一下"/>
        </div>
    </div>
</body>
</html>

運行效果如圖：

CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）

接下來我們要做樣式處理

4、寫入樣式

建立css/index.css,為了方便管理，建立單獨的文件夾css，然後創建index.css

裡面的樣式怎麼寫呢？我們接下來分析

1、.container是整體的容器，我們根據上述要求，得知它的width=800,為了方便看居中效果，所以我們先設定它的邊框為1px,然後顏色自訂，我們就寫成淺灰色即border:1px solid lightgray;

，然後裡面的內容要居中(text-align: center)，為了防止一些元素有預設的padding或margin所以統一設定成0(padding :0,margin:0),然後我們要求這個容器也要居中，所以寫成margin:0 auto

分析完畢，我們接下來將.container樣式程式碼寫入index.css中

.container{
    width:800px;
    padding:0;
    border:1px solid lightgray;
    text-align: center;
    margin:0 auto;
}

2、接下來分析容器裡的上面部分，也就是圖片Logo的樣式該怎麼寫

分析如下：

1、根據要求得知，logo 寬=300即width :300px;也要居中，所以即margin:0 auto，

其實這裡要實現這種效果有很多種方式，我們就讓圖片的容器logo它的寬度設定成300，然後讓圖片的寬度100%即可

好，繼續加入index.css程式碼如下

/* 最外层容器 */
.container{
    width:800px;
    padding:0;
    border:1px solid lightgray; 
    text-align: center;
    margin:0 auto;
}
/* LOGO样式 */
.logo{
    width:300px;
    margin: 0 auto;
}
.logo img{
    width:100%;
}

3、接下來就是設定搜尋部分了

分析如下：

1、根據要求，整個搜尋的高度是50px 所以我們可以讓搜尋容器.search的高度設定成50px 即height:50px,然後讓按鈕的高度設定成100%即可，這裡要注意的是，按鈕的高度一旦設定成例如46px，但是如果邊框有4px，那麼意味著他裡面的高度就只有46-4=42所以按鈕的高度，它是包括了邊框，這點和文字輸入框不同，文字輸入框height =46,那麼就不包含邊框

2、文字輸入框的上下邊框總共有4px，所以他的高度就是46px,即height: 46px;這樣整體高度就=50px,即

#border:2px solid rgb(70,98,217);

因為它的寬度是500px所以width:500px,然後它有預設的padding,所以設定它的padding=0,

然後它左上角，左下角都有圓角，大小為10px,即border-radius: 10px 0 0 10px;

好就這樣，先把能想到的比較簡單的樣式寫好，到時候看具體效果再調整

接下來繼續加入Index.css，程式碼如下

/* 最外层容器 */
.container{
    width:800px;
    padding:0;
    border:1px solid lightgray; 
    text-align: center;
    margin:0 auto;
}
/* LOGO样式 */
.logo{
    width:300px;
    margin: 0 auto;
}
.logo img{
    width:100%;
}
/* 搜索部分样式 */
.search{
    height:50px;
}
.txtInput{
    width:500px;
    height: 46px;
    border:2px solid rgb(70,98,217);
    border-radius: 10px 0 0 10px;
    padding:0;
}

5、照相機小圖示和搜尋按鈕樣式程式碼分析如下：

##1、它的寬度我們就設定成30px即可，即width:30px

2、搜尋按鈕width:100px,高度100%,它也是有圓角，只是右上和右下，然後他的圓角大小要和文字輸入框的一樣也是10px,背景顏色，也是藍色rgb(70,98,217),文字顏色是白色，字體大小我們設定成15px,padding我們也設定成0

所以現在的index.css程式碼如下：

/* 最外层容器 */
.container{
    width:800px;
    padding:0;
    border:1px solid lightgray; 
    text-align: center;
    margin:0 auto;
}
/* LOGO样式 */
.logo{
    width:300px;
    margin: 0 auto;
}
.logo img{
    width:100%;
}
/* 搜索部分样式 */
.search{
    height:50px;
}
.txtInput{
    width:500px;
    height: 46px;
    border:2px solid rgb(70,98,217);
    border-radius: 10px 0 0 10px;
    padding:0;
}
.camIcon{
    width:30px;
}
/* 搜索按钮 */
.btnSearch{
    width:100px;
    height: 100%;
    border:2px solid rgb(70,98,217);
    background-color:rgb(70,98,217);
    border-radius: 0 10px 10px 0;
    color:white;
    font-size:15px;
    padding:0;
}

接下來為了看到效果，我們把樣式引入index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟百度搜索</title>
     <link href="css/index.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <!-- 上面部分:logo图片 -->
        <div class="logo">
            <img  src="images/CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）"/ alt="CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）" >
        </div>
        <!-- 下面部分：搜索功能 -->
        <div class="search">
            <input  type="text" class="txtInput" />
            <img  src="images/cam.png" class="camIcon" / alt="CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）" >
            <input type="button" class="btnSearch" value="百度一下"/>
        </div>
    </div>
</body>
</html>

運行效果如下：

1CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）可以看出，效果基本上差不多了，接下來，我們要做的修改是

1、我們要讓照相機按鈕左移，然後高度也要位於文字方塊中間（這一步，自己去計算，根據圖片的寬度，高度，結合文字框的寬度，高度，可以推算出來）

2、照相机左移过去后，要保证按钮要和文本框贴合的恰当

好继续修改index.css 中的照相机图标样式，添加margin-left,margin-top

.camIcon{
    width:30px;
    margin-left:-40px;
    margin-top:11px;
}

运行结果如下：

CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）

我们会发现，其实文本输入框的高度和按钮的高度都是50px，但是还是无法位于同一水平线，怎么做呢？

我们可以通过float的方式解决这个问题，所以接下来我们让文本输入框，照相机图标，还有按钮都float:left

css代码如下：

/* 最外层容器 */
.container{
    width:800px;
    padding:0;
    border:1px solid lightgray;
    text-align: center;
    margin:0 auto;
}
/* LOGO样式 */
.logo{
    width:300px;
    margin: 0 auto;
}
.logo img{
    width:100%;
}
/* 搜索部分样式 */
.search{
    height:50px;
}
.txtInput{
    width:500px;
    height: 46px;
    border:2px solid rgb(70,98,217);
    border-radius: 10px 0 0 10px;
    padding:0;
    /* 解决输入框和按钮位于同一水平线 */
    float: left;
}
.camIcon{
    width:30px;
    margin-left:-40px;
    margin-top:11px;
    float: left; /* 解决输入框和按钮位于同一水平线 */
}
/* 搜索按钮 */
.btnSearch{
    width:100px;
    height: 100%;
    border:2px solid rgb(70,98,217);
    background-color:rgb(70,98,217);
    border-radius: 0 10px 10px 0;
    color:white;
    font-size:15px;
    padding:0;
    /* 解决输入框和按钮位于同一水平线 */
    float: left;
}

运行效果如下：

CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）

我们发现现在就符合我们的效果了，位于同一水平线了，但是下面的部分不居中了，那么根据下面的总共宽度是600（文本输入框500+按钮宽度100），那么还剩下800-600=200，所以margin-left:100即可

再次修改index.css中.txtInput

.txtInput{
    width:500px;
    height: 46px;
    border:2px solid rgb(70,98,217);
    border-radius: 10px 0 0 10px;
    padding:0;
    /* 解决输入框和按钮位于同一水平线 */
    float: left;
    margin-left: 100px;/*让文本输入框居中**/
}

好再次运行结果如下：

CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）

根据灰色边框我们可以看出确实是居中了，接下来，去除最外层的边框即可，去除index.css中的最外层容器的border即可

.container{
    width:800px;
    padding:0;
    /* border:1px solid lightgray; */
    text-align: center;
    margin:0 auto;
}

再来运行效果如下：

CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）

好，到此为止，我们就实现了所有要求的效果！！！

总结：

1、掌握了CSS3中圆角边框的实现

2、可以通过float实现文本输入框和按钮水平平齐

希望本文能给大家带来一定的帮助，谢谢！！！

以上是CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

架构 css css3 html Float auto margin padding border
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css實作元素自適應螢幕大小的思路是什麼下一篇：css實作元素自適應螢幕大小的思路是什麼

相關文章

看更多