H5、CSS3
关注
分享
扫一扫
ygkyufcl
这个作者很懒，什么都没留下…
展开
-
css效果(2)-文本溢出显示省略号，文本两端对齐，格子背景
文本溢出显示省略号单行文本width:150px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;多行文本width:150px;overflow:hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;代码演示<!DOCTYPE html>&原创 2021-02-24 14:51:09 · 414 阅读 · 0 评论 -
css效果(1)-背景模糊，倒影，文字凸起，文字凹陷
背景模糊backdrop-filter: saturate(180%) blur(1em);-webkit-backdrop-filter: saturate(180%) blur(1em);倒影-webkit-box-reflect: below -60px -webkit-gradient(linear,right 60%,right bottom, from(rgba(0,0,0,0)),to(rgba(255,255,255,0.3)));文字凸起text-shadow: 1px 1原创 2021-02-23 17:40:18 · 585 阅读 · 1 评论 -
实现图片加载先模糊后清晰的效果
打开一些网上的相册，在加载照片的时候，如果网速比较慢加载慢的话，它会先显示一个类似模糊有点小马赛克的质量比较差的照片，然后慢慢的变为清晰的照片，这样避免了用户在浏览照片的时候页面一片空白的情况，在html中IMG有个lowsrc属性，把图片的缩略图放在lowsrc里面，这样的话因为缩略图是缩小的，按照原图片的比例显示就会有马赛克！==src ==里填写原图片！这样的话，原图片比较大，下载的慢，lowsrc的缩略图小加载快，所以会先显示被拉伸的缩略图，等大图下载完后会显示原图，这样有个时间差，就原创 2021-01-11 15:36:39 · 2227 阅读 · 0 评论 -
针对IE单独设置样式
IE9以及低于IE9版本 :<!--[if IE]> <link rel="stylesheet" type="text/css" href="index.css" /><![endif]-->IE10或IE11:@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */}...原创 2020-06-10 17:03:10 · 731 阅读 · 0 评论 -
使元素消失的几种方式
1. display:none; 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。当display设置为none，任何对该元素直接的用户交互操作都不可能生效。2. visibility:hidden; 该元素...原创 2019-11-23 21:46:39 · 1784 阅读 · 0 评论 -
高度塌陷的原因及解决方式
高度塌陷的原因： 当父元素没有添加高度（高度自适应），而子元素又脱离文档流的时候（当子元素设置了浮动或者子元素的position属性值为absolute或是fixed，都会脱离文档流），就会发生高度塌陷。高度塌陷的几种解决方案： ...原创 2019-11-23 20:47:47 · 659 阅读 · 0 评论 -
css中常见的定位方式
css中常见的定位方式1、position:static 默认值 当我们不指定标签的定位方式的时候，position的默认属性就是static，此时标签根据默认的布局排列2、position:absolute 绝对定位 ...原创 2019-11-23 20:20:16 · 152 阅读 · 0 评论 -
HTML表单
HTML表单表单：用于收集用户信息当在表格中套表单时要把form标签写在table标签内部1、表单框<form name="" method="post/get" action=""></form>form属于一个容器标签，其他表单控件只有放在表单框中才有效name属性：用于写表单的名称，不要写汉字action属性：后面属性值是表单提交的路径method...原创 2019-08-11 15:10:55 · 84 阅读 · 0 评论 -
HTML表格
HTML表格表格：用于显示数据1、表格的基本结构：<table width=" 100" height="100 " border="1" cellspacing="0" cellpadding="0"> <tr> <th>第一行第一个单元格</th> <td>内容&l...原创 2019-08-11 15:09:56 · 91 阅读 · 0 评论 -
HTMLa和img标签
HTML的超链接标签<a href="https://www.baidu.com" target="-blank" title="点击进入百度首页">百度链接</a>页面显示结果为：百度链接<a href="https://www.baidu.com" target="-self" title="点击进入百度首页">百度链接</a>页面显...原创 2019-08-11 15:08:18 · 294 阅读 · 0 评论 -
HTML的常用标签
HTML的常用标签HTML标签分为两类：单标签（空标签）: <标签 属性=“属性名”/>双标签 : <标签 属性=“属性名”>内容</标签>常用的文本标签：1、标题标签一个网页中只能出现一次一级标题，用于写网页的大标题<h1>一级标题</h1><h2>二级标题</h...原创 2019-08-11 15:05:50 · 178 阅读 · 0 评论 -
关于HTML的相关概念及结构
关于HTML的相关概念及结构首先，我先介绍一些前端工程师常用的一些软件(这些都可以在官网下载，看自己喜欢哪一款，用哪一个就行)编辑软件：HBuliderAdobe DreamweaverVisual Studio Code JetBrains WebStormsublime P图：Adobe Photoshop调试软件（其实就是浏览器）：chromeIEfirefo...原创 2019-08-10 22:58:24 · 179 阅读 · 0 评论