1. 首页
  2. 问答
  3. 将表格调整为不同大小

将表格调整为不同大小

2017-04-17 75 views
0

嗨我正在制作一个表单，它在笔记本电脑屏幕上看起来很好，但是当我切换到另一个屏幕时它不适应它，我应该怎么做？ 有没有我可以添加到造型，可以帮助 这里的任何东西是代码：将表格调整为不同大小

/* generic */ 
 

 
body { 
 
    color: #3F3F3F; 
 
    font-family: 'Droid Sans', Tahoma, Arial, Verdana sans-serif; 
 
    font-size: 16px; 
 
    background: #3F3F3F; 
 
} 
 

 
article, 
 
aside, 
 
details, 
 
figcaption, 
 
figure, 
 
footer, 
 
header, 
 
hgroup, 
 
menu, 
 
nav, 
 
section { 
 
    display: block; 
 
} 
 

 
h1 { 
 
    font-family: 'Questrial', Verdana, sans-serif; 
 
    text-align: center; 
 
    font-size: 40px; 
 
    padding: 0; 
 
    margin: 0 0 20px 0; 
 
    position: relative; 
 
    color: #8C8C8C; 
 
} 
 

 

 
/** have a nice ampersand **/ 
 

 
h1:after { 
 
    font-size: 25px; 
 
    color: #D6CFCB; 
 
    content: '&'; 
 
    text-align: center; 
 
    display: block; 
 
    width: 100%; 
 
    font-family: 'Alice', Verdana, serif; 
 
    text-shadow: 0px 1px 0px #fff; 
 
} 
 

 

 
/** create the gradient bottom **/ 
 

 
h1:before { 
 
    position: absolute; 
 
    bottom: 15px; 
 
    content: ' '; 
 
    text-align: center; 
 
    display: block; 
 
    height: 2px; 
 
    width: 100%; 
 
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(182, 180, 180, 0.7) 42%, rgba(180, 178, 178, 0) 43%, rgba(168, 166, 166, 0) 50%, rgba(180, 178, 178, 0) 57%, rgba(182, 180, 180, 0.7) 58%, rgba(238, 237, 237, 0.3) 90%, rgba(255, 255, 255, 0) 100%); 
 
    /* FF3.6+ */ 
 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(42%, rgba(182, 180, 180, 0.7)), color-stop(43%, rgba(180, 178, 178, 0)), color-stop(50%, rgba(168, 166, 166, 0)), color-stop(57%, rgba(180, 178, 178, 0)), color-stop(58%, rgba(182, 180, 180, 0.7)), color-stop(90%, rgba(238, 237, 237, 0.3)), color-stop(100%, rgba(255, 255, 255, 0))); 
 
    /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(182, 180, 180, 0.7) 42%, rgba(180, 178, 178, 0) 43%, rgba(168, 166, 166, 0) 50%, rgba(180, 178, 178, 0) 57%, rgba(182, 180, 180, 0.7) 58%, rgba(238, 237, 237, 0.3) 90%, rgba(255, 255, 255, 0) 100%); 
 
    /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(182, 180, 180, 0.7) 42%, rgba(180, 178, 178, 0) 43%, rgba(168, 166, 166, 0) 50%, rgba(180, 178, 178, 0) 57%, rgba(182, 180, 180, 0.7) 58%, rgba(238, 237, 237, 0.3) 90%, rgba(255, 255, 255, 0) 100%); 
 
    /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(182, 180, 180, 0.7) 42%, rgba(180, 178, 178, 0) 43%, rgba(168, 166, 166, 0) 50%, rgba(180, 178, 178, 0) 57%, rgba(182, 180, 180, 0.7) 58%, rgba(238, 237, 237, 0.3) 90%, rgba(255, 255, 255, 0) 100%); 
 
    /* IE10+ */ 
 
    background: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(182, 180, 180, 0.7) 42%, rgba(180, 178, 178, 0) 43%, rgba(168, 166, 166, 0) 50%, rgba(180, 178, 178, 0) 57%, rgba(182, 180, 180, 0.7) 58%, rgba(238, 237, 237, 0.3) 90%, rgba(255, 255, 255, 0) 100%); 
 
    /* W3C */ 
 
} 
 

 

 
/* Here comes to good stuff : content styling */ 
 

 
#content { 
 
    position: relative; 
 
    margin: auto; 
 
    width: 950px; 
 
    min-height: 300px; 
 
    z-index: 100; 
 
    padding: 30px; 
 
    border: 1px solid #383838; 
 
    /* My stipped background */ 
 
    background: #D1D1D1; 
 
    /* Old browsers */ 
 
    background: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px); 
 
    /* FF3.6+ */ 
 
    background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px); 
 
    /* FF3.6+ */ 
 
    background: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px); 
 
    /* FF3.6+ */ 
 
    background: repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px); 
 
    /* FF3.6+ */ 
 
    /*border-radius*/ 
 
    -webkit-border-radius: 8px; 
 
    -moz-border-radius: 8px; 
 
    border-radius: 8px; 
 
    /*box-shadow*/ 
 
    -webkit-box-shadow: 0px 1px 6px #3F3F3F; 
 
    -moz-box-shadow: 0px 1px 6px #3F3F3F; 
 
    box-shadow: 0px 1px 6px #3F3F3F; 
 
} 
 

 

 
/** my "fake" background that will hover the stripes **/ 
 

 
#content:after { 
 
    background: #F9F9F9; 
 
    margin: 10px; 
 
    position: absolute; 
 
    content: " "; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    z-index: -1; 
 
    border: 1px #E5E5E5 solid; 
 
    /*border-radius*/ 
 
    -webkit-border-radius: 8px; 
 
    -moz-border-radius: 8px; 
 
    border-radius: 8px; 
 
} 
 

 

 
/*** form styling **/ 
 

 

 
/** we remove the red glow around required fields since we are already using the red star */ 
 

 
input:required, 
 
