整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS 表单美化-outstyle

CSS 表单美化-outstyle

廓线(outstyle)

比较常见于表单和链接等 。

outline-style:none; 取消谷歌、360等蓝色边框


:focus 获得焦点的状态, 鼠标的光标就是焦点

.username:focus{ /*获得焦点的状态*/
    border:1px dashed pink;
    background-color:#FFF7FB;
    color:pink;
}

取消表单边框

因为表单在不同浏览器里面, 以后不同的显示方式。

所以, 一般情况下, 我们会把所有的表单都去掉边框。

border: 0 none; 兼容性更好的写法

Label 标签

<label for="txt">搜索一下</label>: <input type="text" id="txt" class="search" value="请输入..." />

这样, 我们点击搜索一下, 光标就跳到了相应id的 input 里面了

完整实例:

.表格的宽度 高度 边框 <width> <height> <border>

2.表格的背景颜色和图片 <colcr>颜色背景图片颜色可通过<background> <bgcolor>背景颜色

3.表格以及单元格内容的对齐方式 <aligh>分为<right>右对齐 <center>居中对齐 <left>左对齐

4.单元格的填充和间距 <cellspacing>间距 <cellpadding>填充

5.<font>标签可以设置字体字号以及颜色


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>优化表格</title>

</head>

<body>

<table border="0" width="395" cellpadding="0" cellspacing="0">

<tr>

<td colspan="4" background=""><font color="white"></font><b>&nbsp;&nbsp;&nbsp;&nbsp;本周畅销笔记本排名top3<font></font></b></td>

</tr>

</table>

<table>

<tr>

<td>

<table>

<tr>

<td colspan="2">京东超市/td>

</tr>

<tr>

<td colspan="2">< img src="img/1.jpg" alt=""></td>

</tr>

<tr>

<td>< img src="img/人.png" alt=""></td>

<td>< img src="img/罗宾.jpg" alt=""></td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

者:悦然wordpress建站(悦然建站)

(此处已添加小程序,请到客户端查看)

继续分享wordpress建站教程。之前悦然建站给大家分享过Contact Form 7表单插件,这款插件虽然好用,但是它默认的表单样式都是最简单的,不是很好看。想要修改表单模块的样式一般有两个方法,一个是使用CSS,另外一个是使用wordpress插件。使用CSS会比较复杂,这里就不多说了,会的都会,不会的也不是简单几句话能讲清楚的,接下来悦然建站还是介绍使用插件修改的方法,如上图就是使用插件美化过的表单。

今天给大家分享的wordpress插件是WOW Style Contact Form 7,这是一个专门配合Contact Form 7表单插件使用的。

步骤一:安装WOW Style Contact Form 7插件



WOW Style Contact Form 7插件是需要收费的,不过免费的也能用,但只能设置一个表单,免费够用,如果感觉好用也可以选择购买。插件可以直接在wordpress建站后台搜索下载安装。

步骤二:设置表单效果



安装之后进入插件设置,它会自动识别出Contact Form 7创建的表单,选中对应的表单,然后在左边设置效果就可以了,可以设置表单背景(付费版功能)、字体、边框、按钮样式等等,功能很丰富,而且设置页面可以与原来的样式相互对照,觉得效果满意之后保存即可。插件的具体使用大家可以安装体验一下,并没有什么操作上的难点,点点鼠标即可。