列表和超链接伪类

列表

项目符号

list-style-type 设置列表项标记的类型。

list-style-position 设置在何处放置列表项标记(outside、inside)。

list-style-image 使用图像来替换列表项的标记。

inherit 规定应该从父元素继承 list-style 属性的值

描述
none无标记。
disc默认。标记是实心圆。
circle标记是空心圆。
square标记是实心方块。
decimal标记是数字。
decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)
lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek小写希腊字母(alpha, beta, gamma, 等。)
lower-latin小写拉丁字母(a, b, c, d, e, 等。)
upper-latin大写拉丁字母(A, B, C, D, E, 等。)
hebrew传统的希伯来编号方式
armenian传统的亚美尼亚编号方式
georgian传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic简单的表意数字
hiragana标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)

就是一些项目符号的改变啦没那么复杂

a标签(超链接)伪类

a:link {color:#FF0000;} / 未访问的链接 /

a:visited {color:#00FF00;} / 已访问的链接 /

a:hover {color:#FF00FF;} / 鼠标划过链接 /

a:active {color:#0000FF;} / 已选中的链接 /

说白了就是一个超链接点进去之后变颜色了没点的颜色不变

盒子模型

属性

外边距(margin)、边框(border)、内边距(padding)、内容(content)

例:margin:0px auto; 居中

想看这个的话,就在网页上右键"检查"然后就可以看到这么一个

image-20211203191633764

在代码上移动鼠标就可以看到它的属于什么结构了

这个是大概的模型

image-20211203195056565

HTML结构代码:

<div id="container">

  <div id="header">顶部(header)</div>
  <div id="main">主体部分(main)</div>
  <div id="footer">底部(footer)</div>

</div>

用div来开头

CSS样式代码

主面板样式

 \#container { 
    width:980px; 
    margin:0px auto;/*主面板DIV居中*/
  }

顶部面板样式

\#header {
    width:100%;
    height:150px;
    border:1px #F00 solid;
  }

中间部分面板样式

 \#main {
    width:100%;
    height:400px;
    border:1px #F00 solid;
  } 

底部面板样式

  \#footer {
    width:100%;
    height:100px;
    border:1px #F00 solid;
  }

float 脱离文档流浮动

有点像我们的网页的登录选项

image-20211203201814230

这里的"客服"就是使用了右浮动

image          //对象名,这里是一张图片
{
float:right;   //向右浮动的意思
}

块级行数

行内元素

display:none; 不显示

例:原来有div的亚子

image-20211203204251723

用了none之后哇,那两个添加的div就莫得了

image-20211203204226789

display:block;变成块级元素,不能在同一行显示出来

image-20211203204945796

真的就是一块块的哈哈哈哈xswl

display:inline; 变成行内元素

就是添加一些新东西跟这些框框里的span在一起

image-20211203204825077

例:如果就用个inline会看不出来有什么变化,所以可以加个字什么的,我们加个demo1

image-20211203204556856

就是这样子哒

display:inline-block;以块级元素样式展示,以行级元素样式排列

image-20211203205125334

emmmmm这个就是又块又行的,就是既能让他有一块块的,又能让他们不会像块级行数一样分三行,咱也不知道有啥用,咱也不敢问