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

吾峰 发布于  2023-4-19 15:55 

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

吾峰 发布于  2023-4-18 17:59 

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

吾峰 发布于  2023-4-17 19:39 

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的区别?

  1. get是从服务器上获取数据,post是向服务器传送数据。
  2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
  3. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
  4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4(Internet Information Service 互联网信息服务)中最大量为80KB,IIS5中为100KB
  5. get安全性非常低,post安全性较高。但是执行效率却比Post方法好。
标签: html

吾峰 发布于  2023-4-16 19:44 

table表格的相关属性 前端开发

表格属性

  1. 宽度 width
  2. 高度 height
  3. 边框 border
  4. 边框颜色 bordercolor
  5. 背景颜色 bgcolor
  6. 水平对齐 align=“left或right或center”
  7. cellspacing=“单元格与单元格之间的间距”
  8. cellpadding=“单元格与内容之间的空隙”
标签: html

吾峰 发布于  2023-4-16 16:10 

CSS装饰 前端开发

垂直对齐方式

属性名:vertical-align
属性值:

属性值 效果
baseline 默认、基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐

光标类型

场景:设置鼠标光标在元素上时显示的样式
属性名:cursor
常见属性值:

属性值 效果
default 默认值,通常是箭头
pointer 小手效果,提示用户可以点击
text 工字形,提示用户可以选择文字
move 十字光标,提示用户可以移动

边框圆角

场景:让盒子变得圆润
属性名:border-radius
常见取值:数字+px、百分比

溢出部分显示效果

溢出部分:指的是盒子 内容部分 所超出盒子范围的区域
场景:控制内容溢出部分的显示效果,如:显示、隐藏、滚动条......
属性名:overflow
常见属性值:

属性值 效果
visible 默认值,溢出部分可见
hidden 溢出部分隐藏
scroll 无论是否溢出,都显示滚动条
auto 根据是否溢出,自动显示或隐藏滚动条
标签: css

吾峰 发布于  2023-3-3 19:39 

CSS元素层级问题 前端开发

元素层级问题

不同布局方式元素的层级关系

标准流<浮动<定位

不同定位之间的层级关系

相对、绝对、固定默认层级相同

此时HTML中写在下面的元素层级更高,会覆盖上面的元素

标签: css

吾峰 发布于  2023-3-3 18:48 

CSS定位 前端开发

使用定位的步骤

1、设置定位方式

属性名:position
常见属性值:

定位方式 属性值
静态定位 static
相对定位 relative
绝对定位 absolute
固定定位 fixed

2、设置偏移量

偏移值设置分为两个方向,水平和垂直方向各选一个使用即可
选取的原则一般是就近原则(离那边近用哪个)

方向 属性名 属性值 含义
水平 left 数字+px 距离左边的距离
水平 right 数字+px 距离右边的距离
垂直 top 数字+px 距离上边的距离
垂直 bottom 数字+px 距离下边的距离
标签: css

吾峰 发布于  2023-3-1 16:15 

CSS解决外边距塌陷/清除浮动双伪元素 前端开发

  • 外边距塌陷:父子标签,都是块级,子级加margin会影响父级位置。
  • 父子级标签,子级浮动,父级没有高度,后面的标准流盒子会受影响,显示到上面。
.clearfix::before,
.clearfix::after {
    content: ''
    display: table;
}
.clearfix::after {
    clear: both;
}

清除浮动的方法-给父元素设置overflow:hidden

overflow:hidden
标签: css

吾峰 发布于  2023-2-24 15:53 

CSS 书写顺序 前端开发

CSS书写顺序:浏览器执行效率更高
1、浮动 / display
2、盒子模型:margin borde padding 宽度高度背景色
3、文字样式

标签: css

吾峰 发布于  2023-2-23 16:53