1.我们在写表单的时候都会遇到选中表单他的周围有黑色的框，我们叫他轮廓，如下图：

这种情况我们通常会用 outline: none;来去除轮廓

  .input {width: 400px;height: 30px;border: 1px solid gainsboro;outline: none;padding-left: 20px;}

去除后的效果：

2.input框里面的图，如上图所示input里面有一个小的搜索图片，其实加这个图片非常简单，首先给input一个icon的类名，在使用这个类名给input加背景图就可以了

 .icon {background: url(img/search.png) no-repeat 5px center;background-size: 3%;}/*background里面的5px表示左边，center表示居中，background-size: 3%;表示图片的大小*/

3.我们在使用textarea（文本域）时都会有一个问题就是他可以随意拖动大小，这样会使页面的格式变化，我们只要加上 resize: none;，如下图：

textarea {width: 400px;height: 80px;resize: none;}

效果：

4.媒体查询

1.语句： @media screen and (表达式如：（max-width:600px）){

css语句

}

这个是缩小到一定程度就会变格式

大于600px效果图：

小于600px效果图：

HTML表单和媒体查询相关推荐

微信小程序（组件：路由、表单、媒体、自定义组件，插槽、组件通讯、侦听器、生命周期）
三.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...
php 表单与数据库查询
<?phpheader("content-type:text/html;charset=utf-8"); //头部编码mysql_connect("localhos ...
不使用Form表单实现页面查询重置功能
问题描述: 因为有些页面中的查询选择框太多了,所以要求在这些页面上添加重置按钮选择框使用的是antd的Select组件,antd的组件好用是好用,但是密闭性太强了,想要根据需求自定义就会变得很困难 ...
(day16)媒体查询和响应式布局
1.媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的 ...
媒体查询漫谈——@media Queries
通过不同的媒体类型和条件定义样式表规则.媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和&q ...
自适应浮动表单填充布局脚本
效果 1.适合搜素表单布局,查询重置等功能块始终位于最后一行的最后一列 2.适合普通多行两端对齐,未填充满的行左对齐思路此脚本目的为实现整齐风格的表单布局,为了达到整齐的效果,每个表单元素或者块都 ...
xamarin_如何实现声明性Xamarin表单验证
xamarin by Ameer Jhan 通过阿米尔·詹(Ameer Jhan) 如何实现声明性Xamarin表单验证 (How to implement declarative Xamarin f ...
移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
边框样式（border-style）、边框圆角（border-radius）以及媒体查询（@media）
边框样式(border-style): border-style属性可以控制边框的视觉样式,包含8种可用边框样式. 使用方法: p {border-style: groove; } 8种样式: sol ...

HTML表单和媒体查询

1.我们在写表单的时候都会遇到选中表单他的周围有黑色的框，我们叫他轮廓，如下图：

这种情况我们通常会用 outline: none;来去除轮廓

去除后的效果：

2.input框里面的图，如上图所示input里面有一个小的搜索图片，其实加这个图片非常简单，首先给input一个icon的类名，在使用这个类名给input加背景图就可以了

3.我们在使用textarea（文本域）时都会有一个问题就是他可以随意拖动大小，这样会使页面的格式变化，我们只要加上 resize: none;，如下图：

效果：

4.媒体查询

1.语句： @media screen and (表达式如：（max-width:600px）){

css语句

}

这个是缩小到一定程度就会变格式

大于600px效果图：

小于600px效果图：

HTML表单和媒体查询相关推荐

最新文章

热门文章

HTML表单和媒体查询

1.我们在写表单的时候都会遇到选中表单他的周围有黑色的框，我们叫他轮廓，如下图：

这种情况我们通常会用 outline: none;来去除轮廓

去除后的效果：

2.input框里面的图，如上图所示input里面有一个小的搜索图片，其实加这个图片非常简单，首先给input一个icon的类名，在使用这个类名给input加背景图就可以了

3.我们在使用textarea（文本域）时都会有一个问题就是他可以随意拖动大小，这样会使页面的格式变化，我们只要加上 resize: none;， 如下图：

效果：

4.媒体查询

1.语句： @media screen and (表达式如：（max-width:600px）){

css语句

}

这个是缩小到一定程度就会变格式

大于600px效果图：

小于600px效果图：

HTML表单和媒体查询相关推荐

最新文章

热门文章

3.我们在使用textarea（文本域）时都会有一个问题就是他可以随意拖动大小，这样会使页面的格式变化，我们只要加上 resize: none;，如下图：