html/css表单美化

一、字体设置

字体样式的设置，属性有：

font-family 设置字体类型隶书
font-size 设置字体大小 12px
font-style 设置字体风格 italic
font-wieght 设置字体的粗细 bold

还可以将4中属性一起写入一个font中，不过要按照：

字体风格---->字体粗细---->字体大小---->字体类型

font-family: fantasy;
font-size: 24px;
font-style: italic;
font-weight: bold;
/全部写在一起的方法，要按顺序来写/
font: normal 400 24px cursive;
设置字体类型，可以设置楷书，隶书等等;

设置字体大小，设置数字后面要加px;

文本属性，文本的属性有
color 设置文本颜色
text-align 设置元素水平对齐方式
text-indent 设置首行文本的缩进
line-height 设置文本的行高

text-decoration 设置文本的装饰

color: #77F908;
text-indent: 2em;
line-height: 48px;
text-align: right;
text-decoration: underline;

二、颜色
RGB:颜色属性，16进制方法表示颜色，前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量

rgb（r、g、b）：正数的取值为0到255。

RGBA:在RGB的基础上，增加了控制透明度的参数，其中这个透明通道值为0到1。

注：

对于我们想要的颜色，可以在ps软件中先找到，然后复制其下面的参数值。

三、排版布局

3.1 水平对齐（text-align）方式属性：
left 把文本排列到左边，默认值由浏览器决定
right 把文本排列到右边
center 把文本排列到中间

justify 实现两端对齐文本效果

text-align: right;
3.2 排版文本段落：

首行缩进

text-indent :em或px

text-indent: 2em;
3.3 行高

line-height :px

line-height: 48px;
3.4 文本装饰：

text-decoration

text-decoration: underline;
underline 设置文本的下划线
overline 设置文本上划线
lint-through 设置文本的删除线

none 默认值，定义标准文本

3.5 div的应用

3.6 图片文本垂直对齐方式：

vertical-align

垂直对齐方式
vertical-align: bottom;
向上对齐
vertical-align:top;
向下对齐
vertical-align: middle;
middle（中央）top（顶部）bottom（底部）

文本阴影:

text-shadow

/文本阴影/
text-shadow: red 5px 4px 1px;
text-shadow : color x-offest y-offest biur-radius;
定义阴影的颜色---->x轴位移,用来定义水平位移量---->y轴位移，用来令阴影垂直位移量---->阴影模糊半径，代表阴影向外模糊的模糊范围。

这里还存在浏览器兼容性的问题。在我们不确定浏览器是否兼容的时候，可以上网查。caniuse.com

3.7 熟悉超链接属性的使用
使用cs设置超链接，伪类的名称，一共有四个:
a : link 单击访问时超链接样式
a : visited 单击访问后超链接样式
a : hover 鼠标悬浮其上的超链接样式

a : active 鼠标单击未释放的超链接样式

/移上去未释放的效果/
a:hover{
color: red;
}
/单击未跳转时的效果/
a:active{
color: blue
}
最重要的就是鼠标悬浮其上的超链接样式，我们经常使用，所以得记住它的英文单词。

格式：

标签名：伪类名{声明；}

设置伪类的顺序，从上到下；

<a style=“cursor: help” href=“https://www.baidu.com"target=”_self">百度

3.8 背景属性的使用

常见的背景样式有背景图像和背景颜色

首先来设置背景颜色样式

background-color

/背景颜色/
background-color:bisque ;
背景图像：

