新手练习

最新推荐文章于 2023-08-14 21:34:24 发布

qq_45258217

最新推荐文章于 2023-08-14 21:34:24 发布

阅读量229

点赞数

分类专栏：前端文章标签：新手

本文链接：https://blog.csdn.net/qq_45258217/article/details/100588019

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一二三四五

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动float</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }   	
        .abso{
            width: 450px;
            height: 279px;
            position: relative;
            margin: 0 auto 400px;
            border: 1px solid red;
            overflow: hidden;/*溢出处理*/
        }
        .abso:hover p{
            /* display: block; */
            bottom: 0;
        }
        .abso p{
            width: 100%;
            height: 50px;
            position: absolute;
            bottom: -50px;
            background-color: rgba(0,0,255,0.5);
            /* opacity: 0.5; */
            /* 不透明度 */
            transition: 1s;/*过渡*/
            /* display: none; */
        }
    </style>
</head>
<body>
    <div class="abso">
        <p>一二三四五</p>
    </div>
</body>
</html>

首页
- 1111
- 2222
- 3333
新闻
- 1111
- 2222
- 3333
地图
- 1111
- 2222
- 3333

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">					
			*{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}			
			.nav{
            font-size: 0px;
        	}
        	.nav li{
            	display: inline-block;
            	vertical-align: top;
            	width: 100px;
            	height: 30px;
            	font-size: 16px;
            	background: #ccc;
            	text-align: center;
            	line-height: 30px;
        	}
			.subNav{
				display: none;				
			}
			.nav li:hover .subNav{
				display: block;			
			}
			.subNav li:hover{
				color: white;
				background: lightblue;
			}			
		</style>		
	</head>
	<body>
		<ul class="nav">
		<li>
			<a href="">首页</a>
			<ul class="subNav">
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
		</li>
        <li>
        	<a href="">新闻</a>      	
            <ul class="subNav">
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
        </li>
        <li>         	
           	<a href="">地图</a>
            <ul class="subNav">
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
        </li>			
		</ul>				
	</body>
</html>