首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

css+div网页设计(一)–基础知识

css是网页制作必不可少的部分,我会用三篇博客为大家展示css的基本使用方法。 关于css+div的总体结构图总结例如以下: 本篇博客主要介绍css的基础知识。...是用于控制网页样式并同意将样式信息与网页内容分离的一种标记性语言。 二、使用css控制页面方法 css控制页面的方法共同拥有四种,行内样式、内嵌式、链接式、导入式。...正常浏览时候的样式 a:visited 被点击的超链接样式 a:hover 鼠标经过时候的样式 a:active 单机超链时候的样式 举例: cursor:se-resize;/* 变幻鼠标形状 */ cursor属性定制了好多鼠标特效大家能够參照这张表 九、滤镜 css中的滤镜仅仅能在IE浏览器中使用,我们以后要做的软件尽量还是要对绝大部分浏览器都支持的...今天的内容就讲这么多,下篇博客将为大家介绍css+div的美化布局以及css与javascript、ajax、jquery的混合应用。

1.2K30

html 中 超链接的写法,网页超链接样式的CSS写法「建议收藏」

上一篇文章讲了母栏目后面两行子栏目的DIV布局,这篇文章讲导航做完之后我想在鼠标移到每个不同区域的超链接在颜色上给予变化。...先来看看网页中定义超链接样式的代码: a:link:超链接字体的颜色 a:hover:鼠标移动覆盖在超链接上面的颜色 a:active:当鼠标点击按下的时候颜色的一个变化 a:visited:超链接已经被访问后的文本颜色...,在鼠标移动覆盖到超链接上面是一个颜色,访问点击完成之后是一个颜色且在鼠标覆盖在超链接上时,是有下划线的。...,前面和上面一样只是颜色改变了,背景图片改变了同一张图片下面X轴距离不变,Y轴举例向下30PX像素距离。...演示中的素材我就随便做了一下,以及颜色选取,您可以根绝您实际情况来定义颜色,与背景图片素材的制作可以依据您实际需要制作。

2.5K30

jQuery Easing Plugin 网页缓动函数速查表

jQuery 为例,还记得之前在我爱水煮鱼上推荐的那个缓动插件 jquery.easing.js 吗?常规的动画效果就是线性变化,例如匀速的移动某个块或者元素。这种过渡效果很显然是非常低端普通的。...有了 jquery.easing.js 这个插件之后,就可以调用里面定义的一些动画过渡效果,让你的网页中的动画效果更佳的自然生动、与众不同。...但是,jquery.easing.js 插件的官方网站提供的动画预览功能非常弱,你必须点击某个效果,才可以看到。于是,就有人做了这样的一个 网页缓动函数速查表 并且开源有人将其翻译了一个中文版本。...在这个网页缓动函数速查表中,你可以直观的看到每个过渡函数的函数曲线。将鼠标移动上去之后,还会再旁边出现一个红色箭头来实际的演示一下动画过渡效果。非常直观、方便。...当你确定要使用某个动画效果了,只需要用鼠标点击一下即可,这时候会出现应用这个动画效果的三种实现方式:jQuery 实现方法、SCSS 实现方法、CSS3 实现方法。

1.1K10

jQuery设计思想

虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松。因为它涉及到网页开发的方方面面,提供的各种方法和内部变化有上千种之多。初学者常常感到,入门很方便,提高很困难。...  九、特殊效果 【正文】 一、选择网页元素 jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。....change() 表单元素的值发生变化 .click() 鼠标单击 .dblclick() 鼠标双击 .focus() 表单元素获得焦点 .focusin() 子元素获得焦点 .focusout....scroll() 滚动条的位置发生变化 .select() 用户选中文本框中的内容 .submit() 用户递交表单 .toggle() 根据鼠标点击的次数,依次运行多个函数 ....,然后传入事件处理函数 event.target 事件针对的网页元素 event.preventDefault() 阻止事件的默认行为(比如点击链接,会自动打开新页面) event.stopPropagation

2.2K60

jquery 使用方法

