当前位置:  首页  >  前端开发  >  CSS+DIV

CSS3圆角边框实现百度首页搜索界面效果-案例解析(代码实例)

本文目标:1、掌握CSS3中border-radius的用法问题:实现以下界面效果,(不要求实现搜索功能),要求不使用任何框架,纯div+css3,同时必须使用border-radius知识点其他说明...

本文目标:

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

问题:

实现以下界面效果,(不要求实现搜索功能),要求不使用任何框架,纯div+css3,同时必须使用border-radius知识点

2、先写好div架构




    
    
    模拟百度搜索


    

3、填充细节,先不写样式,只是填充好元素

代码如下:




    
    
    模拟百度搜索


    

运行效果如图:

,然后里面的内容要居中(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




    
    
    模拟百度搜索
     


    

运行效果如下:

可以看出,效果基本上差不多了,接下来,我们要做的修改是

1、我们要让照相机按钮左移,然后高度也要位于文本框中间(这一步,自己去计算,根据图片的宽度,高度,结合文本框的宽度,高度,可以推算出来)

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

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

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

运行结果如下:

/* 最外层容器 */
.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;/*让文本输入框居中**/
}

好再次运行结果如下:

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

再来运行效果如下:

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

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

以上就是CSS3圆角边框实现百度首页搜索界面效果-案例解析(代码实例 )的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有