css3溢出隐藏的方法
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
实现方法:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多 ...
HTML5
一、什么是HTML5
(一)HTML5简介
1、万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素、属性和行为。
(1)XHTML 可拓展超文本标记语言
XHTML是一种增强了的HTML,它的可拓展性和灵活性将适应未来网络应用更多的需求。
(2)HTML5
它有更大的技术集 ...
小区后台管理系统项目前端html页面模板实现示例
目录登录小区管理系统主页小区管理菜单房产管理菜单业主信息管理菜单停车位管理菜单服务管理菜单资产管理菜单收费管理菜单管理员管理菜单系统设置项目结构:主要代码展示:登录小区列表登录
小区管理系统主页
小区管理菜单
房产管理菜单
业主信息管理菜单
停车位管理菜单
服务管理菜单
资产管理菜单
收费管理菜 ...
HTML5基础(二)
1.HTML5中的一些标记
1.水平线标记
<hr 属性="属性值" /> 属于一个单标记,在网页输入一个<hr/>,就添加了一条默认样式的水平线。
作用:将段落与段落隔开,使文档结构清晰,层次分明
可以对其做以下属性的改变
1.align 设置水平线的对齐方式 left right center三种
2.size 设置水平线的粗细 以像素为单位,默认 ...
HTML5拖拽技术介绍
HTML5 的拖拽实现
前提:draggable
将需要拖放的元素设置为 draggable = 'true'(img 和 a 元素默认为 true)
一、拖放相关事件
1. 被拖动元素: ondragstart、ondrag、ondragend
ondragstart :用户开始拖动元素时触发
ondrag :元素正在拖动时触发
ondragend :用户完成元素拖动后触发
2. 放置目标元素(容器): ondra ...
HTML基础详解(上)
目录1、认识WEB2、HTML初识3、HTML常用标签4、表格总结1、认识WEB
网页 主要是由文字、图像和超链接等元素构成,当然除了这些元素,网页中还可以包括音频、视频以及Flash等。
浏览器 是网页显示、运行的平台。
浏览器内核(排版引擎、解释引擎、渲染引擎)
负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。
...
HTML基础详解(下)
目录1、列表2、表单4、前端HTML基础面试题总结1、列表
列表ul容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表。
列表最大的特点就是整齐 、整洁、 有序,跟表格类似,但是它可组合自由度会更高。
1. 无序列表 ul
< ul></ ul>中只能嵌套< li></ li>,直接在< ul></ ul>标签中输入其他标签或者文字的做法是不被 ...
【html】html5新特性有哪些
一、html5新特性——canvas元素
canvas元素用于在网页上绘制图形,有多重绘制路径、矩形、圆形、字符以及添加图像的方法
svg元素用于描述二维是矢量图形的一种图形格式。
(1)把svg直接当成图片放在网页上
(2)实现动画
(3)svg图片的交互和滤镜效果
不同点:canvas是通过js来绘制2d图形,逐像素进行渲染的,假若在图片 ...
html加css样式实现js美食项目首页示例代码
介绍:美食杰首页
这个是轮播图效果:利用了element ui框架搭建的html、css样式,然后再通过vue指令和data存储数据和methods方法在操作data里面的数据来完成数据交互继而渲染到页面上就如下图。
这个是内容精选页效果:也是利用了element ui框架搭建的html、css样式
过程:
引用了element ui框架搭建的轮播图框架,利用数 ...
HTML5
HTML5
概述
IDEA创建HTML项目
网页基本信息
<!--这里是html的注释-->
<!--DOCTYPE:告诉浏览器,我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!-- meta 描述性标签,用来描述网站的一些信息 -->
<!-- meta标签,一般用来做SEO -->
...
HTML5——Flex布局
介绍
将标签变为项目,利用主轴和侧轴进行的布局
弹性布局菜鸟教程:https://www.runoob.com/w3cnote/flex-grammar.html
特点
flex布局分为容器和项目。给父盒子设置主轴方向让项目排列
弹性布局内项目不分块级元素和行内元素,都可设置大小,默认自适应(实际上项目占满侧轴,但是设置侧 ...
sass 常用备忘案例详解
一、变量
所有变量以$开头
$font_size: 12px;
.container{
font-size: $font_size;
}
如果变量嵌套在字符串中,需要写在#{}中
$side : left;
.rounded {
border-#{$side}: 1px solid #000;
}
二、嵌套
层级嵌套
.container{
display: none;
.header{
width: 100%;
}
}
属性嵌套,注意 ...
利用模糊实现视觉3D效果实例讲解
目录实现一个文字的 3D 变换实现文字的模糊使用模糊构建落叶效果本文较短,将介绍巧用模糊实现视觉 3D 效果的技巧。
我们都知道,在正常的视觉效果中,离我们越近的通常我们会看的越清晰,而离我们较远则相对没那么清晰~
我们可以利用清晰与模糊两种状态来构建视差效果。像是这样:
而在 CSS 中,我们可以利用模糊滤镜 fil ...
HTML基础知识总结
目录标签分类常用标签表单框架 常用的布局组合标签HTML4和HTML5的区别:HTML5 中新增的语义标签 - 了解HTML5 新的表单属性 form 新属性input 新属性HTML5 新的表单元素 -- 了解 HTML5 中新的 input 类型 HTML5 中新增的音频 HTML5 中新增的视频HTML5 中已经移除的元素转义符号 标签的属性:多个属性中间用空格
< ...
HTML DOM setInterval和clearInterval方法案例详解
在javascript编程中,setInterval可以帮助我们实现一个定时器的功能,能够让我们定时执行某一项操作,如果不需要继续执行了,我们只需要调用clearInterval函数,清除定时器即可。
这里要重点说的是清除定时器的时机,我们一般是需要进行一个条件判断,比如 var count=5,我们定时执行count--操作,当count==0的时候,清除定 ...
HTML iframe标签用法案例详解
目录一、iframe 定义和用法 二、属性三、示例 1、iframe框架2、iframe透明3、iframe自适应高度4、通过js输出iframe广告代码 iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站的内容,为了更好的效果,可能需要使iframe透明效果,那么就需要了解更多的ifram ...
HTML-Canvas的优越性能以及实际应用
目录HTML绘图届的前辈:SVGCanvas的渲染模式Dom:驻留模式Canvas:快速模式Canvas的应用优点总结HTML绘图届的前辈:SVG
Canvas是HTML5时代引入的“新”标签。与很多标签不同,Canvas不具有自己的行为,只将一组API 展现给客户端 JavaScript ,让开发者使用脚本把想绘制的东西画到一张画布上。
在HTML5之前,人们通常使用SVG ...
HTML相关知识点总结
目录简介
HTML文档和网页的关系呢?
HTML的标签样子?
HTML基本概念
标签
元素
属性
注释
编码规则
HTML常用元素
标题
段落
链接
跳转页面:
跳转锚点
图片
列表
有序列表
无序列表
定义列表
表格
块
表单及表单元素
表单
表单属性
表单元素
多媒体元素
audio 标签
video 标签
线
细节
文档类型
头文件
1. HTML <title> 元 ...
利用CSS制作3D动画
目录CSS 3D 基础知识使用 transform-style 启用 3D 模式利用 perspective & perspective-origin 设置 3D视距,实现透视/景深效果通过绘制 Webpack Logo 熟悉 CSS 3D实现文字的 3D 效果3D 氖灯文字效果利用 CSS 3D 配合 translateZ 实现真正的文字 3D 效果利用距离、角度及光影构建不一样的 3D 效果3D 计数器空间效果空间 3D ...
通过CSS数学函数实现动画特效
目录前言
CSS 数学函数
绝对值
中位数数轴上两点距离
三角函数
例子
一维交错动画
初始状态
应用动画
交错动画二维交错动画
初始状态
应用动画
交错动画另一种动画
余弦波动动画
初始状态
余弦排列
波动动画
交错动画
前言
大家好,这里是 CSS 兼 WebGL 魔法使——alphardex。
之前一直在玩 three.js ,接触了很多数学函数 ...