html/css/css3
关注
分享
扫一扫
html/css/css3
姜无忧
莫问前程凶吉，但求落幕无悔
展开
-
普通的html页面中ie11的兼容性问题
项目背景：做一个公司的门面网站，响应书布局，适配各种设备及分辨率技术：media媒体查询、flex布局、vue.js实现方式：<!DOCTYPE html><html><head> <title>资产</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-原创 2021-01-22 13:41:48 · 714 阅读 · 0 评论 -
vue结合css3动画写弹幕
比如说：每隔8秒一次弹幕vue<template> <div class="homelist"> <div class="barrage-div" ref="marquee"> <img :src="mathimg"/> 新订单来自 {{mathname}} {{mathtime}}前 ...原创 2019-06-07 23:24:00 · 2138 阅读 · 1 评论 -
css3实现弹幕
vue<template> <div class="homelist"> <div class="barrage-div"> <img :src="mathimg"/> 新订单来自 {{mathname}} {{mathtime}}前 </div> </div>...原创 2019-04-01 15:00:44 · 2339 阅读 · 0 评论 -
手机端如何使得头部底部固定，中间不被遮住且展示完整信息
这里用的是flex#app{ display: flex; flex-direction: column;}中间部门写 flex:1; 所以，底部和顶部会被撑开，且固定。（这里的中间部分我用的是h5新标签，当然可以用div来写）。注：这里面的px应当用rem转换，这里我并没有写，没有介绍。写手机端的时候，是一定要转换的。这里主要讲的是，头部和底部固定。全部代码如下：...原创 2018-11-07 14:48:54 · 4047 阅读 · 0 评论 -
css3的calc属性用于动态计算长度值
calc() 函数用于动态计算长度值。 calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小 calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小 vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%,100代表100%） vh：视窗高度的百分比 vmin：当前 vw 和 vh 中较小的一个值 vmax：...原创 2018-08-16 17:23:34 · 1644 阅读 · 0 评论 -
vue项目如何加使用引导
我先安装了animate.css，因为这里我引用了动画，懒得自己写了，在main.js作了如下配置：import animate from 'animate.css'Vue.prototype.animate = animate然后再Main.vue开始写代码 <div id="backBox" v-show="isShow"> <div c...原创 2018-08-03 19:02:49 · 5531 阅读 · 4 评论 -
图片大小设置background-size
<body><div> My name is 叶落森<br> My name is 叶落森<br> My name is 叶落森<br> My name is 叶落森<br> My name is 叶落森<br></div></body>原创 2018-07-23 12:57:45 · 26805 阅读 · 0 评论 -
flex和rem实现手机端页面案例
登录页面案例代码：html代码：<!DOCTYPE html><html><head> <title>登录</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-w原创 2018-07-21 15:24:58 · 1063 阅读 · 0 评论 -
flex布局介绍和简单案例
flex布局可以帮我们快速布局一些区块,实现你想要的效果,不用再去float,position之类的.我们在布局网页的时候很多时候都是一些特殊布局,flex就能帮我快速去布局,不需要去定位.任何一个盒子都可以指定为flex布局,但是要注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。基本案例1：<ul> <li...原创 2018-07-21 15:07:42 · 8899 阅读 · 0 评论 -
哀悼日网站全站变灰
全网站变灰，我们可以使用css的filter属性。<style type="text/css"> html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter...原创 2020-04-07 14:54:02 · 477 阅读 · 0 评论 -
响应式布局的实现@media
好久没写响应式页面了，这个是之前公司的一个项目。今天打开了设计文档，按照设计文档的要求大体做了一下。当然里面是存在细节问题的。如图：（基础讲解见我另一篇博客https://blog.youkuaiyun.com/xiasohuai/article/details/81147763）这个效果如何实现呢？当然首选的就是 “媒体查询@media”了 。媒体查询应当怎么写呢？CSS样式分为：内联式...原创 2018-08-19 11:03:37 · 4752 阅读 · 0 评论 -
px、em、rem区别
PXpx像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 EMem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。EM特点1. em的值并不是固定的；2. em会继承父级元素的字体大小。注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那...原创 2018-08-22 17:43:22 · 151 阅读 · 0 评论 -
浏览器重排和重绘
一个页面由两部分组成：DOM：描述该页面的结构render Tree（渲染树）：描述 DOM 节点 (nodes) 在页面上如何呈现。（解析完DOM+css之后会生成一个渲染树 Render Tree，就是 dom 和 css 的一一对应关系。DOM+css= Render Tree ）如何理解重排和重绘？重绘：当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 r...原创 2018-08-19 22:25:34 · 203 阅读 · 0 评论 -
css超出一定宽度用省略号代替
css超出一定宽度用省略号...代替，如何实现呢？如下代码：.content .navleft .histiry>ul{ width: 200px;}.content .navleft .histiry>ul li{ margin-left: 10px; height: 20px; line-height: 20px; color: #999; font...原创 2018-08-19 11:22:28 · 4155 阅读 · 0 评论 -
css3媒体查询@media
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。（IE9+）当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。（项目案例讲解，见我另一篇博客https://blog.youkuaiyun.com/xiasohuai/article/details/81836036）语法：@media mediatyp...原创 2018-07-21 19:00:00 · 1011 阅读 · 0 评论 -
懒加载和预加载
data-src是html5的新属性，意思是数据来源。懒加载原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。概念：懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。优点：页面加载速度...原创 2018-07-08 16:39:45 · 346 阅读 · 0 评论 -
如何实现按钮水平居中
button是一个行内块级元素display:inline-block;所以处理方式很简单，可以用以下两种方式：方式一： <div style="text-align:center"> <button>按钮居中</button> </div>方式二：<div> ...原创 2018-06-07 18:26:53 · 254640 阅读 · 9 评论 -
css水平垂直居中
（1）父元素position:relative，子元素position:absolute兼容性：适用于所有浏览器（PC端推荐）<div class="parent"> <div class="child"></div> </div> .parent{ width: 200px; height: 200px;...原创 2018-06-07 18:11:10 · 228 阅读 · 0 评论 -
css水平居中
水平居中（方法7推荐移动端）（1）margin：0 auto;text-align:center;兼容性：适用于所有浏览器<div class="parent"> <div class="child"></div></div>.parent{/*父元素可以无宽度和高度*/ width:500px; height:300...原创 2018-06-07 17:56:45 · 263 阅读 · 0 评论 -
css行内元素和块元素
一.块级元素和内联元素的区别：1.块元素，总是在新行上开始；内联元素，和其他元素在一行；2.块元素，能容纳其他块元素或者内联元素；内联元素，只能容纳文本或其他内联元素；3.块元素中高度，行高以及顶和底边距都可以控制；内联元素中高，行高及顶和底边距不可改变。4.对于行内元素来说margin只有margin-left和margin-right有效，padding只有padding-left和...原创 2018-12-13 12:58:06 · 402 阅读 · 0 评论 -
BFC详解
定义:BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC布局规则：内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margi...原创 2018-11-04 22:56:23 · 588 阅读 · 0 评论 -
如何禁止用户复制粘贴
body { /*禁止复制*/ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: non...原创 2018-08-21 17:42:06 · 1935 阅读 · 0 评论 -
css高度塌陷3种常用方式
什么是高度塌陷？在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。 原代码： <div id="yeluosen"> <div id="a1"></div> <div id="a2...原创 2018-06-07 15:43:05 · 11833 阅读 · 2 评论