html格式的两个部分，如何仅使用html5和css3创建仪表板？

时间：2015-07-27 06:17:28

标签： html css

我是HTML / CSS的新手，所以我需要你的帮助人员。我在左侧创建了一个带有表单的页面，我希望在右侧显示一个仪表板，我试图这样做但没有得到。告诉我如何解决这个问题。

服务V1.html 

<body>
<div id="wrapper">
<div id="section1">
<form class="cbp-mc-form">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Service</legend>
<div class="cbp-mc-column">
    <label for="number">Number</label>
        <input type="text" id="number" name="number" placeholder="575">
        <label for="client">Client</label>
        <select id="client" name="client">
            <option>Choose a Client</option>
            <option>C1</option>
            <option>C2</option>
            <option>C3</option>
        </select>
        <label for="name">Name</label>
        <input type="text" id="name" name="name" placeholder="Kumar">
        <label for="email">Email Address</label>
        <input type="text" id="email" name="email" placeholder="kumar@name.com">
        <label for="category">Category</label>
        <select id="category" name="category">
            <option>Choose a Category</option>
            <option>C1</option>
            <option>C2</option>
            <option>C3</option>
        </select>
        <label for="description">Description</label>
        <textarea id="description" name="description"></textarea>
        <label for="creation_date">Date of creation</label>
        <input type="text" id="creation_date" name="creation_date" placeholder="MM/DD/YYYY">
        <label for="end_date">End Date</label>
        <input type="text" id="end_date" name="end_date" placeholder="MM/DD/YYYY">
    </div>    
    <div class="cbp-mc-column">
    <label for="attachment">Attachment</label>
        <input type="file" id="attachment" multiple="multiple" name="attachment">
    <label for="title">Title</label>
    <input type="text" id="title" name="title" placeholder="">
    <label for="comment">Comment</label>
    <textarea id="comment" name="comment"></textarea>
    <input class="cbp-sm-submit" type="submit" value="Select All" />
    <input class="cbp-sm-submit" type="submit" value="Remove" />
    <input class="cbp-sm-submit" type="submit" value="Add Item" />
    <input class="cbp-sm-submit" type="submit" value="Download" />
    <label for="select_files">Select files</label>
    <select id="select_files" name="select_files" multiple="multiple" style="height:206px">
    </select>
</div>
<div class="cbp-mc-submit-wrap">
<input class="cbp-mc-submit" type="submit" value="Submit" />
<input class="cbp-mc-submit" type="submit" value="Cancel" />
<input class="cbp-mc-submit" type="reset" value="Clear" />
</div>
</fieldset>
</form>
</div>
<div class="section2">
Section 2 will come here.
</div>
</body>
</html>

的style.css 

#wrapper {
width: 1400px;
background-color: #FFF;
margin-left:auto;
margin-right:auto;
}
#section1 {
float: left;
width:650px;
}
#section2 {
float: right;
width: 750px;
}
fieldset.scheduler-border {
    border: none;
    box-shadow:  5px 5px 25px #CCCCCC;
    border-radius: 5px;
}
legend.scheduler-border {
    background: #10689a;
    color: #fff;
    padding: 5px 10px ;
    font-size: 22px;
    box-shadow: 0 0 0 1px #CCC;
    border-radius:2px;
    margin-left: 20px;
}
.cbp-mc-form {
    position: relative;
}
.cbp-mc-form:before, 
.cbp-mc-form:after { 
    content: " "; display: table; 
}
.cbp-mc-form:after { 
    clear: both; 
}
.cbp-mc-column {
    width: 40%;
    padding: 10px 10px;
    float: left;
}
.cbp-mc-form label {
    font-weight:bold;
    display: block;
    padding: 10px 5px 5px 2px;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor:pointer;
}
.cbp-mc-form input,
.cbp-mc-form textarea
{
    font-family: 'Lato', Calibri, Arial, sans-serif;
    line-height: 1.5;
    font-size: 1em;
    padding: 5px 10px;
    color: #000;
    display: block;
    width: 230px;
    background: transparent;
}
.cbp-mc-form select 
{
    font-family: 'Lato', Calibri, Arial, sans-serif;
    line-height: 1.5;
    font-size: 1em;
    padding: 5px 10px;
    color: #000;
    display: block;
    width: 252px;
    background: transparent;
}
.cbp-mc-form input,
.cbp-mc-form textarea,
.cbp-mc-form select {
    border: 1px solid #CCC;
    box-shadow:3px 3px 10px #F2F2F2;
}
.cbp-mc-form textarea {
    min-height: 60px;
    min-width:230px;
}
.cbp-mc-form input:focus,
.cbp-mc-form select:focus,
.cbp-mc-form textarea:focus,
.cbp-mc-form label:active + input,
.cbp-mc-form label:active + textarea {
    outline: none;
    border: 1px solid #0099FF;
}
.cbp-mc-form select:focus {
    outline: none;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: #10689a;
    font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #10689a;
    font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #10689a;
    font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #10689a;
    font-style: italic;
}
.cbp-mc-submit-wrap {
    text-align: center;
    padding-top:40px;
    padding-left:210px;
    clear: both;
}
.cbp-mc-form input.cbp-mc-submit {
background: #10689a;
border: none;
color: #fff;
width: auto;
cursor: pointer;
text-transform: uppercase;
display: inline-block;
padding: 5px 20px;
font-size: 1em;
border-radius: 2px;
letter-spacing: 1px;
}
.cbp-mc-form input.cbp-mc-submit:hover {
    background: #1478b1;
}
.cbp-mc-form input.cbp-mc-submit:active
{
transition: all .1s linear;
    box-shadow: 0 2px 0 #003333;
    transform: translateY(7px);
}
.cbp-mc-form input.cbp-sm-submit
{
    background: #0099FF;
    color:#FFF;
    border:none;
    border-radius:5px;
    margin-top:10px;
    display:inline-block;
    padding:5px;
    width:100px;
    text-align:center;
    cursor:pointer;
    font-size:1em;
}
.cbp-mc-form input.cbp-sm-submit:hover {
    background: #00CCFF;
    border-radius:5px;
}
.cbp-mc-form input.cbp-sm-submit:active{
    border:none;
}

