页面布局
页面布局.
缓月
认真且怂~
展开
-
解决图片按照特定宽高比例显示被压缩的问题
有这么一个需求:等宽两列瀑布流在渲染显示的时候,如果宽高比例width / height >= 1的时候显示为正方形,否则显示为height = width * 1.33;。这就导致了一个问题,没有按照原宽高比显示,图片是会被压缩的,这个时候我们需要裁剪才能保证图片的画质。纠结了好久智能裁图的问题。后来发现一个很妙的css属性:object-fit: cover;,用这个属性可以完美的解决这个图片被压缩的问题。当时也想过background-size: cover的属性,但是这个只是对背景原创 2021-01-06 13:48:18 · 1086 阅读 · 0 评论 -
如何判断iPhone5 iPhone 5S iPhone6 iPhone6 plus?
不同的机型设配真的是老大难的问题,IOS和安卓运行机制也有很多的不同。记录一下对Iphone机型的判断吧。 首先是要判断IOS还是安卓,然后判断IOS的各个机型的话,获取屏幕宽度就可以了。这边查到一段代码:主要用的是var events = navigator.userAgent; console.log(navigator.userAgent); console.log(navigator.appVersion); console.log(navigator) i原创 2020-12-09 23:27:17 · 431 阅读 · 0 评论 -
文本溢出截断
{ white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}注释:white-space: nowrap; 文本强制不换行;text-overflow:ellipsis; 文本溢出显示省略号;overflow:hidden; 溢出的部分隐藏;原创 2020-08-03 20:49:48 · 479 阅读 · 2 评论 -
很可的设计,好看
以下的图片都是浏览网页看见的,然后截图下来的~侵删原创 2020-06-11 20:10:44 · 266 阅读 · 0 评论 -
element中利用tooltip实现文字超出宽度悬浮显示
实现代码: <el-tooltip :content="data.label" :disabled="data.label.length>22?false:true" placement="top"> <span class="fieldWidth">{{ `${data.label} ${ data.i...原创 2020-04-28 07:44:10 · 3166 阅读 · 3 评论 -
CSS实现渐变的树叶效果
再来更新一波以前的代码:都不记得以前我写过这些了哈哈哈,记录一下。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1....原创 2020-03-22 12:21:11 · 637 阅读 · 0 评论 -
React导航栏吸顶
CSS部分:.header-wrapper { position: fixed; left: 0; right: 0; top: 0; z-index: 2;}jsx部分: return ( <div className="header-wrapper"> <Header title="火车票" onB...原创 2020-02-13 11:39:14 · 883 阅读 · 0 评论 -
stylus安装指令
stylus安装指令:1.npm install stylus -D(-D是--save-dev的简写形式)2.npm install stylus-loader --save原创 2020-02-06 14:48:30 · 536 阅读 · 0 评论 -
一行代码使footer固定在底部
很多网页都有一个footer固定在底部,类似这样:一行代码固定:min-height: calc(100vh-200px);(这个200px是header和footer的高度.)原创 2020-02-06 14:38:45 · 402 阅读 · 0 评论 -
小程序flex容器
flex即是flexible box弹性盒子,有两个基本概念:flax container(弹性容器)和flex item(容器下的子元素)行内元素display:inline; 如果把下面这一段代码设置在小程序的wxss中,发现会是没有作用的,这是因为行内元素是不可以设置宽高的。**如果像是行内元素又想设置宽高的话,需要设置display:inline-block**这样就可以让元素在同...原创 2019-03-31 10:57:31 · 275 阅读 · 0 评论 -
icon图标右上角排列问题
icon图标右上角排列问题原创 2019-04-12 13:47:05 · 650 阅读 · 0 评论 -
view组件居中
刚刚在写收藏界面的搜索框时,发现利用flex布局里面的justify-content: center;怎么也不能做到居中的效果。好一阵郁闷。后来利用margin:0 auto;顺利解决。效果图如下:view代码: <view class='search'> <input type='text' placeholder='输入你想查找的内容' confirm-t...原创 2019-04-25 00:06:45 · 10893 阅读 · 1 评论 -
float脱离文档对高度的影响
从代码中说明吧,这两种情况下的container的高度完全不同:<div class="container"> <div class="item"/ > <div class="item"/ ></div>.container { border: 1px }.item { height: 10px; margin: 10p...原创 2019-06-23 19:54:17 · 333 阅读 · 0 评论 -
纯CSS实现网页侧边栏弹窗滑进滑出
随机打开一个网页,都会发现右侧有一个侧边栏,鼠标悬停在上边会出现一个小小的弹窗,这样子的,觉得很酷炫。 上图,这个是实现效果:(弹窗还有侧边栏的内容后期可以自己加入进去.)html部分代码:<body> <div class="subnav"> <ul> <li> ...原创 2019-09-03 11:12:14 · 3921 阅读 · 1 评论 -
css动画效果花式图片旋转效果小demo
效果样式: &emsp:这个效果主要是运用cssCSS的rotate()函数进行旋转而不变形的转换。将图片旋转的固定点设定为右上角。话不多说,上代码: html部分<div> <img src="images/1.jpg"></img> <img src="images/2.jpg"></im...原创 2019-09-03 12:30:29 · 480 阅读 · 0 评论 -
移动端适配你了解多少(一)
写在前面css像素:代码中使用的逻辑像素,衡量页面上的内容大小设备像素:即物理像素,控制设备显示的单位,与设备、硬件有关设备独立像素:与设备无关的逻辑像素,不同于设备像素(物理像素),不是真实存在的。设备像素比:定义设备像素与设备独立像素比的关系window.devicePixelRatio)设备像素比=物理像素/设备独立像素分辨率:指的是屏幕上垂直和水平的总物理像素好像面试问移动...原创 2019-10-27 14:08:52 · 1138 阅读 · 0 评论 -
移动端适配你了解多少(二)
本文内容转载于博客:移动端前端适配方案(总结) – 面试重点在网上搜了一下,很多面试都会被问到移动端适配方法的问题,最近看了一些文章,这里总结一下。首先,谈一下目前为止出现的一些关于移动端适配的技术方案: 1. 通过媒体查询的方式即CSS3的meida queries 2. 以天猫首页为代表的 flex 弹性布局 3. 以淘宝首页为代表的 rem+viewport缩放 4....转载 2019-10-27 14:43:44 · 337 阅读 · 0 评论 -
网页出现滚动条——网页的宽度超过了屏幕宽度
本文转载来自html 底部出现滚动条 去掉滚动条网页的宽度超过了屏幕宽度,所以系统自动添加滚动条。CSS 禁止滚动条,有4种方法,具体如下:1、完全隐藏在里加入scroll="no",可隐藏滚动条;<boby scroll="no">2、在不需要时隐藏指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条;反之,则显示;<boby scroll="auto"...转载 2019-10-28 17:55:36 · 4430 阅读 · 0 评论 -
CSS创建一个三角形
先来贴一波骚气的代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2019-10-29 12:46:05 · 357 阅读 · 0 评论 -
页面布局(三栏布局)
题目假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应。解答 1.浮动布局; 2.绝对定位; 3.flexbox解决; 4.table-cell表格布局; 5.grid网格布局。代码实现<meta charset="UTF-8"><meta name="viewport" content="width=device-wi...原创 2019-11-09 16:39:18 · 316 阅读 · 0 评论