一、说明

　　作为一个后台的程序员，我也是很少写前端，最近有一个项目，前端主要是由我来负责，就把我在项目中所学到的东西，记录下来！我的页面要嵌入到另一个系统中，所以，并不是按照传统的top,left，content,我只写了content部分！我一直觉得知识都是在项目中总结出来的，在做项目的过程中，才能把知识学以致用，并且加深理解，先看效果图:

二、分析

网页body 里面是一个DIV，然后DIV又包含了三个DIV，分别是DIV1，DIV2，DIV3。 DIV1对应图片中头部分，也就是全媒体订阅部分。DIV2对应的是选项卡部分，也就是"关键词订阅,网站论坛订阅,微博账号订阅......"部分。DIV3对应的就是剩下的内容部分了。DIV3中又包含了一个头,表格和底部的批量操作。结构图如下：

三、搭建框架

知道了网页的结构，现在就开始按照上图，把网页的结构搭建起来，然后，再慢慢细化。

（1）、搭建结构

 <body>

       <form action="" >

           <div class="jc-demo-box">

             <div class="divHeader">

                 "全媒体订阅"

             </div>

             <div class="divTab">

                 "关键词订阅,网站论坛订阅..."

             </div>

             <div class="divContent">

                 <div class="keyaddClass">

                     "关键词列表"

                 </div>

                 <div class="divContent1">

                     "所有的关键词"

                 </div>

                 <div class="footOperation">

                     "批量操作"

                 </div>

             </div>

             <div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>

         </div>

       </form>

   </body>

结构搭建好了，但是会发现知识一堆文字，现在开始加样式

 <style type="text/css">

         /*给body添加特效，背景色,padding margin等以及body内的字体样式，*/

         body{

             background:url(images/yq/key/body_bj.gif) repeat 0 0;

             margin: 0px;

             padding: 0px;

             color: #818389;

             font: 13px "宋体",Arial,Helvetica,sans-serif;

         }

         .jc-demo-box{

              width:96%;

              text-align: left;

                margin: 2em auto;

                background: white;

                border: 1px #bbb solid;

                /*DIV设置圆角特效，IE下不支持*/

              -webkit-border-radius: 4px;

              -moz-border-radius: 4px;

              border-radius: 4px; 

              /*DIV设置发光特效*/

              -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);

              -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);

              box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);

              padding: 25px 30px;

              /*设置高度自动适应*/

              height: auto;

              min-width: 846px;

         }

         .divHeader{

             height: 28px;

             margin-bottom: 13px;

             width:100%;

             /*为了是结构看起来更明确，先把边框加上，以后会去掉*/

             border: 1px  solid #e8e7e7;

         }

         .divTab{

             height: 34px;

             width:100%;

             float: left;

             /*为了是结构看起来更明确，先把边框加上，以后会去掉*/

             border: 1px solid #e8e7e7;

         }

         .divContent{

             width: 100%;

             float: left;

             margin-top: 3px;

             border: 1px solid #e8e7e7;

             padding-top: 20px;

             height: auto;

         }

         .keyaddClass{

             border-bottom: 2px solid #348bc4;

             margin-bottom: 15px;

             width: 98%;

             float: left;

             padding-left: 2%;

         }

         .divContent1{

             width: 100%;

             float: left;

             overflow: hidden;

             margin-top: 3px;

             /*为了是结构看起来更明确，先把边框加上，以及设置一个高度，以后会去掉*/

             border: 1px solid #e8e7e7;

             height: 400px;

         }

         .footOperation{

             background: none repeat scroll 0 0 #257cb5;

             height: 48px;

             overflow: hidden;

             width: 100%;

             float: left;

             border-radius:0px 0px 4px 4px;

         }

  </style>

效果图：

　　未完......

DIV+CSS实战(一)的更多相关文章

  1. DIV+CSS实战(三)

    一.说明 在上篇博客<DIV+CSS实战(二)>中,实现了头部以及Tab标签卡,下面开始实现内容区域,要实现的效果如下: 二.内容最外层的设计(边框) 给最外层加边框,并且设置高度随着里面 ...

  2. DIV+CSS实战(二)

    一.说明 在DIV+CSS实战(一)中,已经把框架搭建起来了,现在就需要往框架里面添加内容了.需要实现的内容如下图: 二.头部的设计(全媒体订阅) 左侧是一张图片+标题 ,右侧是登录名 和上次登录的时 ...

  3. DIV+CSS实战(四)

    一.说明 在上篇博文<DIV+CSS(三)>中,一个页面基本上展示出来了!下面实现以下页面上的一些功能,比方批量删除等功能.这里以批量删除为例,批量禁止,批量启用和批量删除差不多,只不过一 ...

  4. DIV+CSS实战（五）

    一.说明 前面实现了关键词订阅模块,现在实现站点订阅模块,主要实现的是站点添加界面.站点添加界面里面实现一个提示框不在提示的功能(保存到cookie中),还有就是实现一个站点的选择框,包括输入文字自动 ...

  5. 2天驾驭DIV+CSS （实战篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  6. 第6天：DIV+CSS页面布局实战

    今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...

  7. 项目实战之玩转div+css制作自己定义形状

    项目需求 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...

  8. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  9. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

随机推荐

  1. WDA-BOPF业务对象处理框架

    SAP中的BOPF(Business Object Processing Framework) 正文 希望简化你的业务应用开发过程?业务对象处理框架(Business Object Processin ...

  2. mysql insert on duplicate key, update, ignore

    insert 语句中不能使用where,所以如果需要根据插入的数据在已有的数据库表是否重复做一些操作可以使用下面三种方法: 1. 使用insert,捕获duplicate错误 2. insert in ...

  3. MySql DATE_FORMAT函数用法

    DATE_FORMAT(date, format) 函数用法 DATE_FORMAT(date, format) 函数根据format字符串格式化date值. 1.把字符串转为日期格式 实例: SEL ...

  4. Haskell语言学习笔记（44）Lens（2）

    自定义 Lens 和 Isos -- Some of the examples in this chapter require a few GHC extensions: -- TemplateHas ...

  5. Haskell语言学习笔记（23）MonadReader, Reader, ReaderT

    MonadReader 类型类 class Monad m => MonadReader r m | m -> r where ask :: m r ask = reader id loc ...

  6. 使用robotium对android应用进行自动化测试

    所需要的环境: 1.eclipse 2.android development tools(ADT) 3.software develoment kit(SDK) 4.JDK 5.robotium 1 ...

  7. Delphi操作Excel(Use Oel)

    Use ComObj: procedure TorderMore1.BitBtn2Click(Sender: TObject);var  xlsFile:WideString;  var ExcelA ...

  8. centos7 升级python2.7 到python3.6（Centos7 安装Anaconda）

    Anaconda 下载 https://www.anaconda.com/download/#linux 下载文件 Anaconda3-5.2.0-Linux-x86_64.sh bash Anaco ...

  9. HTML的实际演练2

    1.html 换行: 如果你想在不产生新的段落下换行,就使用<br/><p>tishi is a praskdjf<br/>ldkfldj</p> 2. ...

  10. 好用的模板引擎NVelocity

    CastleNVelocity-1.1.1,使用方法: 把dll放到项目中,添加引用,修改配置的文件夹以及数据模型,最后在逻辑代码中调用即可. 封装到CommonHelper.cs using Sys ...