HTML——dispaly+流式布局

目录

  1. display
  2. 流式布局

 

  1. display


    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			span{
    				background-color: paleturquoise;
    				color: palevioletred;
    				
    				/* 行内标签 设置宽高 */
    				width: 100px;
    				height: 100px;
    				
    				/* 设置宽高 有效 但是不会独占一行 */
    				display: inline-block;
    				
    				/* 有溢出使用overflow */
    				overflow: hidden;
    			}
    			p{
    				background-color: plum;
    				color: white;
    				/* 块级标签设置宽高 */
    				width: 200px;
    				height: 500px;
    				/* 行内设计 */
    				display: inline;
    			}
    			img{
    				width: 300px;
    			}
    		</style>
    	</head>
    	<body>
    		<!-- 行内标签 -->
    		<span>岱宗夫如何?齐鲁青未了。</span>
    		<b>造化钟神秀,阴阳割昏晓。</b>
    		
    		<p>荡胸生曾云,决眦入归鸟。</p>
    		<p>会当凌绝顶,一览众山小。</p>
    		<a href="http://www.baidu.com">百度一下</a>
    		
    		<img src="../img/2.png" />
    	
    	</body>
    </html>
    

     

  2. 流式布局


    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			div:hover img{
    				
    				/* 隐藏 
    				标签的位置不会被保留
    				在流式布局中 如果对应的位置空出来了 下面的内容就会向上移动
    				*/
    				display: none;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			悬浮隐藏图片
    			<br>
    			<img src="../img/2.png" />
    			诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。
    		</div>
    
    	</body>
    </html>
    

     

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值