前端Html5（24）

最新推荐文章于 2024-07-10 14:03:37 发布

面白い魂

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量336

点赞数

文章标签：前端 html5 html

本文链接：https://blog.csdn.net/weixin_64909133/article/details/122547280

版权

1.导航栏滑过有边框

<style>

margin: 0;

padding: 0;

}

nav{

width: 1200px;

height: 100px;

line-height: 100px;

margin:0 auto;

}

section{

float: left;

margin:0 30px;

position: relative;

}

/* 我们先加上伪类模拟的边框 */

section:hover::after{

content: "";

width: 100%;/* 代表宽度和包含块的宽度一样 */

/* (什么是包含块你根据谁定位谁就是包含块) */

height: 1px;

background: red;

position: absolute;

left: 0;

bottom: 5px;

}

</style>

</head>

<body>

<nav>

<section>好好写页面</section>

<section>哈哈哈哈哈哈哈</section>

</nav>

</body>

2.鼠标滑过有盒子阴影

<style>

main{

width: 1000px;

height: auto;

overflow: hidden;

background: #ddd;

margin:0 auto;

}

section{

width: 400px;

height: 300px;

background: #fff;

float: left;

margin-right: 100px;

margin-bottom: 30px;

border:3px solid #000;

transition: 0.5s;

}

section:nth-of-type(2n){

margin-right: 0;

}

section:hover{

box-shadow: 0px 0px 20px 3px #000;

transform: translateY(-5px);

}

</style>

</head>

<body>

<main>

</main>

</body>

3.鼠标滑过换东西

<style>

.small{

width: 500px;

height: 300px;

position: relative;

}

.small img{

width: 500px;

height: 300px;

position: absolute;

left: 0;

top: 0;

}

.small section{

width: 500px;

height: 300px;

background: cyan;

position: absolute;

left: 0;

top: 0;

display: none;

}

/* 你呢先让section消失鼠标滑过再出现就对了 */

.small:hover section{

display: block;

}

</style>

</head>

<body>

<section>你想写字就用他否则也是img</section>

</div>

</body>

4.鼠标滑过蒙层上来了

<style>

.big{

width: 500px;

height: 400px;

margin:100px auto;

position: relative;

overflow: hidden;

}

.big>img{

width: 500px;

height: 400px;

}

article{

width: 100%;

height: 100px;

background: rgba(255, 255, 255, 0.5);

position: absolute;

left: 0;

bottom: -100px;

text-align: center;

transition: 1s;

}

/* 鼠标滑过div 让article的bottom值变为0 从-100变成0 就u看见了 */

.big:hover article{

bottom: 0;

}

</style>

</head>

<body>

<p>里面很多文字啊</p>

<b>就是第二行因为p独占一行</b>

</article>

</div>

</body>

</html>

5.鼠标滑过虚焦别的东西出来了

<style>

.big{

width: 600px;

height: 400px;

position: relative;

}

.big>img{

width: 600px;

height: 400px;

display: block;

border:0;

}

/* 鼠标滑过big 里面的子元素img 虚焦 */

.big:hover>img{

filter: blur(2px);

}

.imgList{

width: 300px;

height: 200px;

background: pink;

position: absolute;

left: 50%;

top: 50%;

/* margin-left: 负宽度一半; */

/* margin-top: 负高度一半; */

transform: translate(-50%,-50%);

/* 默认不出 */

display: none;

}

/* 鼠标滑过big imgList出现 */

.big:hover .imgList{

display: block;

}

</style>

</head>

<body>

</div>

</body>

6.头部二级边框问题

<style>

margin: 0;

padding: 0;

}

header{

width: 1200px;

height: 100px;

line-height: 100px;

margin:0 auto;

background: pink;

}

/* 头部导航栏居右----右浮 */

.headRight{

float: right;

list-style: none;

}

/* 万能导航栏给li设置左浮给a设置左右padding 想要短的边框给a设置想要长的边框给li设置 */

.headRight>li{

float: left;

height: 97px;

background: springgreen;

border:1px solid transparent;

margin-top: 1px;

position: relative;

}

.headRight>li>a{

text-decoration: none;

color:#333;

padding:0 30px;

border-right: 1px solid #fff;

background: pink;

}

/* 你注意 li这个边框默认情况下就应该有只不过颜色你看不见而已(透明色) */

/* 鼠标滑过倒数第三个li 人家li边框颜色改变 */

.headRight li:nth-last-of-type(3):hover{

border-color:#f00;

background: #FFF;

}

/* -------二级----- */

.erji{

width: 300px;

height: 400px;

background: rgb(150, 144, 144);

border:1px solid #f00;

/* 二级永远绝对定位 */

position: absolute;

right: -1px;

top: 98px;

/* 默认消失 */

display: none;

}

/* 鼠标滑过出现 */

li:hover .erji{

display: block;

}

/* 注意这种去除一小部分的边框我们需要使用伪类 */

.headRight li:nth-last-of-type(3)::after{

content: "";

width: 100%; /* 注意他是谁的父元素的吗不是根据谁定位就是谁的 */

height: 2px;

position: absolute;

left: 0;

bottom: -2px;

background: #f90;

/* background: transparent; */

}

</style>

</head>

<body>

<li>

<div class="erji">在这里加二级</div>

</li>

</ul>

</header>

</body>

7.虚焦

<style>

img:hover{

filter: blur(10px);

}

</style>

</head>

<body>

</body>

面白い魂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端Html5（24）

1.导航栏滑过有边框<style>*{margin: 0;padding: 0;}nav{width: 1200px;height: 100px;line-height: 100px;margin:0 auto;}section{float: left;margin:0 30px;position: relative;}/* 我们先加上伪类模拟的边框 */section:hover::after{content: "
复制链接

扫一扫