【css】float:left不撑满容器与opacity将子元素透明demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
    ul,li{ list-style: none; margin: 0; padding:0;}
    .parent{ background-color: red; opacity: 0.5; filter:alpha(opacity=50); overflow: hidden; zoom:1;}
    ul.ullist li{ float:left;}
    </style>
</head>
<body>
    <div class=‘parent‘>
        <ul class=‘ullist‘>
            <li>首页</li><li>热门</li><li>应用</li><li>游戏</li><li>短信</li>
        </ul>
    </div>
</body>
</html>

//浮动元素不占据空间

时间： 2024-08-13 07:58:08

【css】float:left不撑满容器与opacity将子元素透明demo的相关文章

【css】容器撑满浏览器--- height:100%

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>100% Height CSS</title> <meta http-equiv="Content-Type" cont

在一个商品展示列表中,一个需求是在一个正方形的方块中,按原比例展示商品图片,但是图片比例不定,需要居中显示,高度撑满,宽度多余的隐藏. 结构: imgOuter是固定容器,宽高都是120px: CSS代码: .imgOuter{ width: 120px; height: 120px; border-radius: 10px; overflow: hidden; border: 1Px solid #d7d7d7; position: relative; z-index: 1; } img居中显

让div撑满整个屏幕的方法（css）

在body只有一个div的时候,可以通过这样的方式让div撑满整个屏幕. 1.给div设置定位. 复习一下-- css中position有五种属性: static:默认值,没有定位 absolute:绝对定位,相对于父级元素进行定位 relative:相对定位 fixed:固定定位,相对于浏览器窗口进行定位 inherit:从父元素继承定位信息除了默认值static和inherit之外,添加其他三种都可以实现窗口自适应. 代码如下: 1 <style> 2 *{ 3 margin: 0; 4

[前端]如何让图片等比例缩放，同时撑满父级容器的长或宽

[前端]如何让图片等比例缩放,同时撑满父级容器的长或宽最近碰到一个问题,如何在一个容器里同时放一张图片,而这张图片会等比例缩放,长或宽会跟着父级容器的长或宽一致. 找了一段时间,发现了 css3 中有这个属性: object-fit: contain; 具体怎么使用:见这篇文章半深入理解CSS3 object-position/object-fit属性完原文地址:https://www.cnblogs.com/htoooth/p/8676274.html

css float笔记

float 1.破坏性,让设置了float属性的元素脱离文档流 2.包裹性:div设置了float之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器.如果没有包裹性,如何实现文字环绕(float初衷) 3.清除空格:因为脱离了文档流,所以换行.空格都跟它没关系了源自:http://www.cnblogs.com/wangfupeng1988/p/4314160.html

CSS float 与清除浮动

CSS浮动规则: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 浮动1: 设置float : right,元素脱离文档流并向上向右移动,直到它的右边缘碰到包含块的右边缘. 浮动2: 当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘. 因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失. 浮动3: 如果把所有三个框都向

CSS float浮动的深入研究、详解及拓展(一)

概念目录个人感悟之CSS代码的情感化思维个人观点之浮动的意义仅仅是文字环绕显示而已个人观点之浮动的本质是"包裹及破坏" 个人观点之目前大多数浮动应用都不是浮动应该做的个人观点之浮动其实是个魔鬼.混球一.引言你我看待事物的方式不同,价值取向也不同,因为我们有着不同的世界观,价值观.这种世界观的差异不仅仅体现在实际的生活中,也反映在代码上.你我看待代码的方式,或者说是代码在我们情感层面的位置是不一样的,我这里说的是情感层面,与逻辑无关,与算法无关(虽然算法受情感影响).这种看待

CSS Float nine rules

CSS Float nine rules w3 css float nine rules CSS Float Rule1 CSS Float Rule2 CSS Float Rule3 CSS Float Rule4 CSS Float Rule5 CSS Float Rule6 CSS Float Rule7 CSS Float Rule8 CSS Float Rule9 finally 参考文章注:本文是对众多博客的学习和总结,可能存在理解错误.请带着怀疑的眼光,同时如果有错误希望能指出.

CSS float属性

抓的别人的,没有看完,先保留下来好了,感觉挺好的,毕竟刚刚接触.... 详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样.浮动的元素仍然是网页流的一部分.这与使用绝对定位的页面元素相比是一个明显的不同.绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视页面环绕一样.绝对定位的元素