标签：练习 遇到 信息 dde 整合 背景色 alt hidden 换行符
/* ::-webkit-scrollbar{display: none}/* 取消overflow的默认下拉条 */ */
.v1{float: left;height: 30px;width: 30px;background-color: #333;}
.v2{height: 130px;width: 130px;background-color: #999;}
.fa{overflow: hidden;border:5px solid red; width: 1160px}
.b1{width: 230px;background-color: brown;}
.b2{width: 700px;background-color: burlywood;}
.b3{width: 230px;background-color:#333;}
.b1,.b2,.b3{height: 50px;float: left;}
.bottom{height: 100px;width: 100%;background-color: darkblue;}
只对后面的元素产生影响，后面一个元素紧贴前面一个元素（使用px的时候），如果浏览窗口变小，则区块换行，clear:none默认/both/left/right,
高度塌陷问题：父元素如果没有高度，无法被撑起
方法一：父元素overflow:hidden
方法二：在浮动元素下添加DIV{clear:both;height:0;overflow:hidden（或font-size:0 IE不允许高度为0）}
html
<div class="v1"></div>
<div class="v2">
文字环绕文字环绕文字环绕文字环绕，v2区域在v1区域下面，背景色可以看到
</div>
<div class="fa">
<div class="b1"></div><div class="b2"></div><div class="b3"></div>
</div>
<div class="bottom"></div>
<!-- 只设置高度的时候，图片等比例缩放，如果同时设置了宽度和高度，只要考虑图片比例变形的结果-->
<img src="img/top.jpg" width="100%" title="图片划上去图片出现的提示" alt="图片加载失败后出现的字">
<img src="" width="100%" >
.nav{height: 100px;background: #111}
.nav ul{list-style: none;width: 980px;background: #777;margin: 0 auto;overflow: hidden;}
.nav ul li{float: left;border-right: 1px #999 solid}
.nav ul li .last{border-right: none}
.nav ul li a{display:block;width: 139px;height: 100px;line-height: 100px;text-align: center;text-decoration: none}
.nav ul li a:hover{background:orangered}
html
<div class="nav">
<ul>
<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>
<li><a href="#">集团信息</a></li>
<li class="last"><a>集团信息</a></li>
</ul>
</div>
.imgmd{height: 500px;width: 500px;position: relative;}
.list{position: absolute;bottom: 10px;right: 5px;}
.list a{float: left;height: 30px;width: 30px;background: rgba(0,0,0,.7);margin-right: 5px;text-decoration: none;text-align: center;line-height: 30px;color: #fff}
.list a:hover{background: rgba(0,0,0,1);}
.imglist{overflow: hidden;height: 500px;width: 500px;}
html
<div class="imgmd">
<div class="list">
<a href="#img1">1</a>
<a href="#img2">2</a>
<a href="#img3">3</a>
<a href="#img4">4</a>
</div>
<div class="imglist">
<img src="../img/1.jpg" id="img1" />
<img src="../img/2.jpg" id="img2" />
<img src="../img/3.jpg" id="img3" />
<img src="../img/4.jpg" id="img4" />
</div>
</div>
.cssimg{width: 200px;height: 22px;overflow: hidden;list-style: none;}
.cssimg li{float: left;}
.cssimg li a{display: block;height: 22px;width: 50px;background: url(/img/1.jpg);text-align: center;text-decoration: none;line-height: 22px}
.p2 a{background: url(/img/1.jpg) -50px 0;}
.p3 a{background: url(/img/1.jpg) -100px 0;}
.p4 a{background: url(/img/1.jpg) -150px 0;}
.p2 a:hover{background: url(/img/1.jpg) -50px -22px;}
.p3 a:hover{background: url(/img/1.jpg) -100px -22px;}
.p4 a:hover{background: url(/img/1.jpg) -150px -22px;}
html
<ul class="cssimg">
<li class="p1"><a href="#">新闻</a></li>
<li class="p2"><a href="#">新闻</a></li>
<li class="p3"><a href="#">新闻</a></li>
<li class="p4"><a href="#">新闻</a></li>
</ul>
.textul{border: 1px solid #333;}
.textul .p1{width: 100px;text-overflow: ellipsis;white-space: nowrap;border: 1px solid #222;overflow: hidden;}
html
<ul class="textul">
<li class="p1"><a href="#">新闻sfdfsffsdfsfsdf</a></li>
<li class="p2"><a href="#">新闻</a></li>
<li class="p3"><a href="#">新闻</a></li>
<li class="p4"><a href="#">新闻</a></li>
</ul>
标签：练习 遇到 信息 dde 整合 背景色 alt hidden 换行符
原文地址：https://www.cnblogs.com/solaris-wwf/p/11614520.html
