随笔分类 -  DIV+CSS

摘要:Animate.css是一个现成的跨浏览器动画库,可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。 安装使用 安装 使用 npm 安装: $ npm install animate.css --save 或者使用 Yarn 安装(这只适用于 Webpack、Parcel 等适当的 阅读全文
posted @ 2022-04-22 23:54 ninama 阅读(22997) 评论(0) 推荐(0) 编辑
摘要:富文本编辑器 富文本编辑器(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一样长。 作为一个技术人员,手上备上两款富文 阅读全文
posted @ 2022-04-14 15:58 ninama 阅读(1502) 评论(0) 推荐(0) 编辑
摘要:一个学期前小编也是对前台知之甚少,现在嘛,差不多弄懂了少量,来讲讲自己的了解吧ヽ( ̄▽ ̄)? 由于学习的深度不是很深,有错误的地方欢迎指正~假如没有学会建站,小编教你如何简单快速搭建网站,喜欢的收藏哦~~不要错过 首先我们要知道访问网站的流程是什么?大家每天也访问。 假设大家在浏览器地址栏输入这个问 阅读全文
posted @ 2022-04-10 17:10 ninama 阅读(124) 评论(0) 推荐(0) 编辑
摘要:中文名: 精通CSS+DIV网页样式与布局配套视频教程 英文名: div+css 资源格式: 光盘镜像 版本: 完全版 发行日期: 2007年08月 地区: 大陆 对白语言: 普通话 简介本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析;着重讲解如何用 阅读全文
posted @ 2022-04-10 17:05 ninama 阅读(138) 评论(0) 推荐(0) 编辑
摘要:使用css3实现圆角效果主要是用到了 border-radius 这个属性,这个是css 3.0中新增的一个属性。这里将 border-radius 的兼容性列举如下: 浏览器支持性 Firefox(2、3+) √ Google Chrome(1.0.154+…) √ Google Chrome(2 阅读全文
posted @ 2022-04-10 17:02 ninama 阅读(97) 评论(0) 推荐(0) 编辑
摘要:方法一: 打开CSS文件在最前面加上以下代码就可以了,这段代码使用的是CSS滤镜,将网页中的色彩部 分过滤掉。 代码: html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 或 *{filter:gray 阅读全文
posted @ 2022-04-10 17:00 ninama 阅读(2205) 评论(0) 推荐(0) 编辑
摘要:使用css代码打造圆角table,当然也可以制造圆角div。效果如下图: css以及具体的html代码如下: <html xmlns="http://www.phpernote.com"> <head> <meta http-equiv="Content-Type" content="text/ht 阅读全文
posted @ 2022-04-10 16:53 ninama 阅读(397) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body {text-align: center; font-size: 30px;} #colorFont { b 阅读全文
posted @ 2022-04-10 16:52 ninama 阅读(311) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html> <head> <title>SpinKit Examples</title> <style type="text/css"> :root { --sk-size: 40px; --sk-color: #333; } .sk-circle { width: 阅读全文
posted @ 2022-04-10 16:44 ninama 阅读(340) 评论(0) 推荐(0) 编辑
摘要:<!--[if lt IE 9]> <div style='border: 4px solid #FFF500; background: #FDFDC8; text-align: center; clear: both; height: 75px; position: fixed; z-index: 阅读全文
posted @ 2022-03-31 18:05 ninama 阅读(39) 评论(0) 推荐(0) 编辑
摘要:https://www.bilibili.com/video/BV17T4y137ai?share_source=copy_web 阅读全文
posted @ 2022-03-30 00:51 ninama 阅读(212) 评论(0) 推荐(0) 编辑
摘要:一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg、2.jpg、3.jpg、4.jpg。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单图片轮播</ 阅读全文
posted @ 2022-03-30 00:48 ninama 阅读(1461) 评论(0) 推荐(0) 编辑
摘要:易模仿芒果TV官网轮播图 目录 轮播图分析: 1、轮播图实现的功能 2、图片叠加原理 html页面布局: CSS修饰: JavaScript: 轮播图分析:1、轮播图实现的功能自动滚动图片。触碰圆点按钮,按钮亮起;点击圆点按钮显示对应图片,按钮亮起。触碰错左右按钮,按钮变色;点击左右按钮,图片左右轮 阅读全文
posted @ 2022-03-30 00:43 ninama 阅读(2002) 评论(0) 推荐(0) 编辑
摘要:JavaScript实现简单精致的图片左右无缝滚动效果 本文实例讲述了JavaScript实现简单精致的图片左右无缝滚动效果。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ 阅读全文
posted @ 2022-03-30 00:30 ninama 阅读(613) 评论(0) 推荐(0) 编辑
摘要:横向 <div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();" onmouseout="doscroll()"> <div id 阅读全文
posted @ 2022-03-30 00:27 ninama 阅读(255) 评论(0) 推荐(0) 编辑
摘要:如图,图片实现无缝滚动,点击向左向右滚动控制方向,且当鼠标悬浮在div中时,图片停止滚动;当鼠标离开div中,图片继续滚动。 原理:复制一遍整个ul,给定一个速度让ul向右或向左滚动,当整个ul要滚动到div边界时,再将整个复制的ul向左或向右拖拽直至整个ul中的图片归位。 图① 图② 图③ 图④ 阅读全文
posted @ 2022-03-30 00:25 ninama 阅读(1278) 评论(0) 推荐(0) 编辑
摘要:jQuery圆形轮播图插件circleCarousel 提取码:12bb 网盘下载 阅读全文
posted @ 2022-03-30 00:19 ninama 阅读(115) 评论(0) 推荐(0) 编辑
摘要:JS单排图片自动滚动效果代码 【隔时间】 提取码:12bb 网盘下载 阅读全文
posted @ 2022-03-30 00:08 ninama 阅读(52) 评论(0) 推荐(0) 编辑
摘要:更新时间:2019-11-22 10:25:57 详细的看一下就能直接使用,即下即用,好用到咩?。 提取码:12bb 网盘下载 阅读全文
posted @ 2022-03-30 00:02 ninama 阅读(35) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html > < html lang= "en" > < head > < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < m 阅读全文
posted @ 2022-03-20 22:24 ninama 阅读(166) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示