section2

section2

关注
发信
关注(28)粉丝(399)

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

Closed. This question needs details or clarity. It is not currently accepting answers. Learn more。
想改进这个问题吗？添加细节并通过editing this post澄清问题。
四年前关闭。
我是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="[email protected]">
        <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>

样式.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;
}

最佳答案

我注意到在你的代码中，你的.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>

09-07 06:43
Powered by LMLPHP ©2024 section2 0.044546