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

一.说明 在上篇博客<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(三)>中,一个页面基本上展示出来了!下面实现以下页面上的一些功能,比方批量删除等功能.这里以批量删除为例,批量禁止,批量启用和批量删除差不多,只不过一个是删除,一个是修改,就不一一介绍了,删除的话,会用到一些插件,例如: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</…

如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) 首先先按这里看实际运行效果,这个页面在mozilla.opera和IE浏览器中均可以实现居中和高度自适应.我们来分析代码: CSS: body{background:#999;text-align:center;color: #333;font-family:arial,verdana,sans-…

 这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区[知识三] 什么是W3C标准?[基础一] CSS如何控制页面[基础二] CSS选择器[基础三] CSS选择器命名及常用命名[基础四] 盒子模型[基础五] 块状元素和内联元素 实战篇[第一课] 实战小热身[第二课] 浮动[第三课] 清除浮动[第四课] 导航条(上) | 导航条(下)[大…

今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真是不容易.然后放松了一下,收拾了一下东西,看了一会电视剧,心情才好点了.在这个例子中我总结了几点经验: 1.ul中只能放li,li是个容器,li中可以放任何标签内容. 2.在写CSS之前,记得要对标签等清除默认样式,这样在后面布局中就不会有误差. 3.任何一种效果都可以用多种方法实现,不一定要和别人…

五.布局页面——头部和导航 有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了.先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面就需要填砖分割空间了.先分析下头部:分为两部分,一个是logo靠左侧显示,一个是搜索靠右侧显示,那么布局时插入两个div,一个向左浮动,一个向右浮动的方式来完成.另外还有很多种实现方法,比如logo用h1标签,搜索用span,或者把logo做为背景图片也是可以的,不管采用哪种方法,要根据页面的需求选…

项目需求 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=""> 要求制作上图所看到的的效果,能达到灵活可配的效果. 我想初步想法是用div+css来制作. --------------------------------------------------------…