HTML--浮动float

最新推荐文章于 2021-06-05 02:05:36 发布

lkfmiaomiao

最新推荐文章于 2021-06-05 02:05:36 发布

阅读量241

点赞数

本文链接：https://blog.csdn.net/lkfmiaomiao/article/details/100586467

版权

HTML浮动float
使用浮动float的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动float</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
       
        body{
            background-color: #bbb;
        }
        .headerwrap{
        	width:100%;
            background-color: #fff;
            position:fixed;
            top:0;
            
        }
        .header{
            width: 1200px;
            height: 80px;
            margin: 0 auto;
        }
        .logo{
            width: 150px;
        }
        .nav{
            float: right;
        }
        .nav li{
            float: left;
            margin-right: 20px;
            line-height: 80px;
        }
        .nav li a{
            color: #000;
        }
          .po_logo{
        	width:30px;
        	height:30px;
        	border: 1px solid #bbb;
        	background-color:#fff;
        	color:blue;
        	position:fixed;
        	right:0;
        	top:300px;
        	font-size:20px;
        	text-align:center;
        	line-height:30px;
        	cursor:pointer;
        	/*pointer:手指状
        	 not-allowed：禁止符号
        	 progress:加载状态*/
        	
        	}
        .po_logo :hover{
        	background-color:blue;
        	color:#fff;
        	}
        	.abso{
        		width:450px;
        		height:279px;
        		position:relative;
        		margin:100px auto 400px;
        		border:1px solid red;
        		overflow: hidden;/*溢出处理*/
        		
        	}
        	.abso:hover p{/*表示是abso下p标签的  鼠标经过时*/
        		
        		bottom:0;
        	}
        	.abso p{
        		width:100%;
        		height:50px;
        		position:absolute;
        		bottom:-50px;
        		background-color:rgba(0,0,255,0.5);
        		/*最后一个值表示透明度，不会影响字体的清晰度*/
        	
        		/*opacity:0.5;*/
        			/*透明度 取值是0-1  会影响字体*/
        		
        		transition:1s;/*过渡*/
        		/*display:none;*/
        		
        	}
        	
        	
        	
    </style>
</head>
<body>
    <!-- 文档流：普通流/浮动流/定位流 -->
    <div class="headerwrap">
        <div class="header">
            <img class="logo" src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
            <ul class="nav">
                <li>
                    <a href="">百度首页</a>
                </li>
                <li>
                    <a href="">消息</a>
                </li>
                <li>
                    <a href="">日历</a>
                </li>
                <li>
                    <a href="">设置</a>
                </li>
                <li>
                    <a href="">用户名</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="po_logo">
			<p >>^</p>
		</div>
		<div class="abso">
		<img src="img/news.jpg" />
          <p>马上就下课啦！！！</p>
		</div>
    
    
</body>
</html

效果图：
在这里插入图片描述

知识点：
浮动(float)
包裹性
向上性
不重叠
定位（position）
position : fixed;(固定定位：相对于浏览器定位)
position : relative;(相对定位：相对于该元素自身所在的位置定位)
position : absolute;(绝对定位：相对于该元素有定位属性的父元素去定位，如果父元素都没定位属性，相对于body定位)
position : static;(不定位)

设置透明度的方法
background-color:rgba(0,0,255,0.5);
最后一个值表示透明度，不会影响字体的清晰度
opacity:0.5;
透明度取值是0-1 会影响字体

lkfmiaomiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML--浮动float

HTML浮动float使用浮动float的代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动float</title> <style> *{ ...
复制链接

扫一扫