Question

我正在尝试创建一个包含各种自定义效果的表单，如框阴影等。我正在尝试创建表单的标题，如示例应用程序 enter image description here

我已经尝试过但也做了一个小提琴，但实际上该怎么做？我无法实现。这是我的小提琴链接 My Fiddle

这是我为创建表单标题所做的努力

#headerLabel{
    background-color: #3d6cad;
display: inline;
float: left;
font-weight: bold;
margin: 33px 10px 2px;
text-align: right;
width: 135px;
color:white;
}

有人请帮忙

Answer 1

这里你去code。

不要使用表格进行布局。

这是一个非常简单的例子，我希望这是你要求的：

css：

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

body {
  font: 100%/1.6 'open-sans',sans-serif;
}

a {
  text-decoration: none;
  color:#f4f4f4;
}

.header {
  width: 100%;
  padding: 1em 3em;
  background:#3D6CAD;
  color:#fff;
  font-size: 0.8em;
}

.header h3 {
  font-size: 1.2em;
  color:#F2F2F2;
  font-weight: normal;
}

.header p {
  color:#F4F4F4;
  font-size: 0.9em;
}

.sub-text {

}

HTML：

<html>
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
</head>
<body>
  <div class="header">
    <h3 class="user">Jeet Chartet</h3>
    <p class="sub-text">
      <a href="#">sda @ dsa</a>

    </p>
  </div>
</body>
</html>

Answer 2

＆＃13;

.content {
  width: 100%;
  height:300px;
  background:#FFF;
  border:1px solid #aaa;
}


.box-content {
  box-shadow: 0 1px 2px #c9c9c9;
  -moz-box-shadow: 0 1px 2px #c9c9c9;
  -webkit-box-shadow: 0 1px 2px #c9c9c9;
  border-radius: 2px;
  background-color: #3d6cad;
  display: block;
  color:white;
  height:80px;
}

.box-content img{
position:absolute;
 border:5px solid #fff;
 box-shadow: 0 2px 2px #bababa;
  height:110px;
  width:100px;
  right:50px;
  top:50px
}

.box-content span{
font-size:20px;
padding-top:30px; 
display:inline-block;
  font-family:arial;
}

.box-content:hover {
  box-shadow: 0 2px 2px #bababa;
  -moz-box-shadow: 0 2px 2px #bababa;
  -webkit-box-shadow: 0 2px 2px #bababa;
}

.box-container {
  
  
  
}

＆＃13;

<div class="content">
  

<div class="box-content">
<span>
Jeet Chatterjee
</span>
  
<img src="http://www.cvs.rochester.edu/assets/images/Placeholder_person.png" title="Click to edit" width="100" height="110"/>
</div>
   
<div class="box-container">
 
</div>


</div>

＆＃13;

如何使用带阴影和颜色的CSS自定义div

2 个答案: