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 · 1311 阅读 · 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 · 6295 阅读 · 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 · 4600 阅读 · 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 · 3359 阅读 · 0 评论