CSS基础列表相关的属性的使用

1.无序列表:就是不需要排列顺序的情况,用无序列表语法结构:<ul> <li></li> <li></li> </ul> 特点:每一个li前面都有一个小圆点 /* 清除黑点代码:list-style='none' */ 注意点:ul只能包裹li,li可以包裹任意内容 2.有序列表:有规则.有排序的情况使用语法结构:<ol> <li></li> </ol>特点:没个li前面自动增加一个排…

1.相对定位:position:relative: 属性名:position 属性值:relative: 特点:1.相对自己的位置移动 2.配合方位名词移动,如:top.left.right,bottom 3.相对定位,位置虽然移动了,但原来的位置还在,并未脱标应用场景: 1.配合绝对定位使用(子绝父相) 2.小范围的移动使用 2.绝对定位:position:absolute: 特点:1.默认相对浏览器可视化区域的边缘移动,如果父级以及以上级有定位,则相对最近的一个级定位 2.配合方位名词移动…

CSS基础阴影相关属性设置

一.字体阴影属性名:text-shadow:水平偏移量垂直偏移量模糊度阴影颜色: html代码: <div>农夫山泉有点甜</div>css代码: div{ font-size:100px; font-weight:700; text-align:center; line-height:300px text-shadow: 98px 79px 9px pink; /*水平偏移量垂直偏移量模糊度阴影颜色 */} 注意:1.水平偏移量可以为负数,模糊度和阴影颜色是可选的 2…

CSS基础盒子相关属性总结 padding+border

1.border当个属性: 作用属性名属性值边框粗细 border-width 数字+px 边框样式 border-style solid实线.dashed虚线.dotted点线边框颜色 border-color 颜色设置连写格式:1.border:20px solid green: /*增加宽度为20px的四周边框颜色为绿色的实线 */ 2.border-top:10px solid blue: /* 增加10px的上边框颜色为蓝色的实线*/ 3.border-bottom:5px…

css的其他相关样式属性

一.颜色 1.预定义的表示颜色的单词 red,black.gray,pink...... 2.16进制表示 # + 6位16进制的数字0 1 2 3 4 5 6 7 8 9 a b c d e f 如果两两一样可以合并成3个数字 #fff; 3.rgb rgb(,,)0-255的数 4.rgba rgba(,,,)前三个是0-255的数,最后一个是0-1的数有时候a不起作用,我们会用透明度来调节0是全透明1是不透明二.一些其他的相关属性 line-height:20px;//指定每行的高度…

CSS基础知识之文本属性二三事

line-height 可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值, body { font-size: 12px; line-height: 1.5; } h1 { font-size: 36px; } 这里,body 元素的行高是 18px(12 * 1.5),而 h1 元素的行高则会是 54px(36 * 1.5). 而实际工作中我们给 body 设置一个不带单位的行高值就可以很好地保证所…

HTML+css基础 img 标签的属性

img: src=”” src是标签的属性等号右边是属性值.就是图片的路径. 路径 1. 绝对路径:按照一个路径能找到,具体到某一个盘符下,某一个文件夹内. 2. 相对路径:以当前页面为参考物,去查找. 同级目录: ./ 上一级目录: ../ 标签的属性: 书写规范:属性=”属性值” “” 双引号 ‘’ 单引号 Src 这个属性具有对外请求资源的功能.资源:图片,文档,样式,视频,音乐等等 Alt 这个属性当图片加载不出,一种对图片解释说明的.…

CSS基础-background的那些属性

background的那些属性 background:背景的意思常用的六个属性 1.background-color:背景颜色 2.background-image:背景图像 3.background-position:图片位置 4.background-repeat:图片是否重复 5.background-attachment:图片定位(fixed,scroll) 6.background-clip: 背景裁剪.有三个属性值为 border-box(图片或者颜色从边框开始); padding-…