textarea:required, 
 
select, 
 
.checkbox, 
 
.Date { 
 
    -moz-box-shadow: none; 
 
    -webkit-box-shadow: none; 
 
    -o-box-shadow: none; 
 
    box-shadow: none; 
 
} 
 

 

 
/** inputs and textarea**/ 
 

 
input:not([type="submit"]), 
 
textarea, 
 
select .Date { 
 
    outline: none; 
 
    display: inline; 
 
    padding: 2px 1px; 
 
    border: 1px dashed #DBDBDB; 
 
    color: #3F3F3F; 
 
    font-family: 'Droid Sans', Tahoma, Arial, Verdana sans-serif; 
 
    font-size: 14px; 
 
    /*border-radius*/ 
 
    -webkit-border-radius: 2px; 
 
    -moz-border-radius: 2px; 
 
    border-radius: 2px; 
 
    /*transition*/ 
 
    -webkit-transition: background 0.2s linear, box-shadow 0.6s linear; 
 
    -moz-transition: background 0.2s linear, box-shadow 0.6s linear; 
 
    -o-transition: background 0.2s linear, box-shadow 0.6s linear; 
 
    transition: background 0.2s linear, box-shadow 0.6s linear; 
 
} 
 

 
input:not([type="submit"]):active, 
 
textarea:active, 
 
input:not([type="submit"]):focus, 
 
textarea:focus .checkbox { 
 
    background: #F7F7F7; 
 
    border: dashed 1px #969696; 
 
    /*box-shadow*/ 
 
    -webkit-box-shadow: 2px 2px 7px #E8E8E8 inset; 
 
    -moz-box-shadow: 2px 2px 7px #E8E8E8 inset; 
 
    box-shadow: 2px 2px 7px #E8E8E8 inset; 
 
} 
 

 
input:not([type="submit"]), 
 
{ 
 
    height: 20px; 
 
} 
 

 

 
/* placeholder */ 
 

 
::-webkit-input-placeholder { 
 
    color: #BABABA; 
 
    font-style: italic; 
 
} 
 

 
input:-moz-placeholder, 
 
