display fixed平分li

display:flex 布局详解（2）

1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现 HTML代码: <div class="demo"> <div class="inner"> <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p> </div> </div> CSS代码: .demo{ width: 500px;

LI 导航

HTML: <div class="my_nav"> <ul> <li class="tiao cur" id="order_tab_1"><a href="#">待付款</a></li> <li class="tiao " id="order_tab_2"><a href="#"

今天做项目的时候发现动用position: fixed做弹窗时,用margin-top:50%这样外边距来响应式的控制位置时,在微信里打开页面的弹窗,弹窗在手机上显示的位置和实际上在手机上的位置不一样,让人点击上面时并没有反应,其实他实际位置时在眼睛看到的位置上方许多,点击上方许多的位置时,才触发眼睛看到的地方的元素被点击的事件,这是为毛啊?UC浏览器都是正常的,微信最近更新作死吗,害我调整了好久,最好用top来代替margin-top了贴上问题代码 <div class="pop_bg

css显示display、可见性visibility、定位position、对齐

隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden",但是这两种方法会产生不同的结果. display:none隐藏某个元素,且隐藏的元素不会占用任何空间,即该元素不但被隐藏了,而且原本占用的空间也会从页面布局中消失. visibility:hidden隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,即该元素虽然被隐藏了,但仍然会影响布局. 块元素:占用全部宽度,可设置高度和宽度,前后都是换行符,如

关于锚点定位，ul设置fixed后，div被覆盖一部分的问题

例如: 问题: 刚开始的时候 .ul是正常显示的,当页面的滚动条滚动到一定的高度是 ,ul就被设置为 position:fixed:那么点击 li相对应div就会被固定定位的ul覆盖住一部分. 解决办法: 给div里边加了一个a,判断当滚动条滚动到一个程度就给ul为 position:fixed,a标签就设置绝对定位向下移动比 ul高度有一点的距离就可以了. html: <div class="culture_activity_left left"> <ul

display用法：

用法: 1.display:fixed: 存在于position定位top,left,right,bottom,fixed:脱离文档流的针对于浏览器窗口大小定位,可以更好的解决"缩小浏览器窗口大小,滑动滚轮始终置于底部"的问题. 2.display:table: display:table-cell; vertical-align:middle; 垂直居中: 3.display:inline: display:inline-block: 不用浮动可以在一行上显示,减少浮动.

div,li,span自适应宽度换行问题

<ul class="news"> <li><span class="lbl">右对齐,换行显示的解决方法</span><span class="date">2010-8-26</span></li></ul> .news li{ position:relative; float:left; width:260px; //设定宽

li在IE中底部空行的BUG

li在IE中底部空行的BUG 但是这次li在IE中底部出现的不是3像素而是一整条空白行,如图:HTML代码: <ul> <li><a href="#">第1条连接</a></li> <li><a href="#">第2条连接</a></li> <li><a href="#">第3条连接</a></l

css案例学习之ul li dl dt dd实现二级菜单

效果代码实现 <!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"> <head> <meta http-equiv="

IE6/7中li浮动外边距无法撑开ul的解决方法

昨天群里有人提出了这样的问题: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&

【IE6的疯狂之九】li在IE中底部空行的BUG

曾经写过[IE6的疯狂之六]li在IE中底部3像素的BUG(增加浮动解决问题),原文地址:http://www.css88.com/archives/421: IE6 BUG大全: http://www.css88.com/archives/579 但是这次li在IE中底部出现的不是3像素而是一整条空白行,如图: HTML代码: 1 <ul> 2 <li><a href="#">第1条连接</a></li> 3 <

【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 200px;/*浏览器默认字体大小16px*/ margin:1em;/*em以父元素字体为基准*/ padding: 1rem;/*rem以根元

jquery怎么选择嵌套的第一层的li

$(".ra").click(function(){ var id=$(this).children("ul").attr("id"); if(id=="clo"){ $(this).children("ul").slideDown('slow'); $(this).children("ul").attr("id","ope"); }else{ $

display: none; 与 jq show方法之间的联系

1. 定义四种常用隐藏元素的方式,然后调用 jq 的 show 方法显示,观察各原先隐藏元素的 display 表现,结合 jq 源码,show 方法设置元素 display 属性值为隐藏时的 display <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

css 解决fixed 布局下不能滚动的问题

如果我们布局的是后是fixed并且想要高度为100%的时候,我们一般会这样设置: div { display:fixed; height:%; overflow:scroll; } 但是这样并不会出现滚动条,正确的做法应该设置top和bottom为0: .fixed-content { top: 0; bottom:0; position:fixed; overflow-y:scroll; overflow-x:hidden; }

三个<li>元素放一行

<ul><li style="float:left;display:inline;">0</li><li style="float:left;display:inline;">0</li><li style="float:left;display:inline;">0</li></ul> 只要给li加上 style="float:left;d

display: table 实现menu等高居中排列

display: table 属性,顾名思义,就是就像表格一样陈列元素,设置这个属性之后,就具有了表格所特有的某些特性,比如居中对齐之类的. 本篇文章要实现的需求也是非常常见的——左侧栏menu菜单居中显示,效果如下图所示具体的代码如下 <ul> <li><span class="text">苹果</span></li> <li><span class="text">橘子</

css display table使用小例子实验

display的下面: table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row 此元素会作为一个表格行显示(类似 <tr>). table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) border-collapse: collapse: 布局元素之间使用何种形式的边框,collapse为共用边框: separate: 使用各自独立的边框:如果声明了border-collapse

DIV+ul+LI实现表格效果以及div带滑动条

写这个是为了给自己一个好好的笔记,以免下次需要的时候又到处找,费神费事费时费力.开始吧! 1.先看看效果 2.网页代码 <!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/xht

display inline-block 间隔

1.如果li横排用display:inline-block; 则li之间不能有间隔必须连着一起,所以才一般用float:left; .today-wrap{ position: relative; background: $white; height: 220px; padding-top: 40px; padding-bottom:40px; li{ float: left; width: 50%; &:last-child{ &:before{ content: ''; positi

CSS——display（Block none inline等）属性的用法

在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示讲解方法来学习和了解DIV CSS display. 目录 CSS display使用 display的值有哪些 css display block显示 css display none隐藏 css display inline 一.CSS display使用 - TOP 以下为DIV