随笔分类 - html+css布局
摘要：轮播图通过移动照片的位置实现，这里主要用到的是相对、绝对定位，css动画等。 首先现将html框架布局做好： 1、先给一个大的盒子用来放照片盒子，宽度随意 2、大盒子下创建一个盒子用来放照片，宽度随着照片的张数乘上大盒子就行， (大盒子下可以放一张与轮播图尺寸一样的照片用来撑开盒子高度，) visi
阅读全文
摘要：关于弹性盒子前面总结了弹性盒子的基本使用，确定主轴、对齐方式、交叉轴等。 此次是弹性盒子的其他特性，结合常用的圣杯布局来详细阐述： 圣杯布局： 圣杯布局是两边固定宽度，中间自适应的三栏布局。 中间栏放到文档流前面，先行渲染。 目的是为了解决三栏布局。 可以用浮动来实现，这里主要以弹性盒子的特性来实现
阅读全文
摘要：* { margin: 0; padding: 0; box-sizing: border-box; } ul,li { list-style: none; } /* 公共样式 */ /* body的背景颜色 */ body { background-color: #f4f4f4; } /* 文本居
阅读全文
摘要：拿到一个页面 首先要做的就是将初始化工作做好，即将所有的外边距，内边距等归0； 其次是将整个页面按照设计图做好规划，将头部nav、尾部footer、列表将整体的框搭出来； 最后在根据不同的小块再次细分不同的块，细化到最后一个小块，将整体的布局做好后在来细化内容；
阅读全文
摘要：弹性布局--flex布局给盒子提供最大的灵活性。 解决元素居中问题(主要是垂直居中) 自动弹性伸缩，合适适配不同大小的屏幕，和移动端 使用弹性布局个人觉得分为几个步骤： 1、要将盒子设置成弹性盒子： dispy:flex; 2、要确定一个主轴方向： flex-direction:row（横向） |r
阅读全文
摘要：当一行的文本数量过多时需要做一个溢出处理，即将多余的部分做成省略号。 必须做到以下三步： 1、设置所有文本不换行，即强制在一行内显示所有的文本 white-space: nowrap;(white-space的默认值是normal换行显示) 2、设置字体隐藏，即将超出长度的部分做隐藏处理 overf
阅读全文
