一、说明

　　作为一个后台的程序员，我也是很少写前端，最近有一个项目，前端主要是由我来负责，就把我在项目中所学到的东西，记录下来！我的页面要嵌入到另一个系统中，所以，并不是按照传统的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. vue深入了解组件——组件注册

    一.组件名 在注册一个组件的时候,我们始终需要给它一个名字.比如在全局注册的时候我们已经看到了: Vue.component('my-component-name', { /* ... */ }) J ...

  2. Java操作Excel之Poi

    package com.java1234.poi; import java.io.FileOutputStream; import org.apache.poi.hssf.usermodel.HSSF ...

  3. delphi实现映射和断开网络驱动器

    type TNetDiskMapper=class private FNetResource: TNetResource; FUserName,FPassWord:PWideChar; public ...

  4. pyspark dataframe 格式数据输入 做逻辑回归

    该方法好处是可以调节阈值,可调参数比其他形式模型多很多. [参照]http://blog.csdn.net/u013719780/article/details/52277616 [3种模型效果比较: ...

  5. dubbo通信协议

    对dubbo的协议的学习,可以知道目前主流RPC通信大概是什么情况,本文参考dubbo官方文档 http://dubbo.io/User+Guide-zh.htm dubbo共支持如下几种通信协议: ...

  6. 一些unity问题的收集

    ---恢复内容开始--- 1.Mono打不开且鼠标点击标签页无反应的解决办法 http://answers.unity3d.com/questions/574157/monodevelop-not-o ...

  7. Array Product(模拟)

    Array Product http://codeforces.com/problemset/problem/1042/C You are given an array aa consisting o ...

  8. DOS中命令的格式

    ---------------siwuxie095 一.DOS中,命令使用格式的一般形式 用中文表达的形式为: [路径]  关键字  [盘符]  [路径]  文件名  [扩展名]  (参数)  [参数 ...

  9. 利用python实现冒泡排序

    1.先生存一个随机数组成的list 2.然后进行排序,把大的元素放在后面,小的元素放在前面,最终实现从小到大排列 首先生存一个随机数组成的list import random # print(sys. ...

  10. 215. Kth Largest Element in an Array（QuickSort）

    Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...