![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5/CSS3
IT淘金者
立志成为行业布道师的一名前端程序猿
展开
-
CSS布局解决方案(终结版)
前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局。居中布局水平居中1)使用inline-block+text-align(1)原理、用法原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。用法:对子框设置display:inline-block,对父框设置text-align:center。(2)代码实例 DEMO .child {displa转载 2020-11-05 15:43:17 · 104 阅读 · 0 评论 -
设置图片元素上下垂直居中的7种css样式_赵一鸣博客
设置图片元素上下垂直居中的7种css样式阅读(9548) @2018-07-15 14:13:34图片、文字左右居中很简单,只需要以下代码: 1 text-align:center; 文字上下居中也很简单,假设外部div元素的高度是100px,那么: 1 line-height:100px; line-height不适用于图片...转载 2020-11-09 15:11:11 · 4220 阅读 · 0 评论 -
DIV或者DIV里面的图片水平与垂直居中的方法 - 站住,别跑 - 博客园
DIV或者DIV里面的图片水平与垂直居中的方法<div class=“box”> <img /></div>水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中。 margin:0 auto —— 这是针对块元素的水平居中方法垂直居中的常用方式: vertical-align: middle;——这个垂直居中属性,只对 inline 或者 inline-block 元素有效。...转载 2020-11-09 15:10:37 · 1344 阅读 · 0 评论 -
JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项。不管怎么样,树控件都是很多项目里面不可或缺的组件之一。今天,博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享,希望能帮大家找到最合适的控件。还是那句话:控件没有最好,只有最合适。一、JQuery树形控件Jquery树形控件是一款基于JQuery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件,网上很多地方都能看到它的影子。转载 2020-11-09 15:09:16 · 258 阅读 · 0 评论 -
HTML5 新标签总汇
HTML5 新标签总汇2010-12-16 20:44聂微东 阅读(5060) 评论(8)编辑收藏HTML5新标签总汇: 有问题欢迎指出,有关于CSS3方面的知识点较多,下周一前整理出来.<article> 标签定义外部的内容(外部内容如blog,news)。 使用后感觉和P差不多,语义化的标签。<aside> 标签定义article以外的内容(可用做文章的侧栏). 语义化的标签。<audio>标签定义音...转载 2020-11-02 19:00:50 · 74 阅读 · 0 评论 -
vue 集成html5 plus - 懒懒de尐彪 - 博客园
首先要安装一个包 vue-html5plus npm i vue-html5plus -S然后配置这个文件在main.js添加一串代码 var onPlusReady = function (callback, context = this) { if (window.plus) { callback.call(context) } else { document.addEventListener('plusready', callba.转载 2020-11-02 18:59:38 · 502 阅读 · 0 评论 -
CSS的4个简写
CSS的4个简写2010-12-13 18:50聂微东 阅读(1547) 评论(3)编辑收藏1.background 简写属性在一个声明中设置所有的背景属性:background-color background-image background-repeat background-attachment background-position例如: background: #444444 url(image.png) no-repeat fixed top;...转载 2020-10-31 15:50:20 · 113 阅读 · 0 评论 -
深入理解CSS盒模型 - 程序猿的程 - 博客园
深入理解CSS盒模型本文是学习中传思客在慕课网开的课程《前端跳槽面试必备技巧》的学习笔记。课程地址:https://coding.imooc.com/class/evaluation/129.html#Anchor。 如果你在面试的时候面试官让你谈谈对盒模型的理解,你是不是不知从何谈起。这种看似简单的题其实是最不好答的。 下面本文章将会从以下几个方面谈谈盒模型。基本概念:标准模型 和IE模型 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 实例题(根据盒模型解释边距重..转载 2020-10-31 15:48:52 · 131 阅读 · 0 评论 -
CSS布局解决方案(终结版)
前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局。居中布局水平居中1)使用inline-block+text-align(1)原理、用法原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。用法:对子框设置display:inline-block,对父框设置text-align:center。(2)代码实例<div class.转载 2020-10-31 15:47:14 · 93 阅读 · 0 评论 -
css框架:五大css流行框架的总结-css教程-PHP中文网
本篇文章给大家带来的内容是关于css框架:五大css流行框架的总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。如今,CSS框架越来越受欢迎,可以说已经应用到每一个网站上了。作为开发工具,CSS框架一直处于不断进化和改进的状态,因此我们强烈建议您关注眼下的趋势。这篇文章会带您了解2017年最流行的5种CSS框架。Bootstrap这个框架是GitHub的明星产品之一,被认为是拥有最好的响应性的CSS框架。专为前端开发而设计,有助于构建web设计理念、移动优先项目、网格系统、排版和转载 2020-10-31 15:42:25 · 175 阅读 · 0 评论 -
2018年最好用的20个Bootstrap网站模板
Bootstrap是目前最受欢迎也是最简洁的建站方式之一,尤其是伴随移动端的发展,响应式设计已经毫无疑问成为了网页设计的趋势,网站建设要求兼容手机端已经是一种刚需,也成为提升用户体验的一种必要方式。但这无疑会加大设计师和前端人员的工作量,基于这样的情况,为了最大程度的节约成本,选择使用响应式的前端框架网站模板越来越受欢迎。今天,Mockplus为大家精选了20个免费的高品质Bootstrap网站...转载 2020-03-20 22:40:11 · 2037 阅读 · 0 评论 -
Chrome浏览器12px问题-webkit-text-size-adjust: none 已失效的解决方案
对于早期的chrome, 如果要想显示12px以下的字体,一般通用的方案都是在对应的元素中添加div { -webkit-text-size-adjust: none;}但是我今天遇到的需求,添加了之后没有反应,而且浏览就根本不支持这种写法。在网上看到了博客《Chrome浏览器不支持字体小于12px的解决办法》看到了解决方案,使用transform + display, 于是便实践了...原创 2020-03-15 23:55:41 · 2378 阅读 · 0 评论 -
SVG画一个箭头
参考菜鸟手册: https://www.runoob.com/svg/svg-tutorial.html打开菜鸟中的在线工具在可视化截图拖拉元素绘制箭头点击command + U 查看源码将源码拷入html代码中,查看效果最后,贴出源码供大家参考<!DOCTYPE html><html><body><svg...原创 2020-03-13 23:12:09 · 778 阅读 · 0 评论 -
CSS实现div梯形分割
原理使用的border边框属性结合svg 转换详见代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css实现div边框斜角</title> <style type="text/css">.lab...转载 2020-03-11 22:50:04 · 2526 阅读 · 2 评论 -
前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)持续更新
Vue面试题生命周期函数面试题 1.什么是 vue 生命周期2.vue生命周期的作用是什么3.第一次页面加载会触发哪几个钩子4.简述每个周期具体适合哪些场景5.created和mounted的区别6.vue获取数据在哪个周期函数7.请详细说下你对vue生命周期的理解?vue路由面试题1.mvvm 框架...转载 2019-08-24 10:55:41 · 325 阅读 · 0 评论 -
绝对定位的div图片居中自适应
需求点固定定位div中添加图片内容,保证图片垂直居中,并且自适应。一般在第三方UI组件中,这种布局需求较为常见解决方案一 (亲测有效)HTML代码:<div class="el-carousel__item is-active is-animating"> <img src="/static/img/login-bg3.51c5580.png" alt="">...原创 2019-08-09 23:33:31 · 1508 阅读 · 0 评论 -
图片做背景撑开div
需求点:设计师给了一张超大背景图,需要做一个不知道大小广告位,要求就是要把图片撑满整个页面,而且还得保证自适应。解决方案一 (亲测有效)HTML代码:<div class="wrap"></div>CSS代码:.wrap{ position: relative; padding-bottom: 35%; background-image: url(/s...原创 2019-08-09 23:03:20 · 3723 阅读 · 0 评论 -
理解HTML语义化
1、什么是HTML语义化?<基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化?为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看; 用户...转载 2019-05-24 16:10:01 · 141 阅读 · 0 评论 -
网页编排规则
所谓大纲,简单来说就是文档中各内容区块的结构编排。可以分为显式编排和隐式编排2种方式。显式编排:明确使用section元素创建文档结构,在每个内容区块内使用标题隐式编排:不明确使用section等元素,根据页面中所书写的各级标题等把内容区块自动创建出来。隐式编排容易让自动生成的整个文档结构和想要的文档结构不一样,而且也容易引起文档结构的混乱,因此需要尽量使用显示编排。不同的内容区块可以使用...转载 2019-05-24 16:54:02 · 229 阅读 · 0 评论 -
HTML5知识点汇总
1、HTML5新特性用于绘画的canvas标签 用于媒介回放的video和audio元素 对本地离线储存的更好支持 新的特殊内容元素,如:article、footer、header、nav、section、aside、hgroup、figure 新的表单控件,如:calendar、date、time、email、url、search、number、range、DatePickers ...原创 2019-06-13 09:37:59 · 97 阅读 · 0 评论 -
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
最近看了很多这方面的文章,能搜到的基本看了个遍,但感觉还是似懂非懂,知道这个东西,很难说出这是个什么东西,先整理一些概念,慢慢消化,以后慢慢探索其中的原因。1、PX(CSS pixels)1.1 定义虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px。1.2 注意在CSS规范中,长度单位可以分为两...转载 2019-06-28 16:13:22 · 417 阅读 · 0 评论 -
在div中设置文字与内部div垂直居中
在div中设置文字与内部div垂直居中要实现如图一所示的结果:html代码如下:复制代码 商品管理后台首页 这是一个测试要居中 我是div中的文字 复制代码相应的less代码复制代码.content{width: 500px;height: 200px;border:1px s...转载 2019-08-09 23:42:04 · 2211 阅读 · 0 评论 -
实现div里的img图片水平垂直居中
body结构<body> <div> <img src="1.jpg" alt="haha"> </div></body>方法一:将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。<style type="text...转载 2019-08-02 09:22:41 · 156 阅读 · 0 评论 -
CSS3笔记之基础篇(三)文字与字体
要点一、text-overflow与word-wraptext-overflow:设置是否使用一个省略标记(...)标示对象内文本的溢出。word-wrap:设置文本行为,当前行超过指定容器的边界时是否断开转行。语法如下:注意:要实现文字溢出时产生省略号的效果,需要把这两个属性联合起来使用,代码如下:text-overflow:ellipsis; overflow:...原创 2019-05-22 21:40:41 · 168 阅读 · 0 评论 -
CSS3笔记之基础篇(二)颜色和渐变色彩
效果一、颜色之RGBARGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。语法:color:rgba(R,G,B,A)以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有...原创 2019-05-22 16:14:01 · 676 阅读 · 0 评论 -
CSS3笔记之定位篇(一)relative
知识点1:relative和absolute relative: 相对自身,并会限制内部absolute元素层叠 absolute: 相对容器,并受到父类容器relative的影响,比如:overflow:hidden/scroll fixed: 不受relative限制,只受z-index的限制知识点2:定位 相对自身 无侵入: relative的元素只会改变自己...原创 2018-11-02 14:39:35 · 373 阅读 · 0 评论 -
CSS3笔记之定位篇(二)z-index
知识点1:z-index基础 z-index:auto; 默认值 z-index: <integer> 整数 z-index: inherit 继承 不考虑css3 还有定位元素的z-index才有作用知识点2:z-index与定位元素 无嵌套:后来居上,哪个大哪个上//在没有添加z-index属性时,如果两个图片有重叠,默认为图片2覆盖图片1 ...原创 2018-11-06 23:27:46 · 255 阅读 · 0 评论 -
CSS3笔记之基础篇(一)边框
效果一、圆角效果border-radius 实心上半圆:方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。div { height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径...原创 2019-05-22 15:27:48 · 111 阅读 · 0 评论 -
【前端面试】HTML5+CSS3初级面试1
最近刚好在看前端的面试,把看到的内容总结一下,方便大家一起学习。1、简单说一下对HTML5+CSS3的了解。HTML5和CSS3不仅是两项新的Web技术标准,而且代表了下一代HTML和CSS技术。其未来的发展前景已经可以预见,那就是HTML5必将被越来越多的Web开发人员所使用。各大浏览器厂家已经积极更新自己的产品,以更好地支持HTML5.它的优势主要有以下几点:1)...转载 2019-07-02 11:27:01 · 253 阅读 · 0 评论 -
HTML、CSS知识点总结,浅显易懂。
一,html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有...转载 2019-05-24 10:05:22 · 269 阅读 · 0 评论 -
深入浅析HTML5中的article和section的区别
在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。内容区块是指将HTML页面按逻辑分割后 的单位。例如对于书籍来说,章、节可以称为内容区块;对于博客网站来说,导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。 在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素,这两个元素是什么意思?通...转载 2019-05-24 16:01:19 · 4650 阅读 · 0 评论