布局
卡洛背心
前端攻城狮,记录工作的点点滴滴。
展开
-
移动端Web页面适配方案(附完整代码)
移动端web页面的开发,由于手机屏幕尺寸、分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问题。代码如下:(function (window, document) { // 给hotcss开辟个命名空间 const hotcss = {} ; (function () { // 根据devicePixelRatio自定计算scale // 可以有效解决移动端1px这个世纪难.原创 2021-09-06 16:27:32 · 1165 阅读 · 0 评论 -
H5页面头部吸顶,底部吸底,中间自适应滚动布局
效果如下:代码如下:<template> <div class="home"> <div class="title">{{ title }}</div> <div class="content"> <ul> <li>1.这是内容,这是内容……</li> <li>2.这是内容,这是内容…原创 2021-01-13 18:52:00 · 945 阅读 · 0 评论 -
前端纯CSS实现动画打字效果,中英文都支持
效果如图:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .typin原创 2021-01-10 18:27:18 · 300 阅读 · 1 评论 -
用css实现三角形,正三角、倒三角、左三角、右三角
正三角: width: 0; height: 0; border-right: 5px solid transparent; border-left: 5px solid transparent; border-bottom: 5px solid #333333;倒三角: width: 0; height: 0; border-right: 5px solid tran原创 2020-11-30 15:27:32 · 1143 阅读 · 0 评论 -
Vue.js实现手风琴组件,前端手写组件逻辑及动画(看完秒懂)
个人在开发中,使用较多的H5组件库是Vant,之前对于手风琴这种业务场景,直接引入手风琴组件进行开发了。这次由于设计图要求较高,所以使用vant组件库继续开发,需要修改较多的样式,索性自己手动实现一下。官方文档的实例如下:通过 accordion 可以设置为手风琴模式,最多展开一个面板,此时 activeName 为字符串格式。<van-collapse v-model="activeName" accordion> <van-collapse-item title="标题1原创 2020-11-16 11:55:48 · 2574 阅读 · 1 评论 -
CSS实现超过一行(两行)展示省略号……
//超过一行省略号overflow: hidden;white-space: nowrap;text-overflow: ellipsis;//超过两行省略号overflow: hidden;text-overflow: ellipsis;display: box;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;原创 2020-11-09 17:13:04 · 577 阅读 · 0 评论 -
Vue实现移动端APP的方格布局横向滑动翻页带滚动条
在移动端,横向滚动的时候,使用一个小小滚动条,说明是可以左右滑动的。在这里不是直接左右滑动切换到下个页面,而是div左右滑动。效果如哈罗单车这种金刚区的交互。下面蓝色的是滚动条我自己实现效果如下:代码如下:<template> <div class="selfHelp"> <div class="scrollContent" ref="scrollCon" @scroll="scrollCon"> <div class="co原创 2020-10-27 16:04:21 · 2243 阅读 · 9 评论 -
div块中,让一行中的最后一列的右边距隐藏
div代码中如何让一行的最后一列的右边距隐藏这里最重要的就是:last-child的使用.exchange-purchase-card { margin-right: 6px; cursor: pointer;}.exchange-purchase-card:last-child{ margin-right: 0px;}原创 2020-09-08 16:14:52 · 527 阅读 · 0 评论 -
将页面划分为左右两份,左右两边各按自己的滚动条进行滚动
将页面划分为左右两份,左右两边各按自己的滚动条滚动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-09-02 14:33:14 · 1565 阅读 · 1 评论