2 个答案:

答案 0 :(得分：0)

您的代码正常运行！

您只需在<div class="section2">...</div>上添加仪表板代码，例如

<div class="section2">
   <fieldset class="scheduler-border">
      <legend class="scheduler-border">dashboard</legend>
         <div class="cbp-mc-column">
            this is dashboard
         </div>
    </fieldset>
</div>

图片

Html

现在您可以在仪表板中添加菜单

<div class="section2">
    <fieldset class="scheduler-border">
        <legend class="scheduler-border">dashboard</legend>
        <div class="cbp-mc-column">
          My Dashboard
          <ul class="vert-one">
             <li><a href="#" title="CSS Menus" class="current">Home</a></li>
             <li><a href="#" title="CSS Menus">Articles</a></li>
             <li><a href="#" title="CSS Menus">Topics</a></li>
             <li><a href="#" title="CSS Menus">Forum</a></li>
             <li><a href="#" title="CSS Menus">Blog</a></li>
             <li><a href="#" title="CSS Menus">Subscribe</a></li>
             <li><a href="#" title="CSS Menus">Contact Us</a></li>
          </ul> 
        </div>
    </fieldset>
</div>

＆安培; 

ul.vert-one{margin:0;padding:0;list-style-type:none;display:block;
font:bold 16px Helvetica, Verdana, Arial, sans-serif;line-height:165%;
width:200px;}

ul.vert-one li{margin:0;padding:0;border-top:1px solid cdcdcd;
border-bottom:1px solid 676767;}

ul.vert-one li a{display:block;text-decoration:none;color:#000;padding:0 0 0 20px;width:180px;}

ul.vert-one li a:hover{
background:#00CCFF url("images/vert-one_arrow.gif") no-repeat 0 9px;}

ul.vert-one li a.current,ul.vert-one li a.current:hover{
background:#10689A url("images/vert-one_arrow.gif") no-repeat 0 9px;}

图片

menu

用于更改仪表板以将css代码更改为

#wrapper {
width: 1400px;
background-color: #FFF;
margin-left:auto;
margin-right:auto;
}
#section1 {
float: right;
width:650px;
}
#section2 {
float: left;
width: 750px;
}

这里的完整代码http://cssdeck.com/labs/collab/x34ywhga

答案 1 :(得分：0)

我在您的代码中注意到您的.section2与form重叠，并background-color设置了.section2，为了解决这个问题，您可以使用以下其中一个想法

1 - 浮动离开form并将保证金设为.section2：

*{
    box-sizing: border-box;
}

.left-form {
    padding: 40px 10px;
    margin: 0;
    float: left;
    width: 250px;
    background: #44aac1;
}

.section2 {
    height: 300px;
    background: #ddd;
    margin-left: 250px;
}
<form class="left-form">
  <input type="text" value"some text"/>
  <button>submit</button>
</form>


<div class="section2" id="content">
    Section 2 will come here.
</div>

2 - 将两个元素浮动并将宽度设置为.section2：

*{
    box-sizing: border-box;
}

.left-form {
    padding: 40px 10px;
    margin: 0;
    float: left;
    width: 250px;
    background: #44aac1;
}

.section2 {
    float: left; /*or right*/
    height: 300px;
    background: #ddd;
    width: calc(100% - 250px);
}
<form class="left-form">
  <input type="text" value"some text"/>
  <button>submit</button>
</form>


<div class="section2" id="content">
    Section 2 will come here.
</div>

相关问题
最新问题