随笔分类 -  html

css 实现textarea标签高度自适应
摘要：<style type="text/css"> .grow-wrap { display: grid; word-break: break-all; } .grow-wrap::after { content: attr(data-replicated-value) " "; white-space 阅读全文
posted @ 2022-06-30 11:38 <_/> 阅读(346) 评论(0) 推荐(0)
css小技巧 --> 单标签实现单行文字居中，多行文字居左
摘要：可能出现的尺寸场景: 代码如下： 阅读全文
posted @ 2019-09-11 09:53 <_/> 阅读(624) 评论(0) 推荐(0)
css实现 textarea 高度自适应
摘要：此textarea非彼textarea ，有经验的老司机们应该知道html标签contenteditable这个属性。 利用此属性使当前的标签成为可以输入的状态，等同于输入框。 演示地址：https://xibushijie.github.io/static/textareaHeihgAuto.ht 阅读全文
posted @ 2019-07-08 11:31 <_/> 阅读(12634) 评论(0) 推荐(0)
常用的flex布局
摘要：演示地址：https://xibushijie.github.io/static/flex.html 阅读全文
posted @ 2018-06-21 14:07 <_/> 阅读(235) 评论(0) 推荐(0)
切图常用的布局和效果
摘要：演示地址：https://xibushijie.github.io/static/ui.html 阅读全文
posted @ 2018-06-21 13:44 <_/> 阅读(390) 评论(0) 推荐(0)
手机端阻止页面滑动
摘要：之前开发了一个手机端页面，里面有个提交表单，操作表单时会有对应的遮罩层提示，而这个遮罩层正是常见的那种盖着全屏黑色半透明的。 问题出现于，当页面高度过长出现滚动条时，这时如果操作表单出现遮罩层，手指在点击屏幕难免会有些滑动动作，这时候页面会或上或下的滚动，这时属于正常现象。 但是页面就偏移了当前的位 阅读全文
posted @ 2018-06-15 09:48 <_/> 阅读(409) 评论(0) 推荐(0)
JS实现控制HTML5背景音乐播放暂停
摘要：首先在网页中嵌入背景音乐，html5代码为： css样式为： 通过audio的id即可控制音乐的播放（play()）和暂停（pause()），同时通过改变class改变按钮的背景图片，js代码为（切记要引入jq库）： 改进了下,让网页背景音乐支持多首歌曲，播放完在随机播放下一首并且不会和上一首重复 阅读全文
posted @ 2018-03-10 14:27 <_/> 阅读(12950) 评论(0) 推荐(0)
响应式、手机端、自适应 百分比实现div等宽等高的方法
摘要：在百分比布局中, 有时候会遇见一个头疼的问题,就是如果某个布局是正方形的话，我们在这种情况下考虑到适应各种媒体尺寸，又不能给它定固定的宽高。 之前遇见过纯色布局的结果我就用纯色图片代替实现的，现在有了这个方法，再也不用担心高度不等于宽度的问题了。 用这个方法的话无论你设置的宽度是%几，它的高度都和你 阅读全文
posted @ 2017-06-29 16:04 <_/> 阅读(1156) 评论(0) 推荐(0)
手机端自适应字体大小和元素宽度自适应
摘要：以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。 这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义，media定义好之后，拿起键盘就是干。 字体、宽高都用rem来定义，此方法略爽！ 现在找到了一个方法，页面插入一段js，切图时看设计稿多宽页面就定义多大的宽度，字体的大小和内容的宽高就 阅读全文
posted @ 2017-05-11 15:11 <_/> 阅读(13894) 评论(0) 推荐(1)
HTML，CSS，font-family：中文字体的英文名称 （宋体 微软雅黑）
摘要：宋体：SimSuncss中中文字体（font-family）的英文名称 Mac OS的一些： 华文细黑：STHeiti Light [STXihei] 华文黑体：STHeiti 华文楷体：STKaiti 华文宋体：STSong 华文仿宋：STFangsong 儷黑 Pro：LiHei Pro Med 阅读全文
posted @ 2017-04-19 10:50 <_/> 阅读(793) 评论(0) 推荐(0)
css锚点ios不兼容的方法
摘要：css锚点的正常方法： <a href="#1f"></a> <a name="1f"></a> ios出现的问题：1、有时会点击无效2、连点锚点屏幕会一点一点的向上翻 解决方法：用jquery的窗口滚动事件，让需要被锚点的元素设置距离浏览器自定义的高度。 <script> $("#maodian" 阅读全文
posted @ 2017-04-12 15:44 <_/> 阅读(1224) 评论(0) 推荐(0)
html+css底部自动固定底部
摘要：前端在切图过程中，肯定遇见过这种情况。 页面结构由三个部分组成，头部、内容、底部。 当一个页面的内容没撑满屏幕时，底部是跟着内容而并列存在的。 这个时候如果是大屏的话，底部下面会有多余的空白区域，而网页设计需求必须要底部贴近浏览器底部。 固定定位，绝度定位都不好使。 废话不多说，直接上代码实现： 阅读全文
posted @ 2017-03-28 10:32 <_/> 阅读(18838) 评论(0) 推荐(0)