textarea:-moz-placeholder { 
 
    color: #BABABA; 
 
    font-style: italic; 
 
} 
 

 
textarea { 
 
    min-height: 150px; 
 
    resize: vertical 
 
} 
 

 

 
/** labels**/ 
 

 

 
/** adding our icon font !! */ 
 

 
.iconic:before .checkbox { 
 
    font-size: 25px; 
 
    font-family: 'Alice', Verdana, serif; 
 
} 
 

 
.iconic.link:before { 
 
    content: '/'; 
 
} 
 

 
.iconic.quote-alt:before { 
 
    content: "'"; 
 
} 
 

 
.iconic.comment:before { 
 
    content: "q"; 
 
} 
 

 
.iconic.user:before { 
 
    content: "u"; 
 
} 
 

 
.iconic.mail-alt:before { 
 
    content: "M"; 
 
} 
 

 
label { 
 
    color: #3d3d5c; 
 
    -webkit-transition: color 1s ease; 
 
    -moz-transition: color 1s ease; 
 
    transition: color 1s ease; 
 
} 
 

 
label:hover { 
 
    color: #191919; 
 
} 
 

 
label:before { 
 
    color: #66b3ff; 
 
    -webkit-transition: color 1s ease; 
 
    -moz-transition: color 1s ease; 
 
    transition: color 1s ease; 
 
} 
 

 
label:hover:before { 
 
    color: #969696; 
 
    -webkit-transition: color 1s ease; 
 
    -moz-transition: color 1s ease; 
 
    transition: color 1s ease; 
 
} 
 

 
p { 
 
    margin-bottom: 20px; 
 
} 
 

 
.indication, 
 
select, 
 
option, 
 
.checkbox, 
 
.Date { 
 
    color: #878787; 
 
    font-size: 12px; 
 
    font-style: italic; 
 
    text-align: right; 
 
    padding-right: 10px; 
 
} 
 

 
.required { 
 
    color: #E5224C; 
 
} 
 

 

 
/** Styling the send button **/ 
 

 
input[type=submit], 
 
input[type=reset] { 
 
    margin-left: 60px; 
 
    cursor: pointer; 
 
    background: none; 
 
    border: none; 
 
    font-family: 'Alice', serif; 
 
    color: #767676; 
 
    font-size: 16px; 
 
    padding: 8px 2px; 
 
    border: 1px solid #E0E0E0; 
 
    text-shadow: 0px 1px 1px #E8E8E8; 
 
    background: rgb(247, 247, 247); 
 
    background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1))); 
 
    background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%); 
 
    background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%); 
 
    background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%); 
 
    background: linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%); 
 
    /*border-radius*/ 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    /*box-shadow*/ 
 
    -webkit-box-shadow: 0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA; 
 
    -moz-box-shadow: 0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA; 
 
    box-shadow: 0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA; 
 
    /*transition*/ 
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 

 
input[type=submit]:hover, 
 
input[type=reset]:hover { 
 
    color: #686868; 
 
    border-color: #CECECE; 
 
    background: rgb(244, 244, 244); 
 
    background: -moz-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1))); 
 
    background: -webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%); 
 
    background: -o-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%); 
 
    background: -ms-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%); 
 
    background: linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%); 
 
    /*box-shadow*/ 
 
    -webkit-box-shadow: 0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; 
 
    -moz-box-shadow: 0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; 
 
    box-shadow: 0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; 
 
} 
 

 
input[type=submit]:active, 
 
input[type=submit]:focus, 
 
input[type=reset]:active, 
 
input[type=reset] :focus, 
 
select:focus, 
 
.date { 
 
    position: relative; 
 
    top: 1px; 
 
    color: #515151; 
 
    background: rgb(234, 234, 234); 
 
    background: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1))); 
 
    background: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%); 
 
    background: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%); 
 
    background: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%); 
 
    background: linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%); 
 
    /*box-shadow*/ 
 
    -webkit-box-shadow: 0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; 
 
    -moz-box-shadow: 0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; 
 
    box-shadow: 0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; 
 
} 
 

 
.checkbox { 
 
    display: inline; 
 
} 
 

 
;
<link href='http://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet' type='text/css'> 
 
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"> 
 
