Html5简单笔记2

qq_18831475

于 2020-03-10 10:00:54 发布

阅读量85

点赞数

分类专栏：学习小结

本文链接：https://blog.csdn.net/qq_18831475/article/details/104767994

版权

学习小结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

【Html5简单笔记】文章传送门

1-伪类

注意写的顺序：link>visited>hover>active

link:默认的链接的颜色是蓝色的，链接未访问时的样式
visited:访问之后的样式
hover:鼠标放在a元素时触发的样式
active:点击时,没有松开之前的样式

以a标签来举例：

<head>
    <style>
        /* 顺序 */
        /* 默认的链接的颜色是蓝色的，链接未访问时的样式 */
        a:link{
            color: yellow;
        }

        /* 链接访问之后的样式 */
        a:visited{
            color: green;
        }
        /* 鼠标放在a元素时触发的样式 */
        a:hover{
            color: red;
        }
        /* 点击链接时,没有松开之前的样式 */
        a:active{
            color:#000;
        }
    </style>
</head>
//======================
<body>
     <a href="http://www.baidu.com">百度</a>
</body>

2-隐藏和显示

元素的背景颜色
```
background-color: 颜色
```

隐藏方式一

 /* 隐藏 - 隐藏的元素不会占用空间 */
display:none;

隐藏方式二

/* 隐藏 - 隐藏的元素仍然是占据空间 */
visibility: hidden;

3-显示

以块元素的方式显示

 span{
            background-color: red;
            color: white;

            /* 让元素以块元素的方式显示 */
            display: block;
}

让块元素以内联元素的方式进行展示 - 不独占一整行

div{
	background-color: teal;        
	/* 让块元素以内联元素的方式进行展示 - 不独占一整行 */
	display: inline;
}

4-Background背景样式.html

背景插入图片设置

插入图片

 background-image: url("../imgs/ya.gif");

设置平铺样式

//repeat-x 水平平铺
//repeat-y 垂直平铺
//no-repeat 不平铺
background-repeat: no-repeat;

设置背景图片的位置

//顶部中间
background-position: top center;
//距离左边是400px 距离顶部是200px
background-position: 400px 200px;

固定图片的位置
```
background-attachment: fixed;
```
设置背景颜色
```
background-color: green;
```

5-font字体样式

字体家族

font-family: "微软雅黑", Courier, monospace;
//先使用微软雅黑，没有再用Courier，最后再用monospace

斜体
```
font-style: italic;
```
字体大小
```
font-weight:900;
font-size: 80px;
```

6-Text文本样式

去除默认的样式

.c1{
	/* 去除默认的样式 */
	text-decoration: none;
	color: #000;
}

设置文本的阴影部分

.c2{
	/* 设置文本的阴影部分 */
	font-size: 40px;
	color: white;
	text-shadow: 1px 2px 10px red;
	/* 文本的对齐方式 */
	text-align:right;
	}
//1px是左右（正为右负为左），2px是上下（正为上负为下），10px是模糊程度，red是阴影颜色

7-Border边框

设置边框（其一）

border:1px solid #000;
width: 300px;
height: 300px;
//边框的线为1px，样式为solid，颜色#000

设置边框（其二）

border-width: 1px;//边框1px
border-style: dashed;//样式为dashed
border-color: #000;//颜色

设置边框的阴影

box-shadow:2px -2px 8px #999;
//2px是左右（正为右负为左），-2px是上下（正为上负为下），8px是模糊程度，#999是阴影颜色

8-列表样式

<style>
    ul{
        /* 去除列表的默认的样式 */
        list-style: none;
        /* 列表样式采取的是文字的方式 */
        list-style-type: hiragana;
        /* 列表样式采取的是图标的方式 */
        list-style-image: url(../imgs/status_online.png);
    }
</style>

<body>
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">登陆</a></li>
        <li><a href="">注册</a></li>
        <li><a href="">安全退出</a></li>
    </ul>
</body>

9-Table表格样式

<style>
    #outer{
        /* width: 500px; */
        width: 50%;
        height: 250px;
        /*设置文本居中*/
        text-align: center;
        /* 设置细边框 */
        border-collapse: collapse;
    }
</style>

 <table id="outer" align="center">
 //表格对于页面居中

10-媒体查询

11-定位

11.1 绝对定位

