随笔分类 - web前端
HTML在搜索框中放一个放大镜图片
摘要:记一下简单实现一个功能:搜索框中放一个放大镜图片。 两种实现方式: 一种是HTML自带的,将input控件的type属性改成search就行了。 第二种是通过一个div盒子,使用相对定位实现,类似于帧布局,代码很短
在网页中使用markdown编辑文章,并通过html在网页中进行显示
摘要:在网页中可以通过textarea这个控件进行文本编辑,但是这个方式有点呆,而且不好看。现在记录文章用得比较多的是markdown,那么在自己的网站中集成一个markdown进行文章的记录是一件比较爽的事,而且可以不需要搞很多添加效果的按钮,比如像分段、分行、插入代码这些功能通过markdown语法就
使用HTML、CSS和JavaScript实现验证码校验功能
摘要:<!doctype html> <html> <head> <meta charset="utf-8"> <title>js简单验证码使用</title> <style> .code { font-family:Arial; font-style:italic; color:blue; font-size:30px; border:0; padding:2px 3px; letter-spacin
div宽高未知,设置小的div位于大的div的中心
摘要:在前端的界面布局中有一种这样的情况,就是我的块元素的宽和高我不知道具体的大小是多少,只知道宽和高占当前屏幕的多少百分比。 现在这种情况下有两个div元素,一个大,一个小,现在我需要让小的块元素位于大的块元素的中心位置 如下图: 下面是实现代码:
HTML:使用Jquery动态生成二级选项列表
摘要:想写一个多级联动的选项列表,并且我想要动态生成,但是我看了好多博客看得我晕乎乎的,就自己查了一些jq 的方法自己尝试些了一下,下面放上我实现的效果和源代码 实现效果: 源代码:
$(document).ready()和window.onload的区别
摘要:下面我简单记录一下在html中jquery里面的$(document).ready()和window.onload的区别,主要有三个不同的方面: $(document).ready()比window.onload更快加载 $(document).ready()有简写方式,window.onload没
HTML:块元素位置居中
摘要:块元素位置居中有两种存在: 一种是有两个块元素,其中一个块元素相对另外一个块元素居中; 另外一种是一个块元素相对于顶级父容器居中 第一种实现方式如下: 效果图: 第二种实现方法如下: 实现效果: 在这里顺便记录一下上面个代码用到的一个属性position以及这个属性的值的各种含义 定义: ositi
HTML5框架Frameset的使用
摘要:框架的使用其实就是给你当前的屏幕划分行或者列,下面记录一下基本的使用。 我用到了四个页面,其中的one.html,two.html,three.html三个页面是用来显示在index.html页面中的 三个子页面的代码都只有一行,比较简单,不列出。 下面是index.html页面的代码: 注意点:使
CSS3动画
摘要:CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 什么是 CSS3 中的动画? 动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。 请用百分比来规定变化发生的时间,或用关键词 "fro
css3动画:过渡
摘要:通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。 请把鼠标移到下面的绿色方块上: CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点,必须规定两项内容: 规定您希望把效果添加到哪个 CSS 属性
CSS动画:移动、缩放、旋转、倾斜的实现
摘要:移动属性:translate 缩放属性:scale 旋转属性:roate 倾斜属性:skew html:定义五个属性进行比较,链入css文件 css文件: 实现效果:
使用CSS实现瀑布流效果
摘要:CSS实现瀑布流特点: 不需要计算,浏览器自动计算,只需设置列宽,性能高; 列宽随着浏览器窗口大小进行改变,用户体验不好; 图片排序按照垂直顺序排列,打乱图片显示顺序; 源代码: html.html:使用列表ul、li引入图片 ss.css 实现效果:
HTML5 内联框架iFrame
摘要:iFrame:内联框架 作用:在网页中嵌套网页 实例由aa.html,bb.html,cc.html,iframe.html四个页面组成 静态效果如下:cc.html嵌套在bb.html中,bb.html嵌套在aa.html中,aa.html嵌套在顶级页面iframe.html中 aa.html:
HTML链接:创建文档内链接(锚点功能)
摘要:文档内链接作用:在同一个网页界面实现不同位置的跳转 实现效果:当我浏览一个页面滚动到不同位置需要返回某个特定的位置时可以一键返回 如下:当我下滑到文档二处需要快速返回到文档一处时,只要点击文档二就会自动返回到文档一处的位置 实现代码:
在一个表单form中点击两个不同的按钮进入不同的页面
摘要:一个常见的场景,一个表单中有两个按钮,点击其中一个按钮进入一个独立页面,点击另一个按钮进入另一个独立的页面。 我们知道使用form时只能放一个动作事件action,如下: 所以要使用form自带的一个action是无法实现的这种功能的,而且写input的type属性时需要注意不要写submit,这是
在HTML中怎么处理超链接的下划线
摘要:当我们引用<a href="></a>,也就是定义超链接时,默认的文本下方是有一根横线的。那么为了美观我们可以把下划线去掉,或者只有当鼠标移到文本上时下划线才出现
网页导航栏鼠标移上去自动弹出下拉菜单
摘要:<meta charset="UTF-8" /> <div class="menubar"> <div class="menuitem"> <div>菜单1</div> <div class="submenu"> <div>子菜单1</div> <div>子菜单2</div> </div> </di