码迷,mamicode.com
首页 > 其他好文 > 详细

div边框加入文字标题

时间:2017-06-29 09:55:32      阅读:490      评论:0      收藏:0      [点我收藏+]

标签:form   htm   hit   style   html4   ges   idt   set   mode   

效果图:

技术分享

 

代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div.aaa{
    width:70%;
    height:100%;
    padding:5px 30px;
    margin-top:50px;
    margin-left:150px;
    border:2px solid #CCCCCC;
}
span.title{
    display:block;
    width:100px;
    height:30px;
    position:relative;
    top:-15px;
    text-align: center;
    background: white;
}
</style>
</head>
<body>
<form:form modelAttribute="organizationManageDto" id="organizationManageForm">
    <div class="panel">
    <div class="panel-body">
    <div class="aaa">
        <span class="title">成本计算</span>
        <div class="row">
            <div class="col-md-2" align="right">
                <label class="control-label"><span class="red_star">*</span>机构编号:</label>
            </div>
            <div class="col-md-4" style="width: 30%">
                <input placeholder="机构编号" maxlength="16"/>
            </div>
        </div>
    </div>
    </div>
    </div>
</form:form>
</body>
</html>

div边框加入文字标题

标签:form   htm   hit   style   html4   ges   idt   set   mode   

原文地址:http://www.cnblogs.com/qingzhongcao/p/7092656.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!