HTML+CSS实例——漂亮的查询部件(一)
2013-06-21 15:00
393 查看
一、参考网址:www.kuhnsjewelers.com
二、效果:
三、HTML
四、CSS
五、说明:
1、 文本框预编译后是" type="text"的标签input,代码如下:
2、 文本框的大小和div类似,盒子模型如图示:
3、 按钮预编译后是标签type="submit"的标签input
4、 按钮的width和height是包括边框的,CSS中设置的
width:
70px;
height:
29px;,实际盒子模型如图示:
二、效果:
三、HTML
<div id="search-box"> <asp:TextBox ID="txtSearch" runat="server" class="searchTextBox" /> <asp:Button ID="btnSubmit" runat="server" class="submitButton" Text="Search" /> </div>
四、CSS
#search-box { position: relative; float: left; width: 265px; height: 55px; background: url(Images/search-bg.gif) top right no-repeat; } .searchTextBox { position: relative; float: left; margin-top: 14px; margin-right:14px; padding: 5px 5px 0 5px; height: 22px; width: 141px; border: 1px solid #000; background: #915735; margin-left: 14px; color: #fdf086; } .submitButton { position: relative; height: 29px; margin-top: 14px; width: 70px; background: #D2B277; border: 1px solid #3E1210; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; font-size: 11px; } .submitButton:hover { text-decoration: underline; }
五、说明:
1、 文本框预编译后是" type="text"的标签input,代码如下:
<input name="txtSearch" id="txtSearch" class="searchTextBox" type="text">
2、 文本框的大小和div类似,盒子模型如图示:
3、 按钮预编译后是标签type="submit"的标签input
<input name="btnSubmit" value="Search" id="btnSubmit" class="submitButton" type="submit">
4、 按钮的width和height是包括边框的,CSS中设置的
width:
70px;
height:
29px;,实际盒子模型如图示:
相关文章推荐
- HTML+CSS实现漂亮的查询部件实例
- HTML+CSS实例——漂亮的查询部件(一)
- HTML+CSS实现漂亮的背景实例
- HTML+CSS实例——漂亮的背景(一)
- HTML+CSS实例——漂亮的背景(一)
- html、css和jquery相结合实现简单的进度条效果实例代码
- [置顶] 纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!
- HTML+CSS+JQUERY漂亮的垂直时间轴
- html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
- html+css 漂亮的登陆界面
- 结合Html/js/css实现超级链接访问JavaScript的事件!(实例)
- 纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!
- html css学习笔记-图片操作实例
- HTML+css+JavaScript 实例应用 图片旋转切换效果
- html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
- css+html导航栏实例
- Html+Css_CSS3_CSS2 响应式布局 Media query(媒介查询)
- CSS+HTML实例集合三,用户自定义创建表格并删除指定行、列,对表格中的数据进行排序,radio单选摁扭之调查问卷、之选择题
- 【前端开发实例】HTML CSS - 微信端悬浮引导关注 -(六)
- CSSHTML实例:超酷的竖排导航栏