html与css
文章平均质量分 58
一只叮code的小蚊子
这个作者很懒,什么都没留下…
展开
-
前端面试之HTML、CSS篇
1.语义化html标签的语义化:通过使用包含语义的标签(如header)恰当的表示文档结构原因:去掉样式后页面呈现清晰的结构;盲人使用阅读器更好的阅读;搜索引擎更好的理解页面,有利于收录;便于团队项目的可持续运作与维护2.简述对html语义化的理解让页面的内容结构化,结构更清晰,便于浏览器、搜索引擎解析,在没有样式时也可以以一种文档格式显示,且是易阅读的,有利于SEO3.DOCTYPE作用,标准模...原创 2018-05-24 23:47:55 · 321 阅读 · 0 评论 -
记一次微信小程序在安卓的白屏问题
在做小程序的时候,做到了一个限时商品售卖,用到了倒计时,因为这个原因导致了安卓手机上使用小程序时,将小程序放入后台运行一段时间后,再次进入小程序后出现了页面白屏或者点击事件失效的情况,这里记录下 1.相关代码文件 我这里是使用了自定义组件的形式来渲染的 外部的引用的自定义组件的wxml文件 /* limitCommodity是一个数组,返回的是商品对象,包含商品价格、商品结束时间、商品图片...原创 2018-12-22 09:13:12 · 1407 阅读 · 0 评论 -
mix-blend-mode及background-blend-mode实现炫酷的图片样式
在网上看到了有如相机功能的mix-blend-mode实现比较好看的图片样式,自己也想弄下,在这里记录下 1.效果图 2.mix-blend-mode相关属性 { mix-blend-mode: normal; // 正常 mix-blend-mode: multiply; // 正片叠底 mix-blend-mode: screen...原创 2018-12-21 14:49:19 · 527 阅读 · 0 评论 -
原生js实现瀑布流及微信小程序中使用左右两列实现瀑布流
使用css实现瀑布流并不实用,因为css实现的瀑布流都是以列来排列的,这里记录下用js实现瀑布流,以及微信小程序中使用左右两列来实现瀑布流 1.效果图 2.原生js实现瀑布流 html文件 <div id="root"> <div class="item"> <div class="itemImg"> ...原创 2018-12-11 08:51:23 · 1310 阅读 · 0 评论 -
美化select下拉框
在写示例的时候,用到了下拉框,但是原生的下拉框是在是有点难看,然后模仿着写了点,一个是直接在写好的Dom上进行美化,一个是用js生成,然后定义类名及相应的事件来处理 1.效果图 2.直接是在Dom上美化 html文件 <div class="root"> <div id="selectedItem"> <div id="prompt...原创 2018-12-11 08:51:34 · 1005 阅读 · 0 评论 -
实现文字的省略号
在项目中有涉及实现一行或者第几行后加省略号,在实现第几行后加省略号的时候,使用的是-webkit-line-clamp、-webkit-box-orient属性,会出现webpack打包-webkit-box-orient属性被忽略的情况,这里记录下 1.单行实现文字省略号 /* 这里要显示的设置宽度 */ overflow: hidden; white-space: nowrap; /* ...原创 2018-10-15 14:21:15 · 564 阅读 · 1 评论 -
关于偏移量及margin值合并
在写实例理解scrollWidth,clientWidth,innearWidth,availWidth及offsetWidth等的时候,意外的又发现了margin值合并的问题,在这里同时记录下 1.偏移量的区别 html文件(自己写的示例) <div id="root"> <div class="box"> <div class="co...原创 2018-10-07 17:31:10 · 361 阅读 · 0 评论 -
meta标签和navigator判断浏览器类型
在做移动端时,想起用navigator.userAgent来对浏览器类型进行判断,查了点资料,在这里总结下 还有一个就是移动端的缩放问题,在meta标签中进行设置,对部分浏览器进行强制性的限制 1.navigator的一些常用属性 navigator为window对象的一个属性,指向了一个包含浏览器相关信息的对象 navigator.appVersion 浏览器的版本号 navigator...原创 2018-09-28 10:45:11 · 439 阅读 · 0 评论 -
css实现波浪线及立方体
最近的项目有做到要画出波浪线效果,这里是利用linear-gradient来实现,也就是画圆,然后利用底色来遮住部分圆; 利用css3属性perspective加旋转实现立方体 1.css实现波浪线 html <div class="card-list"> <div class="wave-container"> <div class="...原创 2018-10-12 13:01:02 · 1341 阅读 · 0 评论 -
纯css实现瀑布流(multi-column和flex布局)
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流 先简单的讲下multi-column相关的部分属性 column-count设置列数 column-gap设置列与列之间的间距 column-width设置每列的宽度 还要结合在子...原创 2018-09-04 12:52:48 · 6292 阅读 · 0 评论 -
border画三角形
1.直接添加三角形 <div class="triangleContainer"> <div class="triangleContent"> <div class="triangle"></div> <div class="title">想你呦&原创 2018-08-21 08:41:03 · 565 阅读 · 0 评论 -
大管家笔试题(深圳)
1.css选择器有哪些,优先级如何计算 类别选择器、ID选择器、标签选择器、通用选择(*)、后代选择器、伪类选择器 !important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性 同一级别中后写的会覆盖先写的样式。 子选择器和后代选择器的区别 子选择器是选择元素的直接后代,即作用于第一个后代;后代选择器则可作用于孙子代、曾孙...原创 2018-08-19 17:18:52 · 665 阅读 · 0 评论 -
css中百分比与像素值进行运算
.user-content{ padding: 10px 0 10px 50px; width: calc(100% - 50px); /* 计算宽度,'+'或'-'符号前后有空格 */ height: 18px; }css中使用calc可以进行简单的运算: 单位可以是百分比,px,rem,em等单位 可以使用"+","-","*","/"运算符(使用"+"或...原创 2018-06-10 12:17:15 · 4598 阅读 · 0 评论 -
去除滚动条后依然有滚动效果
使用CSS去除滚动条,但依然保留滚动效果<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container{ height: 400px; width:原创 2018-06-02 15:58:06 · 1707 阅读 · 0 评论 -
前端面试题及答案(总结)
HTML原创 2018-06-14 11:24:21 · 464 阅读 · 0 评论 -
使用vue开发移动端管理后台
独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台),还是有些经验不足,包括对产品的全局思考,对插件的选择等,都有考虑不周的缺点,导致自己中途想换图形界面插件,浪费了点时间,这里记录下,总结下经验,理一下思路。 1.对于项目的一些心得与体会 首先的一点,就是,对于图形界面框架的选型,这个很重要,对于一项目来说,开始动手前就要对项目的设计图有个完整的了解,以便于自己选择插件或者框架; ...原创 2019-03-07 09:40:35 · 3355 阅读 · 0 评论