选择器导航制做相关

时间 2019-11-10

标签选择器导航制做相关繁體版

原文原文链接

基础选择器html

一、多类名选择器：各个类名中间用空格隔开。浏览器

二、标签选择器：能够选择一个或者多个标签；布局

三、id选择器字体

四、类选择器：url

关于类名命名方面：不能纯数字、不能数字开头、尽可能英文字母+数字、不能相似于.div .span命名spa

id选择器和类选择器的区别：最大的区别在于可否使用次数上。code

五、通配符选择器：匹配页面全部元素。htm

字体相关blog

字体书写的顺序：input

选择器（font：font-style font-weight font-size/line-height font-family）

一些相关技巧：

一、网页广泛使用14px；

二、尽可能使用偶数数字字号，IE6等老式浏览器支持奇数会有bug；

三、尽可能使用系统默认字体；

关于color文本颜色：

<关于16进制的一些说明>

相对应的关系：0-9 A-F；

三种颜色：red green blue;

#空格1 空格2 空格3 空格4 空格5 空格6; rrggbb;

【空格12对应red 空格34对应green 空格56对应blue】

按三原色进行配色。。两两相同的才能进行缩写；

复合选择器

后代选择器：用来选择元素或元素组的后代写法就是把外层标签写在前面，内层标签写在后面，中间用空格。

b、子代选择器

c、并集和交集选择器

交集选择器

并集选择器

伪类选择器

用于某些浏览器添加特殊效果，好比给连接添加特殊效果。

a、:link /*未访问的连接*/

b、:visited /*已访问的连接*/

c、:hover /*鼠标移动到连接上*/

d、:active /*选定的连接*/

注：

使用顺序不能变

标签的显示模式

每一个块状元素（bock-level）一般会独占一行或者是多行，能够对其设置宽度、高度、对齐等属性，经常使用于网页布局和网页结构的搭建。

常见的块元素有<h1><h6><div><ul><ol><li>等、其中div是最典型的块元素。

行内元素（内联元素inline-level）不占独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，通常不能够设置宽度、高度、对其等属性、经常使用于控制页面文本中的样式。

常见的行内元素有<a><strong><b><em><i><del><s><ins>等，其中<span>标签是最典型的行内元素

块级元素的特色：

a、老是重新行开始；

b、高度行高外边距以及内边距均可以控制；

c、宽度默认是容器的100%；

d、能够容纳内联元素和其余块元素；

行内元素的特色：

a、和相邻行内元素在一行上；

b、高、宽无效、但水平方向的padding和margin能够设置，垂直方向无效；

c、默认的宽度就是它自己内容的宽度；

d、行内元素只能容纳文本或其余行内元素；

行内块元素（inline-block）：

在行内元素中有几个特殊的标签—<img/>、<input/>、<td>、能够对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特色：

a、和相邻（行内块）在一行上，可是之间会有空白缝隙；

b、默认宽度就是它自己内容的宽度；

c、高度、行高、外边距和内边距均可以控制

标签显示模式转换display

块转行内：display：inline；

行内转块：display：block；

块、行内元素转换为行内块：display：inline-block；

导航栏制做案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单栏的制做</title>
    <style>
    .nav{
        text-align: center;
    }
    .nav a{
        width: 120px;
        height: 50px;
        display: inline-block;
        background-image: url(橙色.png);
        text-align: center;
        text-decoration: none;
        line-height: 50px;
        color: #fff;

    }
    .nav a:hover{
        background-image: url(蓝色.png);
    }
    </style>
</head>
<body>
    <div class="nav"><!-- 导航栏开始了 -->
    <a href="#">一个大佬</a>
    <a href="#">两个大佬</a>
    <a href="#">三个大佬</a>
    <a href="#">四个大佬</a>
    <a href="#">五个大佬</a>
    <a href="#">六个大佬</a>
    </div>
</body>
</html>

注：

a特殊 a里面能够放块级元素

选择器 导航制做相关

选择器导航制做相关