<div id="content"> 
 
    <h1>Telegramme National </h1> 
 

 
    <form action=" " method="post" autocomplete="on"> 
 

 

 
    <label for="idTelegramme" class="icon-key"> ID généré 
 
       <span class="required">*</span> 
 
      </label> 
 
    <input type="text" name="expediteur" id="expediteur" required="required" placeholder="automatique" disabled> 
 

 
    <label for="expediteur" class="icon-arrow-up"> Expediteur 
 
       <span class="required">*</span> 
 
      </label> 
 
    <input type="text" name="expediteur" id="expediteur" required="required" placeholder="Nom Expediteur" /> 
 

 

 
    <label for="adresseEx" class="icon-home"> Adresse de l'Expediteur 
 
       <span class="required">*</span> 
 
      </label> 
 
    <input type="text" name="adresseEx" id="adresseEx" required="required" placeholder="Adressse de l'Expediteur" /> 
 

 

 
    <label for="destinataire" class="icon-arrow-down"> Destinataire 
 
       <span class="required">*</span> 
 
      </label> 
 
    <input type="text" name="destinataire" id="destinataire" required="required" placeholder="Nom Destinataire" /> 
 

 
    <label for="adresseDest" class="icon-home"> Adresse Destinataire 
 
       <span class="required">*</span> 
 
      </label> 
 
    <input type="text" name="adresseDest" id="adresseDest" required="required" placeholder="Adressse du Destinataire" /> 
 

 
    <label for="destination" class="icon-map-marker"> Destination 
 
       <span class="required">*</span> 
 
      </label> 
 
    <input type="text" name="destination" id="destination" required="required" placeholder="Votre Destination" /> 
 

 

 

 
    <label for="numTel" class="icon-phone"> Téléphone 
 
       <span class="required">*</span> 
 
      </label> 
 
    <input type="text" name="telephone" id="telephone" required="required" placeholder="composé de 8 chiffres" maxlength="8" /> 
 

 
    <label for="codePostal" class="icon-screenshot"> Code Postal 
 
       <span class="required">*</span> 
 
      </label> 
 
    <input type="text" name="codePostal" id="codePostal" required="required" placeholder="composé de 4 chiffres" maxlength="4" /> 
 

 
    <label for="select" class="icon-tag"> Canal de Reception:</label> 
 

 
    <select id="canalReception" name="canalReception"> 
 
        <option value="0">Selectionnez</option> 
 
        <option value="1">FAX</option> 
 
        <option value="2">SMS </option> 
 
        <option value="3">Telex National</option> 
 
        <option value="4">Serveur IVR</option> 
 
        <option value="5">Service 1714 </option> 
 
        
 
       </select> 
 

 

 

 

 
    <label class="icon-plus"> Service Supplémentaires : </label> 
 

 
    <label for="checkbox" class="checkbox"> 
 
     
 
     <input class="checkbox" type="checkbox" id="inlineCheckbox1" value="option1" > Copie 
 

 
     <input class="checkbox" type="checkbox" id="inlineCheckbox2" value="option2"> Urgent 
 
    
 
     
 
     <input class="checkbox" type="checkbox" id="inlineCheckbox3" value="option3" > Accusé de Reception 
 
     
 
       
 

 
    
 
     
 

 

 
     
 
       <label class="icon-folder-open" for="select">Emplacement : </label> 
 

 
    <select class="select" id="canalReception" name="canalReception"> 
 
        <option value="0">Selectionnez </option> 
 
        <option value="1">Boîte aux Lettres </option> 
 
        <option value="2">Rejet Box </option> 
 
       </select> 
 
    <p> 
 
     <input type="submit" value=" Formuler " /> 
 
     <input type="submit" value=" Sauvgarder " /> 
 
     <input type="submit" value=" Envoyer " /> 
 
     <input type="reset" value=" Vider tout les champs " /> 
 
     <input type="submit" value=" Créer une Serie " /> 
 
    </p>

来源

2017-04-17 Narjes Ben Slimen

+0

你的意思是“当我切换到另一个画面并不适应它”？解释你期望发生的事情。哪个屏幕宽度？ – ZimSystem

回答

0

您需要使用CSS3媒体查询，在那里你“形容”你的网站应该如何看起来像不同的屏幕尺寸。

看一看这个教程：https://css-tricks.com/css-media-queries/

它看起来像这样：

@media screen and (min-width: 600px) and (max-width: 960px) { /* Your CSS rules for screen width between 600px and 960px */ }

来源

2017-04-17 10:05:32

+0

我认为有一个引导程序命令可以自动执行此操作，而无需定义每种类型的屏幕 –

+0

是的，它是Bootstrap网格，但您必须重写所有HTML代码以使用Bootstrap类。但是，这并不完美，我认为在大多数情况下，您仍然想使用自己的媒体查询来调整布局https://getbootstrap.com/css/#grid –

相关问题

 相关问题