CSS3圆角边框实现baidu首页搜寻界面结果-案例解析(代码实例)
本文指标:
1、把握CSS3中border-radius的用途
题目:
实现下列界面结果,(不请求实现搜寻功能),请求不运用任何框架,纯div+css3,同时必需运用border-radius见识点
2、先写好div架构
模拟baidu搜寻
3、添补细节,先不写样式,只是添补好元素
代码如下:
模拟baidu搜寻
运转结果如图:
,然后里面的内容要居中(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
模拟baidu搜寻
运转结果如下:
可以看出,结果根本上差未几了,接下来,我们要做的修改是
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圆角边框实现baidu首页搜寻界面结果-案例解析(代码实例 )的细致内容,更多请关注 百分百源码网 其它相干文章!