随笔分类 - HTML+CSS
摘要：今天写一个小实例，用js和css写一个可以自动隐藏的悬浮框。css肯定是用来控制样式的，js用来控制器显示与隐藏的。显示与隐藏通常有两种方法实现：1，用js控制其显示属性；2，用js控制其大小。 今天要说的就是通过控制其大小来实现元素的显隐，原理：为其注册鼠标移入、移出的事件，当鼠标移出对象范围，将其宽度设为1，当鼠标再次移入该对象，将其宽度还原。很简单，我们一起看看吧！ 隐藏状态： 左边那一条窄线就是隐藏以后的悬浮框。 显示状态： 当鼠标滑到左边的悬浮框上，悬浮框就又显示出来了。 CSS样式：JS代码：HTML代码： 学生信息 学号：012...
阅读全文
摘要：当网页中的内容较多时，就不能让其所有内容在同一页面显示，那样既不美观又影响性能。所以说将数据分页显示还是非常有必要的。下面一起来看看我今天给大家介绍的这个分页吧！ 分页效果图： 实现此效果需要用到一个叫做AspNetPager的第三方控件，百度一下就能找到。下载后放到相应的目录，然后将其引用，最后添加到工具箱即可使用。添加到工具箱的步骤如下： 在弹出的对话框内点击浏览，找到AspNetPager.dll点击打开，添加成功！ 添加完以后接下来看看代码部分 分页控件的相关属性设置： 设置每页显示的最大记录数、相关按钮上的文字，一眼就能看懂。<webdiyer:Asp...
阅读全文
摘要：大家对于验证码都很熟悉了，几乎每天都会和它打交道，如注册、登录，论坛回帖等。可以说验证码与我们广大网民的生活工作息息相关。当我们在输入验证码时有人可能会觉得麻烦，虽然验证码让我们有一点小小的麻烦，但是它给我们带来了很大的好处。它可以防止利用恶意程序批量注册、发帖、灌水还能有效的防止黑客暴力破解密码。验证码虽然一般只有简单的几个字符，但是它的作用着实不小啊！下面我们就一起看看如何实现网站中的验证码。 下图为一个含有字母跟数字的简单验证码： 下面我们就来看看它们是如何产生的： 用一般处理程序生成验证码using System;using System.Web;using System....
阅读全文
摘要：圆角框在WEB界面经常会用到的元素，正因为如此，人们也研究出了很多实现圆角框的解决方案。每种方案都有各自的优缺点，究竟哪种更好要看你的需要，看具体的应用环境，因为没有绝对的好，也没有绝对的不好，只有适合不适合。前段时间正好用到了圆角框，采用的是图片拼接的方法，下面一起看看效果吧。 效果还可以吧，其实想实现这种效果很简单，只需要三张小图片再加上几句简单的代码就可以轻松搞定，如果不信的话那就往下看。 CSS样式代码：#top{ background-image: url('../images/login_bg_top.gif'); background-position: ...
阅读全文
摘要：前段时间刚刚从C/S过度到B/S，提到B/S就不能说CSS，而说起CSS又不能落下盒子模型。在CSS诞生的时候就有了盒子模型的概念，网页中大部分的元素都能构成一个盒子模型,。盒子模型无非就是描述的元素的尺寸跟位置，只要掌握好这两点就可以灵活的运用盒子模型来布局了。下图是盒子模型的基本元素和属性： 下图是一个盒子模型的基本模型，网页中每个元素大概都可以用下图的模型来描述。 element: 元素。有的地方也叫做content，译为内容。 padding: 内边距。默认值为0，不可以为负值。具体使用如下：padding: 10px 20px 30px 40px; /*设置元素内...
阅读全文
摘要：在做网站的时候经常遇到需要显示的东西太长，此时我们通常会将它们按一定的长度截取，然后在其后面加上省略号。当鼠标移到上面时，就会显示出完整的内容。就像下面这样： 要实现此效果，需要用到下面这个截取字符串的函数。相信不用我废话，大家一看注释就能明白是如何实现的。、 /// <summary> /// 将指定字符串按指定长度进行截取并加上指定的后缀 /// </summary> /// <param name= "oldStr "> 需要截断的字符串 </param> /// <par...
阅读全文
摘要：CSS全称为Cascading Style Sheet 译为级联样式表，CSS的出现主要是为了解耦、提高易维护性。我们一般采用的是外部链接样式，这样可以将网页内容跟显示样式真正的分离。 我们选择CSS的原因，无非是它具备以下的优点： 1、符合W3C标准。保证网站不会因为将来网络应用的升级而被淘汰。 2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE、chrome或者是火狐，网站都能很好的兼容。 3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，更加容易被搜索引擎找到。 4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整...
阅读全文
