css+div布局案例-白红宇

css+div布局案例

阅读量：6203 次

发布时间：2019-06-21

本文共 2394 字，大约阅读时间需要 7 分钟。

给最外层的div命名一个class

有针对性的进行css布局。


             
      
       填写表格
      
        
              
       
                                                       姓名：                                                
                                               手机：                                                
                                               行业：                                                  
                                               地址：                            
            
             
             
             
           
                      
                                               详细地址：                                                  
                                               选择代理商：                            
            
             
             
             
              checked="checked"
             >
             
             {sh:$vo.name} 电话({sh:$vo.tel}) 
            
 
            
             
             
                                 
                                               备注：

这里的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: 0;-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的样式了。

转载地址：http://wwqca.baihongyu.com/

你可能感兴趣的文章

linux系统编程之进程（七）：system()函数使用【转】

查看>>

(译) JSON-RPC 2.0 规范(中文版)

今天听说了一个压缩解压整型的方式-group-varint

查看>>

【站点部署】解析二级域名并部署站点

查看>>

iOS常用第三方库大全，史上最全第三方库收集

Makefile中怎么使用Shell if判断

查看>>

Android RecyclerView 二级列表实现

查看>>

（转）dp动态规划分类详解

查看>>

GoldenGate 12.3微服务架构与传统架构的区别

查看>>

（转）Java随机数

查看>>

ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）

查看>>

Android WindowManager和WindowManager.LayoutParams的使用以及实现悬浮窗口的方法

查看>>

姓名：
手机：
行业：
地址：
详细地址：
选择代理商：	checked="checked" > {sh:$vo.name} 电话({sh:$vo.tel})
备注：