<style>
.c1{
	/* border: 1px solid red; */
	background-color: red;
	width: 200px;
	height: 200px;
	/* 设置元素为绝对定位 - 只有设置成绝对定位对元素才允许使用top和left */
	position: absolute;
	left: 500px;
	top:200px;
	/* 该属性对值越大，越在上方，默认值是0 */
	z-index: -1;
}
</style>

11.2 相对定位

<style>
.c2{
	background-color:#000;
	width: 150px;
	height: 150px;
	/* 设置元素为相对定位 */
	position: relative;
	left:300px;
	top:-150px;
	}
</style>

相对的是自己原本的位置

11.3相对定位绝对定位配合使用

原则:外层元素使用相对定位，子元素采用绝对定位

<style>
        .c1{
            border: 1px solid #999;
            width: 150px;
            height: 150px;

            position: relative;

            top: 200px;
            left: 500px;
        }

        .c2{
            width: 22px;
            height: 22px;
            border: 1px solid red;

            position: absolute;
            top:5px;
            left: 10px;
        }
    </style>
<body>
    <!-- 原则:外层元素使用相对定位，子元素采用绝对定位 -->
    <div class="c1">
        <div class="c2">❌</div>
    </div>
</body>

12-float浮动

.c1{
	background-color: yellow;
	width: 300px;
	height: 100px;
	/* 设置左浮动 - 第一个元素就脱离了文档流 */
	float: left;
	}

13-盒子模型

margin - 外边距
padding - 内填充
border - 边框

14-水平导航栏

第一步：去除列表的样式

ul{
	list-style: none;//去除列表的开头样式
	padding: 0;//去除子列表的前面空白
 }

第二步：去除链接的默认样式

a{
	text-decoration: none;//去除链接的字体样式
	color: #000;//设置字体的颜色
 }

第三步：设置链接的样式

#nav a{
	border: 1px solid #999;//加一个1像素的黑色边框
    width: 250px;//宽度为250像素
    background-color: yellow;//背景颜色为黄色
    display: block;//将a链接以块元素的样式显示
    color: #999;//设置字体的颜色
    padding: 5px;//周围加上5像素的填充
 }

第四步：设置ul下所有的第一层的li在一行中显示

#nav>li{
 float: left;//浮空左对齐
}

第五步：设置二级菜单全部隐藏

#nav ul{
	display: none;//将里面的所有内容隐藏且不占位置
}
//顺便一提：visibility: hidden;隐藏的元素仍然是占据空间

第六步：设置当鼠标停留的时候的样式

#nav a:hover{
    background-color: red;//背景设置为红色
    color: white;//字体设置为白色
}

第七步：当鼠标滑过li的时候,那么li下的所有的ul显示

#nav>li:hover ul{
            display: block;//显示出来
        }

全部代码

<style>
        /* 第一步:去除列表的样式 */
        ul{
            list-style: none;

            /* 第三步:去除ul默认的内填充40 */
            padding: 0;
        }
        /* 第二步-去除a默认的样式 */
        a{
            text-decoration: none;
            color: #000;
        }

        /* 第四步:设置a的样式 */
        #nav a{
            border: 1px solid #999;
            width: 250px;
            background-color: yellow;

            display: block;

            color: #999;

            padding: 5px;
        }

        /* 第五 - 设置ul下所有的第一层的li在一行中显示 */
        #nav>li{
            float: left;
        }

        /* 第六 - 设置二级菜单全部隐藏 */
        #nav ul{
            display: none;
        }

        /* 第七 - a:hover */
        #nav a:hover{
            background-color: red;
            color: white;
        }

        /* 第八:当鼠标滑过li的时候,那么li下的所有的ul显示 */
        #nav>li:hover ul{
            display: block;
        }
</style>


<body>
<div id="outer">
        <ul id="nav">
            <li><a href="#">第一阶段</a>
                <ul>
                    <li><a href="#">Java基础</a></li>
                    <li><a href="#">OOP</a></li>
                    <li><a href="#">高级特性</a></li>
                </ul>
            </li>
            <li><a href="#">第二阶段</a>
                <ul>
                    <li><a href="#">mysql</a></li>
                    <li><a href="#">jdbc</a></li>
                    <li><a href="#">mybatis</a></li>
                </ul>
            </li>
    </ul>
</div>
</body>