background-image:url(图片路径）：

/背景图片/
background-image:url(’…/Demo/网页背景/buy.png’);
背景重复方式：

background-repeat属性：

/图片不平铺，只显示一次/
background-repeat:no-repeat;
repeat 沿水平和垂直两个方向平铺
no-repeat 不平铺，即只显示一次
repeat-x 只沿水平方向平铺

repeat-y 只沿垂直方向平步

背景定位：

background-position属性：

/向XY两轴的偏移量/
background-position-x:80px;
background-position-y:80px
Xpos(代表水平位置）,Ypos(代表垂直位置）,单位px

X% Y% 使用百分比表示背景的位置

XY方向关键词：水平方向关键词：left right center

                   垂直方向关键词：top        bottom      center

背景属性简写：background：背景颜色，背景图像，背景定位，背景不重复显示

背景图片大小控制：

background-size

auto 默认值，使用背景图片保持原样

percentage 当时用百分比时，不是对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的

cover 整个背景图片放大填充了整个元素

contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或高度，正好适应所定义背景的区域

线性渐变：颜色沿着一条直线过渡，从左到右，从右到左，从上到下等

linear-gradient(position(渐变方向)，color1,color2…)

#线性渐变，从左到右设置，渐变方向，第一种颜色值，第二种颜色，质地，三种颜色时等等。#

径向渐变：圆形或椭圆形渐变颜色，不再沿着一条直线变化，而是从一个起点朝着所有方向混合

注：此处也有浏览器兼容性问题

Ie浏览器是Trident内核加前缀-ms-

Chrome 浏览器是Webkit内核加前缀-webkit-

Safari浏览器是Webkit内核加前缀-webkit-

Opera浏览器是Blink内核加前缀-o-

Firefox浏览器是内核加前缀-moz-

兼容webkit内核的浏览器：

-webkit-liner-gradient(position，color1,color2…)

四、列表
列表就是信息资源的一种展示形式，
以列表的样式显示，可以使信息结构化和条理化，便于浏览者能更快捷的获取相应的信息。

列表的分类：
1.无序列表

2.有序列表

定义列表

标题: 1; 2

泰戈尔诗集
冰心诗集
莎士比亚

泰戈尔诗集
冰心诗集
莎士比亚

文人: 泰戈尔诗集; 冰心诗集; 莎士比亚

无序列表的特性：

1没有顺序，每个ul标签独占一行

2标签像前面有个实心小圆点

3一般用于无序类型的列表，如导航侧边，新闻栏有规律的图文组合模块的

定义列表的特性:

1没有顺序，每个第一批标签的dl标签独占一行(块元素）

2默认没有标记

3一般用于一个标题下有一个或多个列表项的情况。

列表样式：列表样式，可以设置列表前面的字符的形状

lidt-style-type

list-style-type: square
none 无标记字符号

disc 实心圆,默认类型

circle 空心圆

square 实心正方形

decimal 数字

例如：li { list-style : none }

为什么使用表格 : 简单通用结构稳定

基本结构: 行列单元格

表格标签:

行标签:

单元格标签:

大数据学士后32班成绩列表
李志豪	语文	90
李志豪	数学	90
李宁	语文	100
李宁	数学	59

跨列：colspan

跨行: rowspan

五、表单在网页中的应用

表单语法：规定如何发送表单数据常用值method（post/get）；表示向何处发送表单数据action

<!--复选框选了可以取消-->
<input type="checkbox"name="sprots"vaule="足球"/>足球
<input type="checkbox"name="sprots"vaule="篮球"checked/>篮球
<input type="checkbox"name="sprots"vaule="篮球"/>篮球

在实际网页开发中，通常采用post方式提交表单数据。

一般表格表单元素有：

input元素类型type （指定元素类型有：text，password，CheckBox，radio，submit，reset，file，hidden， image，和button，默认为text）

input元素名称name （指定表单元素的名称）

input元素的值value （type为radio时，必须指定一个值）

指定表单元素的初始宽度：size （type为text或password时元素大小为字符单位，其它的为像素px单位）

输入最大字符数：maxlength （type为text或password时）

确定按钮是否被选中：checked (type为radio或CheckBox时）

文本框：
<input type="text"name="urseName"value="用户名"size=“30"maxlength=“20”/>
密码框：
<input type="password"name="pass"size=“20”/>
单选按钮：

转载：https://blog.csdn.net/Golden_soft/article/details/80379111

html/css表单美化相关推荐

JavaScript/jQuery 表单美化插件小结
Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...
html表单验证案例,HTML5表单验证（4个实用的表单美化案例）
multipart/form-data 在使用包含文件上传控件的表单时,必须使用 autocomplete="on" 自动补全功能 novalidate 不验证 placehold ...
html表单模板属性,HTML5超酷响应式表单美化模板插件
这是一款非常效果非常酷的HTML5超酷响应式表单美化效果插件.表单的整体效果使用扁平化风格,使用media queries来为各种屏幕创建响应式效果.在大屏幕上,整个表单分三列显示,当屏幕小到一定程度 ...
我为什么还要造轮子？欠踹？Monk.UI表单美化插件诞生记！
背景目前市场上有很多表单美化的UI,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开发的,导致我们引入这些UI的时候,很难和程序绑定.所以作为程序员的我,下了一个决定!我要自己 ...
div css表单布局的五个小技巧
div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加 ...
HTML5 JavaScript CSS 表单实现购物优惠打折
HTML5 JavaScript CSS 表单实现购物优惠打折文章目录 HTML5 JavaScript CSS 表单实现购物优惠打折前言一.CSS代码如下,通过外链接实现交互. 二.HTML5 ...
暑期学习日记19：CSS表单
通过使用 CSS,可以极大地改善 HTML 表单的外观,如: 使用 width 属性来确定输入字段的宽度. 使用 padding 属性在文本字段内添加空间. 使用 border 属性更改边框的粗细和颜 ...
label美化css,表单label美化代码
化表单,效果如下: 每个lebal有箭头的背景有焦点的lebal背景高亮示例如下: 代码如下: 复制代码代码如下: 姓名邮件 css代码: 复制代码代码如下: #commentform{ f ...
Web表单美化CSS框架Topcoat
Topcoat同样是一款简洁的Web表单构建应用,和Semantic UI.BootMetro等CSS框架不同的是,Topcoat主要用于构建美化的Web表单,包括提交按钮.输入框.单选框/复选框.滑 ...
浅析Web表单美化CSS框架Topcoat
Topcoat同样是一款简洁的Web表单构建应用,和Semantic UI.BootMetro等CSS框架不同的是,Topcoat主要用于构建美化的Web表单,包括提交按钮.输入框.单选框/复选框.滑 ...

html/css表单美化

html/css表单美化相关推荐

最新文章

热门文章