前端练习4

📅 2026/8/22 16:12:09
前端练习4
字体样式font-size 改字体大小px font-family 改字体样式 微软雅黑 font-style 规定斜体 font-weight 字体粗细 连写 font:粗细 斜体 字号 “名称 文本样式text-indent 段落前空格em,缩进 line-height 行高 background-color 背景颜色 text-align 文本行间的对齐方式 word-spacing 英文间单词间距 margin: 0 auto 标签水平居中 text-decorayion 文本装饰 underline 下划线 文本颜色color:rgb 调色 background-color:rgba 文本方向direction :rtl 右布局 列表样式list-style-type:设置列表样式 list-style-image:url() 图片 list-style 背景 background-image:url() 背景图片 background-repeat:repeat-y y轴重复 background-position 位置 left top 等 none-repeat 不重复 background-size:cover 全覆盖 background-attachment:fixed 背景固定 元素类型divh1lioldl 块级元素 默认情况独占一行 可设置宽高 行高 内外边距 spana链接 内联元素 和其他元素在同一行 不能设置宽高内外边距不可设 imginput 内联块级元素 和其他元素同一行 能设置宽高 display:block 变块级元素 inline-block 变内联块级元素 边框 border-color 边框颜色 border-width 边框大小 border-style 样式 虚线 双线等 border :宽 样式 颜色 复合形式 border-radius:边的弯曲程度 border-top-right-radius 右上弯曲程度 合并边框 cellspacing“” 边框间距 border-collapse:collapse 合并处变细 文本域resize:none 防止拖拽 vertical-align 文字与边框对应位置 middle 中间对齐 鼠标样式 cursor :改变鼠标样式 相对定位position:absolute 绝对定位 top:120px 距离上方120像素 定位中优先级 z-index:0 默认0 1优先显示 固定定位position:fixed 固定住 粘性定位position:sticky 粘性定位 显示与隐藏 display:block 显示 none 隐藏 opacity接近0 越浅 1 越深 visbility :hidden 隐藏!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style a{ display: inline-block; width: 800px; height: 400px; background-color: pink; text-align: center; line-height: 3em; border-radius: o.6em; color: #fff; text-decoration: none; } a.one{ background: url(./微信图片_20231119170241.jpg)no-repeat; } a.one:hover { background: url(./微信图片_20231119170224.jpg)no-repeat; background-position: center; } /style /head body a href classone/a /body /html!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style table{ border-collapse: collapse; } a{ display: inline-block; width: 1000px; height: 400px; } .one{ background-image: url(./code.jpg); background-attachment: fixed; background-repeat: no-repeat; display: none; } .two:hover{ background-image: url(./code.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center; } /style /head body table border1px width1000px cellspacing0 tr td我要投资/td td平台介绍/td td新手专区/td td手机微金所/td td个人中心/td /tr /table /body /html