一、说明
作为一个后台的程序员，我也是很少写前端，最近有一个项目，前端主要是由我来负责，就把我在项目中所学到的东西，记录下来！我的页面要嵌入到另一个系统中，所以，并不是按照传统的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>
效果图：
未完......