WEB前端网页设计 HTML CSS 网页设计参数 - 列表、鼠标、块级元素
| 超链接标记<a>的伪类 | 含义 |
| a：link { CSS样式规则；} | 为访问时超链接的状态 |
| a：visited { CSS样式规则；} | 访问后超链接的状态 |
| a：hover { CSS样式规则；} | 鼠标经过、悬停时超链接的状态 |
| a：active { CSS样式规则；} | 鼠标点击不动时超链接的状态 |
一个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（left/right）让其排序
| 行内元素 | display：inline |
| 块级元素 | display：block |
| 行内块级元素 | display：inline-block |
行内元素不可以设置宽高，宽度高度随文本内容的i变化而变化，但是可以设置行高（line-height），同时在设置为边距margin上下无效，左右有效；
块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可以随意控制。
块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；
行内元素不能包含块级元素，只能容纳文本或者其他行内元素。
| 块级 元素 | h1-h6 | p | div | ul，li | ol |
| 行内 元素 | span | a | strong | B | em |
| 行内 块级 元素 | img图片 |
| 删除元素 | display：none |
有序列表：<ol>标签 <li>标签
无序列表 ：<ul>标签
项目符号 ：<li>标签
| <ul type="disc"> 或 li{ list-style-type：none； } | none 无标记 disc 实心圆 circle 空心圆 square 实心方块 decimal 数字 |
| background-image: url(图片路径); | 使用指定图片作为项目符号 |
| ul { padding-left: 2rem; //设置列表左边间隔以放置图片 list-style-type: none; //取消默认的项目符号图标 } ul li { list-style-type：none //先取消项目符号 padding-left: 2rem; //设置列表左边间隔以放置图片 background-image: url(图片路径); //为每一个li插入图片 background-position: 0 0; //定位为最左和最上 background-size: 1.6rem; //为图片与li设置0.4rem的间隔 background-repeat: no-repeat; //取消默认的图片复制，就显示一个图标 } |
用border边框做三角形
| .a{ width: 50px; height: 50px; border: black solid; border-width: 30px; border-color: red green yellow blue; /*上右下左*/ border-top-width: 0px; border-left-color: rgba(0,0,0,0); border-right-color: transparent; } | #用边框做三角形 将长、宽改成0px， 将边框颜色改为透明或白色， 显示其中一个颜色即可 |