CSS3 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)-CSS Tutorial-php.cn

Goals of this article:

1. Master the usage of border-radius in CSS3

Question:

Achieve the following interface effects (the search function is not required), requirements Do not use any frame, pure div css3, and must use border-radius knowledge points

CSS3 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)

Other instructions:

1. The entire width is 800x, and it is required to be centered Display

2. The width of the logo image is 300px, and the center display is

3. The search box width=500px, and the total height is 50px

Idea analysis:

1. The page is divided into upper and lower parts. The upper part is a logo, and the lower part is the search function.

2. The components of the search function below are from left to right, a belt An input box with rounded corners, a small camera icon, and a button with rounded corners on the far right

The specific code is implemented as follows:

1. Let’s prepare the material first Okay, a Baidu Logo picture, and a small camera icon, and then we put them in the images directory for easy management

CSS3 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)

#2 , write the div structure first

<!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>

Copy after login

3. Fill in the details, don’t write the style first, just fill in the elements

The code is as follows:

<!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 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)"/ alt="CSS3 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)" >
        </div>
        <!-- 下面部分：搜索功能 -->
        <div class="search">
            <input  type="text" class="txtInput" />
            <img  src="images/cam.png" class="camIcon" / alt="CSS3 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)" >
            <input type="button" class="btnSearch" value="百度一下"/>
        </div>
    </div>
</body>
</html>

Copy after login

The running effect is as shown in the figure:

CSS3 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)

Next we do style processing

4. Write style

Create css/index.css. In order to facilitate management, create a separate file Fold css, and then create index.css

How to write the styles in it? Let’s analyze next

1. .container is the overall container. Based on the above requirements, we know that its width=800. In order to facilitate the centering effect, we first set its border to 1px, and then the color To customize, we write it in light gray, that is, border: 1px solid lightgray;

, and then the content inside should be centered (text-align: center). In order to prevent some elements from having default padding or margin, we set it to 0 (padding :0,margin:0), and then we require this container to be centered, so we write margin:0 auto

After the analysis is completed, we will next write the .container style code into index.css

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

Copy after login

2. Next, analyze the upper part of the container, that is, how to write the style of the picture Logo.

The analysis is as follows:

1. According to the requirements, the logo width = 300, which is width :300px; also needs to be centered, so margin:0 auto,

In fact, there are many ways to achieve this effect here. Let’s set the width of the image’s container logo to 300, and then let the image’s container logo be The width is 100%

Okay, continue to add the index.css code as follows

/* 最外层容器 */
.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%;
}

Copy after login

3. The next step is to set the search part

The analysis is as follows:

1. According to the requirements, the height of the entire search is 50px, so we can set the height of the search container.search to 50px, that is, height: 50px, and then set the height of the button to 100%. What should be noted here is that the height of the button Once the height is set to, for example, 46px, but if the border has 4px, it means that the height inside it is only 46-4=42. So the height of the button includes the border, which is different from the text input box. The height of the text input box =46, then the border is not included

2. The upper and lower borders of the text input box have a total of 4px, so its height is 46px, that is, height: 46px; so the overall height is =50px, that is

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

Because its width is 500px, width:500px, and then it has default padding, so set its padding=0,

Then its upper left corner and lower left corner have rounded corners, with a size of 10px, that is, border-radius: 10px 0 0 10px;

Okay, that’s it, first write the simpler style that you can think of, then Adjust according to the specific effect.

Next, continue to add Index.css, the code is as follows

/* 最外层容器 */
.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;
}

Copy after login

5. The camera icon and search button style code analysis is as follows:

1. We can set its width to 30px, that is, width: 30px

2, search button width: 100px, height 100%, it also has rounded corners, just the upper right and lower right, and then its rounded corners The corner size should be the same as the text input box, which is also 10px, the background color is also blue rgb (70,98,217), the text color is white, the font size is set to 15px, and the padding is also set to 0

so The current index.css code is as follows:

/* 最外层容器 */
.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;
}

Copy after login

Next, in order to see the effect, we introduce the style into 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 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)"/ alt="CSS3 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)" >
        </div>
        <!-- 下面部分：搜索功能 -->
        <div class="search">
            <input  type="text" class="txtInput" />
            <img  src="images/cam.png" class="camIcon" / alt="CSS3 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)" >
            <input type="button" class="btnSearch" value="百度一下"/>
        </div>
    </div>
</body>
</html>

Copy after login

The running effect is as follows:

1CSS3 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)

It can be seen that the effect is basically the same. Next, the modifications we need to make are

1. We want to move the camera button to the left, and then the height should be in the middle of the text box (this One step, calculate it yourself. According to the width and height of the picture, combined with the width and height of the text box, you can calculate it)

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

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

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

Copy after login

运行结果如下：

CSS3 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)

我们会发现，其实文本输入框的高度和按钮的高度都是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;
}

Copy after login

运行效果如下：

CSS3 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)

我们发现现在就符合我们的效果了，位于同一水平线了，但是下面的部分不居中了，那么根据下面的总共宽度是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;/*让文本输入框居中**/
}

Copy after login

好再次运行结果如下：

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

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

Copy after login

再来运行效果如下：

CSS3 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example)

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

总结：

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

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

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

The above is the detailed content of CSS3 rounded border realizes the effect of Baidu homepage search interface - case analysis (code example). For more information, please follow other related articles on the PHP Chinese website!