一、选择网页元素jQuery的基本设计和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。这是它区别于其他函数库的根本特点。   ...八、事件操作 jQuery可以对网页元素绑定事件。根据不同的事件,运行相应的函数。...2 .change() 表单元素的值发生变化 3 .click() 鼠标单击 4 .dblclick() 鼠标双击 5 .focus() 表单元素获得焦点 6 .focusin(...25 .toggle() 根据鼠标点击的次数,依次运行多个函数 26 .unload() 用户离开页面 以上这些事件在jQuery内部,都是.bind()的便捷方式。...在事件对象上绑定数据,然后传入事件处理函数 11 event.target 事件针对的网页元素 13 event.preventDefault() 阻止事件的默认行为(比如点击链接,会自动打开新页面)

1.6K10

制作Gmail式按钮

这种按钮设计最大的特点,就是完全不使用背景图片,是纯粹的HTML+CSS。同时,它也不使用任何表单元素,目的是在不同浏览器下,争取视觉效果的最大统一。...我使用的库是jQuery。 i. 加入鼠标悬停效果。   $(".goog-imageless-button").hover(     function(){       if(!...加入鼠标点击的效果。   $(".goog-imageless-button").mousedown(     function(){       if(!...一方面,它需要大量的冗余代码,与语义网的原则相违背;另一方面,它太依赖Javascript和桌面环境,一旦用户使用移动设备或不支持Javascript的浏览器上网,那么整张网页的就完全失效了。...所以,除非你开发的是针对桌面浏览器的互联网应用程序,否则还是不要使用上面的设计方法,而是用Douglas Bowman提供的一种比较简化的形式(需要背景图片)。 (完)

87320

建站日志

15 添加文章加密功能 2021-01-13 重新启用阅读原始文档功能,并解决GitHub Pages服务由于原始文档里的某些特殊代码导致部署失败的问题 2021-01-10 添加右键菜单 评论区添加背景图片...2020-10-14 修复LoveIt主题的部分bug,更改了部分样式,主要包括: 添加背景图片轮播 归档、分类页面添加了数量统计 修改了h2的样式 缩小目录的字体 修改了引用块样式 2020-10-09...2018-12-19 最近发现打开页面略慢略卡,发现是jquery-backstretch的cdn加载不了,原本官网使用的cdn是cloudflare的,现在改成了另一个cdn地址。...于是将jquery-backstretch的cdn修改了官网上最新的,总算变快了。 2018-11-16 将鼠标点击产生的文字设为不可选定。...)…… 2018-07-26 改善文章目录的换行问题 添加文章不在首页显示的功能:在文件头里添加not_show: true即可启用 2018-07-21 添加了404页面 2018-07-07 添加网页标题监听事件

4.2K30

Custom Beautify

而元素本身依然占据它自己的位置并对网页的布局起作用。 透明度修改(含一图流方案) 点击查看透明度修改教程 对于页面的透明度配置有多种方案,此处讨论三种。...主题使用id为的div来存放背景图片,使用id为的div来存放banner图片。只需要通过重设这个div的背景图片属性就可以替换背景图片。...图片模糊渐变清晰 点击查看图片模糊渐变清晰方案 css3中有个filter滤镜属性,可以提供高斯模糊滤镜。而animation动画属性支持给网页添加动画效果。把他们结合一下就可以了。...此处以给网页头图和网页背景添加图片渐变模糊为例,在中添加 考虑到还有部分读者的需求是指定页面,可以在对应文章或者page的markdown文件里写css代码: 鼠标指针样式替换 点击查看鼠标指针样式替换...站点标签title动态变化

2.3K20

前端成神之路-CSS高级技巧

元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!...5.3 精灵技术使用的核心总结 首先我们知道,css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术的。 精确测量,每个小背景图片的大小和 位置。...给盒子指定小背景图片时, 背景定位基本都是 负值。 5.4 制作精灵图(了解) CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),那我们要做的,就是把小图拼合成一张大图。...大部分情况下,精灵图都是网页美工做。 我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。...之所以a包含span就是因为 整个导航都是可以点击的。 7. 拓展@ 7.1 margin负值之美 1).

6.8K30

2018最佳网页设计:就是要你灵感爆棚!!!

网站地址:https://thecoolclub.co 推荐指数:★★★★★ 亮点:丰富的微交互,鼠标悬停特效以及留白的巧妙应用 该网页点击即可一张张发牌的桥牌游戏,鼠标悬停即可触发的文字抖动特效,能够有效突出站点产品的大量留白的使用...网站地址:https://mtcubacenter.org 推荐指数:★★★★ 亮点:动态文本和背景图片的完美配合 该款在线景点宣传网站,不同于同类网站通过静态文本介绍和一定图片轮播的形式展示其特色,而是完美的结合动态文本和高质量的动态背景图片进行展示...学习点: 根据网站产品特色,添加更多人性化设计,比如鼠标样式,文本字体,色彩配色变化等 2.Chairish ?...网站地址:http://m-goldstein.com 推荐指数:★★★★ 亮点:渐变色彩的实时变化 该款作品集页面设计除了选择渐变色来增加网页吸引力,还通过各种渐变色的循环变化,极大地增强了页面的视觉表现力...比如,其首页添加了简单的五线谱设计,当鼠标移动到线谱上时,线谱不仅会出现相应的波形变化,同时还会有音乐产生,就如同即兴音乐表演一般,非常有趣。

1.6K50

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar。...jquery.mousewheel.min.js:这是 Brandon Aaron 编写的一个伟大的只有2kb的插件,它面向所有的操作系统和浏览器,为我们提供了鼠标滚动事件的支持。...否则可能会无效,关于网页中代码顺序,详情可以看一下 潜行者m 的这篇文章:网页中代码的顺序是不可忽略的细节。...UI easing 可以看到所有的类型 mouseWheel:String/Boolean:鼠标滚动的支持 值为:true.false,像素 默认的情况下 鼠标滚动设置成像素值 填写false取消鼠标滚动功能...) "pixels"(根据每次点击的像素数来滚动) 点击这里可以看到形象的例子 scrollButtons:{ scrollSpeed:Integer }:设置点击滚动按钮时候的滚动速度(默认 20)

14K30
领券