给最外层的div命名一个class

有针对性的进行css布局。

<div class="joinus-info">
<div class="form-title">填写表格</div>
<form action="{sh::U('Index/joinus')}" class="smart-green" onsubmit="return checkform();" method="post" id="myform">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="addTable">
<tr>
<td height="48" align="right"><strong>姓名:</strong></td>
<td colspan="3" class="lt"><input type="text" name="name" id="name" class="" size="45" value=""/></td>
</tr>
<tr>
<td height="48" align="right"><strong>手机:</strong></td>
<td colspan="3" class="lt"><input type="text" name="phone" id="phone" class="" size="45" onkeyup="value=value.replace(/[^\d]/g,'')" value=""/></td>
</tr>
<tr>
<td height="48" align="right"><strong>行业:</strong></td>
<td colspan="3" class="lt">
<select name="business" id="business">
<option value="">-请选择-</option>
<option value="LS">零售</option>
<option value="CY">餐饮</option>
<option value="QT">其他</option>
</select>
</td>
</tr>
<tr>
<td height="48" align="right"><strong>地址:</strong></td>
<td colspan="3" class="lt">
<div id='s_city'>
<select name="province" class="prov set_disabled"></select>
<select name="city" class="city " disabled="disabled"></select>
<select name="district" class="dist " disabled="disabled"></select>
</div>
</td>
</tr>
<tr>
<td height="48" align="right"><strong>详细地址:</strong></td>
<td colspan="3" class="lt">
<input type="text" name="address" id="address" class="address" value=""/>
</td>
</tr> <tr>
<td height="48" align="right"><strong>选择代理商:</strong></td>
<td colspan="3" class="lt" style="width: 80%;">
<volist name="agentData" id="vo" mod="3" key="k" empty="暂时没有数据">
<div style="display:inline-block;width:280px;margin:3px;">
<input type="radio" class="regular-radio" value="{sh:$vo.agent_id}" name="agent_id" id="agent_{sh:$k}" <eq name="k" value="1">checked="checked"</eq>><label for="agent_{sh:$k}"></label><span style="display:inline-block;padding:0px 0px 5px 5px;">{sh:$vo.name} 电话({sh:$vo.tel})</span>
</div>
<eq name="mod" value="2"><br/></eq>
</volist>
</td>
</tr>
<tr>
<td height="48" align="right"><strong>备注:</strong></td>
<td colspan="3" class="lt"><textarea name="remarks" class="" placeholder="请输入备注信息..." style="width:300px;height:80px;"></textarea></td>
</tr>
<tr>
<td></td>
<td class="lt">
<notempty name="agentData"><input type="submit" name="submit" value="提交" class="button btn-success"/></notempty >
</td>
</tr>
</table>
</form>
</div>

这里的joinus-info 就是最外层的class

css布局如下

