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， 将边框颜色改为透明或白色， 显示其中一个颜色即可