前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简单),使用css的优势显而易见,它可以使页面中的javascript变得更少. 实现逻辑: 核心:hover伪类控制子元素的显示隐藏,添加css3动画;  (没错就是这样简单) :hover伪类,适用于当用户指向一个元素时,例如用户的鼠标指向一个段落p.当用户鼠标离开元素时,恢复元素原有的样式显示…

一.说明 在上篇博客<DIV+CSS实战(二)>中,实现了头部以及Tab标签卡,下面开始实现内容区域,要实现的效果如下: 二.内容最外层的设计(边框) 给最外层加边框,并且设置高度随着里面的内容自动增加 CSS样式 .divContent{ width: 100%; float: left; margin-top: 3px; border: 1px solid #e8e7e7; padding-top: 20px; height: auto; } 三.内容里面的Tab标签 jsp设计 <…

一.说明 在DIV+CSS实战(一)中,已经把框架搭建起来了,现在就需要往框架里面添加内容了.需要实现的内容如下图: 二.头部的设计(全媒体订阅) 左侧是一张图片+标题 ,右侧是登录名 和上次登录的时间 (1).标题的设计(左侧) jsp代码 <div class="divHeader"> <h1>全媒体订阅</h1> <div> <p> 欢迎您:<span class="color2">中科大…

虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方. 你可以先看一下下面的演示: HTML代码 <img alt="> <ul> <li>Example list item</li> </u…

CSS style color all in one https://developer.mozilla.org/en-US/docs/Web/CSS/color_value /* Hexadecimal syntax */ #3a30 /* 0% opaque green */ #3A3F /* full opaque green */ #33aa3300 /* 0% opaque green */ #33AA3380 /* 50% opaque green */ /* Functional…

这是我的第一篇博客,所以写的东西会比较简单. css当中,好多地方都会用到color属性,用来使html内容丰富多彩,例如:background-color:border-color: 第一种表示法使为直接写颜色的英文,例如:blue(蓝色),red(红的),总共可以表示17种颜色(这里不一一举例,没意义!) css例: body{ background-color:red}: 第二种表示方法为用黄色,绿色,蓝色的值设定color的值.例如:rgb(204,213,9),(r代表red红色,g代…

前言: 对于程序员,学习是无止境的,知识淘换非常快,能够快速稳固掌握一门新技术,是一个程序员应该具备的素质.这里将分析本人一点点不成熟的心得. 了解一门语言,了解它的概念非常重要,但是一些优秀的设计思想需要细心和大量实践才能慢慢参悟,在这之前需要做的是能够运用它来开发,那么了解一些基础特性非常有必要,通常这些特性是需要经验积累,从各种坑中累计出来,但是还有一种看似很笨却很有效的学习方法.那就是将别人的经验记录下来,有事没事都拿出来看看,集合开发中的经验,这会非常有效. 流式布局 http://b…

一.说明 在上篇博文<DIV+CSS(三)>中,一个页面基本上展示出来了!下面实现以下页面上的一些功能,比方批量删除等功能.这里以批量删除为例,批量禁止,批量启用和批量删除差不多,只不过一个是删除,一个是修改,就不一一介绍了,删除的话,会用到一些插件,例如:alpha.css.css1.css.drag.js,可以点击其进行下载!最终实现的效果图如下: 二.批量的全选,全部选的实现 在我前面的博客<checkbox数据回显问题>中,有详细介绍这个问题.这里就不详细介绍了 JSP设计…

一.说明 作为一个后台的程序员,我也是很少写前端,最近有一个项目,前端主要是由我来负责,就把我在项目中所学到的东西,记录下来!我的页面要嵌入到另一个系统中,所以,并不是按照传统的top,left,content,我只写了content部分!我一直觉得知识都是在项目中总结出来的,在做项目的过程中,才能把知识学以致用,并且加深理解,先看效果图: 二.分析 网页body 里面是一个DIV,然后DIV又包含了三个DIV,分别是DIV1,DIV2,DIV3. DIV1对应图片中头部分,也就是全媒体订阅部分…

一.说明 前面实现了关键词订阅模块,现在实现站点订阅模块,主要实现的是站点添加界面.站点添加界面里面实现一个提示框不在提示的功能(保存到cookie中),还有就是实现一个站点的选择框,包括输入文字自动筛选的功能.如下效果图: 二.提示框的实现 先把添加的界面整体实现了,就是一个DIV中放了一个表格,表格有一行两列,分别是<td><table></table>(第一列放的是客户ID,状态.....)</td>        <td>DIV</…