布局
FIND方式
这个作者很懒,什么都没留下…
展开
-
CSS 文本溢出隐藏
单行文本溢出隐藏 overflow: hidden; /**溢出隐藏 显示省略号**/ white-space: nowrap; text-overflow: ellipsis; 多行文本溢出隐藏 overflow: hidden; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; display: -webkit-bo...原创 2020-04-22 19:40:35 · 150 阅读 · 0 评论 -
子元素浮动后、父元素坍塌
父元素设置overflow:hidden,同时height不设置或者100%或者auto 父级元素内中的最下面新增一个标签,设置clear:both; 父元素用伪类:after (推荐) ul>li ul:after{ content:""; display: block; clear:both; } li{ float:left; } ...原创 2020-04-18 11:15:27 · 107 阅读 · 0 评论 -
响应式页面 基础知识
文章目录1. 设置meta标签2. 媒体查询3. 百分比布局 1. 设置meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> §width = device-width:宽度等于当前设备的宽度 §initial...原创 2020-04-02 21:33:56 · 157 阅读 · 0 评论 -
手机页面
手机页面流程 图片命名+iconfont下载命名 创建站点 Common.css *{} body{} a{} input{} ul,li{} button{} input[type="submit"]{} img{width: 100%;} header{} footer{} 布局用弹性盒子 Html>head <!--mobile--> <meta http-...原创 2019-11-28 11:19:28 · 231 阅读 · 0 评论 -
CSS3-多媒体查询
媒体查询-针对不同媒体类型可以定制不同的样式规则 viewport(视窗) 的宽度与高度 设备的宽度与高度 朝向 (智能手机横屏,竖屏) 分辨率 多媒体查询语法 <link rel=”styleSheet” media=”all and (min-width:980px)” href=””> @media mediatype and (min-width:750px) and (...原创 2019-11-18 21:25:05 · 131 阅读 · 0 评论 -
移动端:弹性盒子 / 多列 / 适配方案
多列 colum-count 5 列数 colum-gap 50px 列间距 colum-rule dashed 3px pink 间距线 弹性盒子(浏览器适应性差,手机端用得多) 父元素{ display:flex; display:-webkit-flex; } 父元素添加 justify-content子元素水平排列 justify-c...原创 2019-11-18 21:16:49 · 410 阅读 · 0 评论 -
WEB布局
布局 大→小 div 宽高排版 再html+css填充 盒子模型 浮动流 标准流 混合流 = 浮动+标准流原创 2019-10-22 15:55:26 · 156 阅读 · 0 评论