CSS-列表属性 前端开发
序号 | 属性 | 描述 | 说明 |
---|---|---|---|
1 | list-style-type | 定义列表属性样式 | list-sytle-type:disc/circle/square/none |
2 | list-style-image | 将图片设置为列表符合样式 | list-style-image:url(); |
3 | list-style-position | 设置列表标记的放置位置。 | list-style-position:outside/inside |
4 | list-stylet | 简写 | list-style:none |
标签: css
CSS-文本属性 前端开发
序号 | 属性 | 描述 | 说明 |
---|---|---|---|
1 | font-size | 字体大小 | 单位时px,默认时16px,设计图常用自豪时12px |
2 | font-family | 字体 | 当字体时中文字体、英文字体中有空格时,需加双引号;多个字体中间用逗号链接,先解析第1个字体,如果没有解析第二个字体,以此类推 |
3 | color | 颜色 | color:red; |
4 | font-weight | 加粗 | font-weight:100-900;100-500不加粗 600-900加粗 |
5 | font-style | 倾斜 | font-style:italic |
6 | text-align | 文本水平对齐 | text-align:center |
标签: css
CSS伪类选择器 前端开发
语法:
a:link{属性:属性值}超链接的初始状态;
a:visited{属性:属性值}超链接被访问后的状态;
a:hover{属性:属性值}鼠标悬停,即鼠标划过超链接时的状态;
a:active{属性:属性值}超链接被激活时的状态,即鼠标按下时超链接的状态;
Link--visited--hover--active.
说明:
a)当这4个超链接伪类选择器联合使用时,应注意他们的顺序,正常顺序为:
a:link, a:visited, a:hover, a:active, 错误的顺序有时候会使超链接的样式失效;
b)为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中;
例如:
a{color:red;} a:hover{color:green;}
表示超链接的初始和访问过后的状态一样,鼠标滑过的状态和点击时的状态一样。
标签: css
HTML-表单标签 前端开发
<form method=“get或者post” action=“向何处发送表单数据”>
<input />
A. 属性 type 定义输入框的类型
a)文本框 type="text“ 密码框 type=“password“
b)提交框 type=“ submit“ 和 <button>提交按钮</button> 一样
c)按钮框 type=“button“ 单纯的按钮
d)重置框 type=“reset”清空的效果
B.属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
C.属性 name 必须设置,否则在提交表单时,用户在其中输入的数据不会被发送给服务器
D.属性 value
</form>
Form当中method的post和get的区别?
- get是从服务器上获取数据,post是向服务器传送数据。
- get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
- 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
- get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4(Internet Information Service 互联网信息服务)中最大量为80KB,IIS5中为100KB
- get安全性非常低,post安全性较高。但是执行效率却比Post方法好。
标签: html
table表格的相关属性 前端开发
表格属性
- 宽度 width
- 高度 height
- 边框 border
- 边框颜色 bordercolor
- 背景颜色 bgcolor
- 水平对齐 align=“left或right或center”
- cellspacing=“单元格与单元格之间的间距”
- cellpadding=“单元格与内容之间的空隙”
标签: html
CSS装饰 前端开发
垂直对齐方式
属性名:vertical-align
属性值:
属性值 | 效果 |
---|---|
baseline | 默认、基线对齐 |
top | 顶部对齐 |
middle | 中部对齐 |
bottom | 底部对齐 |
光标类型
场景:设置鼠标光标在元素上时显示的样式
属性名:cursor
常见属性值:
属性值 | 效果 |
---|---|
default | 默认值,通常是箭头 |
pointer | 小手效果,提示用户可以点击 |
text | 工字形,提示用户可以选择文字 |
move | 十字光标,提示用户可以移动 |
边框圆角
场景:让盒子变得圆润
属性名:border-radius
常见取值:数字+px、百分比
溢出部分显示效果
溢出部分:指的是盒子 内容部分 所超出盒子范围的区域
场景:控制内容溢出部分的显示效果,如:显示、隐藏、滚动条......
属性名:overflow
常见属性值:
属性值 | 效果 |
---|---|
visible | 默认值,溢出部分可见 |
hidden | 溢出部分隐藏 |
scroll | 无论是否溢出,都显示滚动条 |
auto | 根据是否溢出,自动显示或隐藏滚动条 |
标签: css
CSS元素层级问题 前端开发
元素层级问题
不同布局方式元素的层级关系
标准流<浮动<定位
不同定位之间的层级关系
相对、绝对、固定默认层级相同
此时HTML中写在下面的元素层级更高,会覆盖上面的元素
标签: css
CSS定位 前端开发
使用定位的步骤
1、设置定位方式
属性名:position
常见属性值:
定位方式 | 属性值 |
---|---|
静态定位 | static |
相对定位 | relative |
绝对定位 | absolute |
固定定位 | fixed |
2、设置偏移量
偏移值设置分为两个方向,水平和垂直方向各选一个使用即可
选取的原则一般是就近原则(离那边近用哪个)
方向 | 属性名 | 属性值 | 含义 |
---|---|---|---|
水平 | left | 数字+px | 距离左边的距离 |
水平 | right | 数字+px | 距离右边的距离 |
垂直 | top | 数字+px | 距离上边的距离 |
垂直 | bottom | 数字+px | 距离下边的距离 |
标签: css
CSS解决外边距塌陷/清除浮动双伪元素 前端开发
- 外边距塌陷:父子标签,都是块级,子级加margin会影响父级位置。
- 父子级标签,子级浮动,父级没有高度,后面的标准流盒子会受影响,显示到上面。
.clearfix::before,
.clearfix::after {
content: ''
display: table;
}
.clearfix::after {
clear: both;
}
清除浮动的方法-给父元素设置overflow:hidden
overflow:hidden
标签: css