模仿百度搜索界面
来源:互联网 发布:软件股票最新上市公司 编辑:程序博客网 时间:2024/05/18 22:41
下面是我模仿百度首页所写的Html和css代码,在写代码测试的时候,发现了个小问题,就是两个button之间有间距,和之间,刚开始先想到的是margin问题,设置margin为0也不行,最后才恍然大悟,原来要设置float属性,也就是float:left。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <style type="text/css"> *{padding:0px; margin:0px;} .bg-search-img{width:100%; height:720px; background-image:url(img/bg1.jpg); margin:0 auto;} .search-logo{text-align:center;} .search-btn{ margin:0 auto; width:640px; height:40px;} .search-text{height:20px; width:521px; padding:9px 7px; border:1px solid #b8b8b8; outline:none; margin-right:0px; float:left;} .search-sub{height:40px; background-color:#38f; border:none; padding:1px; line-height:38px; width:102px;color:white; font-size:16px;margin:0px; float:left;} </style></head><body> <div class="bg-search-img"> <div class="search-conent"> <div class="search-logo"> <img src="img/bdlogo.png" /> </div> <div class="search-btn"> <form > <input type="text" class="search-text" /> <input type="submit" class="search-sub" value="百度一下" /> </form> </div> </div> </div></body></html>
效果图如下:
0 0
- 模仿百度搜索界面
- 模仿百度搜索
- 模仿 Goole 百度 搜索 检索
- [百度搜索框Bootstrap模仿]
- 百度搜索界面
- 模仿百度搜索的分页 超链接
- 模仿百度API接口搜索框
- winform 模仿 百度搜索 时 自动匹配 效果
- 模仿百度搜索的自动提示功能 高大上
- 模仿百度的下拉搜索,上下键控制并赋值
- java Swing模仿百度搜索功能的实现
- 利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果
- bigautocomplete的用法(包括后台数据的交互)模仿百度搜索样式
- 百度图片(模仿)
- 模仿百度钱包
- 模仿百度首页
- Java模仿DOS界面
- 界面制作模仿
- python + fabric 实现批量部署
- 嵌入式linux交叉编译环境构建
- Activity常用方法
- uva10534
- 跟着廖雪峰的git教程学习(2)时光机穿梭(一)版本回退
- 模仿百度搜索界面
- 0CTF 2016 RSA?(未完成)
- 【算法------01】从某个数字列表中找出两个彼此最接近但不相等的数
- 二叉树的深度
- linux的自动任务创建
- *(p+i) ,C语言数组指针_C语言中文网
- POJ 3617 Best Cow Line - 贪心
- web开发中相对路径
- C++播放RTMP源代码-RTMPClient C++