.joinus-info{margin: 0 auto;width:100%;text-align: left;font-size: 16px;background-color:#EFEFEF;}
.joinus-info table{
margin-left:10%;
}
.joinus-info .form-title{
font-size: 20px;
text-align: center;
padding: 10px;
font-weight: bold;
color:#FB780F;
}

div joinus-info中有一个form smart-green

可以针对form进行布局

.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {
color: #555;
height: 40px;
line-height:15px;
width: 40%;
padding: 0px 0px 0px 10px;
margin-top: 2px;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline:;
-webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
font: normal 14px/14px Arial, Helvetica, sans-serif;
}
.smart-green input[type="text"].address{width: 60%;} /*这里面存在一个执行顺序的问题class先执行,class下面的input后执行*/
.smart-green textarea{
height:100px;
padding-top: 10px;
} .smart-green select{
width: 15%;
} .smart-green input[type="radio"]{
margin-top: 10px;
} .smart-green .button {
background-color: #9DC45F;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-border-radius: 5px;
border: none;
padding: 10px 25px 10px 25px;
color: #FFF;
text-shadow: 1px 1px 1px #949494;
}
.smart-green .button:hover {
background-color:#80A24A;
}

这样布局,不会对其他的模块造成影响。而且目标明确。有意思。

这样form下的表单元素就会加入smart-green的样式了。

css+div布局案例的更多相关文章

  1. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  2. CSS+DIV布局初练—DIV元素必须成对出现?

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

  3. 网站实战 从效果图开始CSS+DIV 布局华为网站

    经过我们的前面css的学习,我们已经分模块的掌握的CSS的技术,但是,要是完整的做一个页面,我们还没有接触过,这次呢,小强老师来和大家完整的利用CSS+DIV做一个网站案例,我们来模仿下华为的网站. ...

  4. CSS:CSS+DIV布局网页

    现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...

  5. 关于css+div布局的疑问 2017-03-19

    第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...

  6. 回答: 2017-03-19的关于css+div布局的疑问 2017-04-05

    原问题为红色,回答为黑色 第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个 ...

  7. CSS+DIV布局应用(2015年06月10日)

    Div+css布局应用 一.html元素分类 2.1.顶级元素(Top-level element) 定义 组成html页面最顶级标签 特点 1. 不可设置宽高: 2. 必须在文档流中处于最高级位置: ...

  8. 十天学会DIV+CSS(DIV布局)

    一列布局: 一列固定宽度.一列固定宽度居中.一列自适应宽度.一列自适应宽度居中 一列固定宽度 <head> <style type="text/css"> ...

  9. css+div 布局遇到的小常识

    /根目录../上层目录举例如下: 在photo.css文件中写入: div.ls{ background:url(../photo/framels.jpg) no-repeat left; }div. ...

随机推荐

  1. 前端MVVM学习之KnockOut(二)

    现在开始学习Knockout并且做个简单的例子. Knockout是建立在以下三个核心功能之上的: 1.Observables and dependency tracking(属性监控与依赖跟踪) 2 ...

  2. Silverlight 结合ArcGis 使用inforwindow

    原文 http://www.dotblogs.com.tw/justforgood/archive/2012/05/10/72089.aspx 也许有些人不知道什么事inforwindow,简单来说就 ...

  3. 【转】如何定制android源码的编译选项 & 后期安装? ---- 不错

    原文网址:http://blog.sina.com.cn/s/blog_3e3fcadd0100z3o9.html Android编译过程比较长,配置起来也很麻烦.现仅就工作遇到的问题做个总结.所用硬 ...

  4. cf479D Long Jumps

    D. Long Jumps time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  5. python使用post登陆电子科大信息门户并保存登陆后页面

    python使用post登陆电子科大信息门户并保存登陆后页面 作者:vpoet mail:vpoet_sir@163.com #coding=utf-8 import HTMLParser impor ...

  6. Volist标签 key值的使用

    Volist标签是thinkphp框架view中常用到的一个标签.主要用于在模板中循环输出数据集或者多维数组.今天使用key属性时出了点问题,记录一下. volist标签(循环输出数据) 闭合 非闭合 ...

  7. 机器学习 1、R语言

    R语言 R是用于统计分析.绘图的语言和操作环境.R是属于GNU系统的一个自由.免费.源代码开放的软件,它是一个用于统计计算和统计制图的优秀工具. 特点介绍 •主要用于统计分析.绘图.数据挖掘 •R内置 ...

  8. poj 2411 Mondriaan's Dream(状态压缩dp)

    Description Squares and rectangles fascinated the famous Dutch painter Piet Mondriaan. One night, af ...

  9. mysql 服务不见了的解决办法

    昨天打开电脑mysql突然连接不了了,去服务里找,却找不到mysql服务了 解决:5.0版本:开始->运行->cmd,进到mysql安装的bin目录D:\MySQL\bin>mysq ...

  10. js执行环境深入研究

    js 声明函数是创建函数对象的过程,当创建函数对象时,函数对象的[[scope]] =连当前执行环境对象的作用域(栈顶执行环境--当执行函数时,js会将该函数的执行环境对象入栈) 当为全局函数时,如: ...