HTML+CSS实例——漂亮的查询部件(一)
一、参考网址:www.kuhnsjewelers.com
二、效果:
三、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实例——漂亮的背景(一)
一.网址:http://www.csszengarden.com/?cssfile=213/213.css 二.效果 三.CSS body { background-color:#F0ECD6; ba ...
- ASP.NET实例——漂亮的自适应宽度的导航条(仿Discuz!)
PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...
- 在 CSS 中使用特征查询
原文地址:Using Feature Queries in CSS 原文作者:Jen Simmons 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Che ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- CSS基础教程 -- 媒体查询屏幕适配
响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...
- CSS实例
CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...
- LESS CSS 实例
值得参考的 10 个 LESS CSS 实例 2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...
- css样式,媒体查询,垂直居中,js对象
下面是一些截图,有关查询效率,css样式,媒体查询,垂直居中,js基本类型.
- CSS:CSS 实例
ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...
随机推荐
- 十个提升你Emacs生产力的高招
转载 十个提升你Emacs生产力的高招 Emacs是世界上最好的编辑器(真的有很多人这么认为).不要以为emacs只是在编写程序时很牛X,其实只要你真正精通了emacs,会发现她几乎在所有用到打字 ...
- Java设计模式---工厂方法模式(Factory-Method)
一.普通工厂模式 建立一个工厂类,对实现了同一接口的一些类进行实例的创建 实例代码: 发送短信和邮件的例子,首先创建接口: public interface Sender { public void ...
- Com进程通信(Delphi2007)
相关资料: 1.http://my.oschina.net/u/582827/blog/2847662.http://www.cnblogs.com/findumars/p/5277561.html3 ...
- flask中的request.form对象方法
'add','clear','copy','deepcopy','fromkeys','get','gtlist','has_key','items','iteritems','iterkeys',' ...
- jquery validation ajax 验证
<link href="${base}/res/basic/css/jquery/validationEngine/validationEngine.jquery.css" ...
- 怎么删除windows中无用的服务
搜索cmd->以管理员身份打开 输入sc delete 服务名 回车即可
- C# 解压zip压缩文件
此方法需要在程序内引用ICSharpCode.SharpZipLib.dll 类库 /// <summary> /// 功能:解压zip格式的文件. /// </summary> ...
- MEF 编程指南(八):过滤目录
当使用子容器的时候,基于特定的标准(Specific Criteria)过滤目录是很必要的.比如,基于部件构造策略的过滤器是很常见的.下面的代码片段演示了如何构建的特殊途径(Particular Ap ...
- Struts2常量的具体用法实例(一)
XML代码: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC ...
- synchronized(this) 和synchronized(xxx.class)的区别和联系
synchronized(ThreadTest.class)是对ThreadTest这个类进行加锁,类里面的属性,方法都是同步的,是针对于特定的类的~~ synchronized(this){}是对{ ...