CSS3圆角边框实现baidu首页搜寻界面结果-案例解析（代码实例 ）
本文目标：
1、把握CSS3中border-radius的用途
问题：
实现以下界面结果，（不要求实现搜索功效），要求不使用任何框架，纯div+css3，同时必需使用border-radius知识点
其他说明：
1、整个宽度是800x,要求居中显示
2、logo图片按宽300px,居中显示
3、搜索框width=500px,高度总共是50px
思绪剖析：
1、该页面分成上下2部分，上面是一张Logo,下面是负责搜索的功效
2、下面搜索功效的组成部分从左到右顺次是，一个带圆角的输入框，一个拍照机小图标，最右侧是一个带圆角的按钮
详细代码实现如下：
1、我们先把素材预备好，一个baiduLogo图片，和一个拍照机小图标,然后我们把他们放到images名目中，利便治理
2、先写好div架构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模拟baidu搜索</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>模拟baidu搜索</title>
</head>
<body>
<div class="container">
<!-- 上面部分:logo图片 -->
<div class="logo">
<img src="images/1ogo.png"/>
</div>
<!-- 下面部分：搜索功效 -->
<div class="search">
<input type="text" class="txtInput" />
<img src="images/cam.png" class="camIcon" />
<input type="button" class="btnSearch" value="baidu一下"/>
</div>
</div>
</body>
</html>运转结果如图：
接下来我们做样式处置
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>模拟baidu搜索</title>
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<!-- 上面部分:logo图片 -->
<div class="logo">
<img src="images/1ogo.png"/>
</div>
<!-- 下面部分：搜索功效 -->
<div class="search">
<input type="text" class="txtInput" />
<img src="images/cam.png" class="camIcon" />
<input type="button" class="btnSearch" value="baidu一下"/>
</div>
</div>
</body>
</html>运转结果如下：
可以看出，结果根本上差不多了，接下来，我们要做的修改是
1、我们要让拍照机按钮左移，然后高度也要位于文本框中心（这一步，本人去运算，按照图片的宽度，高度，结合文本框的宽度，高度，可以推算出来）
2、拍照机左移过去后，要包管按钮要和文本框贴合的适当
好连续修改index.css 中的拍照机图标样式，增加margin-left,margin-top
.camIcon{
width:30px;
margin-left:-40px;
margin-top:11px;
}运转结果如下：
我们会发明，其实文本输入框的高度和按钮的高度都是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;
}运转结果如下：
我们发明此刻就相符我们的结果了，位于统一水平线了，但是下面的部分不居中了，那么按照下面的总共宽度是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;/*让文本输入框居中**/
}好再次运转结果如下：
按照灰色边框我们可以看出确实是居中了，接下来，去除最外层的边框即可，去除index.css中的最外层容器的border即可
.container{
width:800px;
padding:0;
/* border:1px solid lightgray; */
text-align: center;
margin:0 auto;
}再来运转结果如下：
好，到此为止，我们就实现了所有要求的结果！！！
总结：
1、把握了CSS3中圆角边框的实现
2、可以通过float实现文本输入框和按钮水平平齐
但愿本文能给大家带来必然的帮忙，感谢！！！
以上就是CSS3圆角边框实现baidu首页搜索界面结果-案例解析（代码实例 ）的具体内容，更多请关注百分百源码网其它相关文章！
