Husomo kwa uweza kutengeneza:
- Kuhumu kwa kurejeshwa: Mafunzo Kuhumu kwa kurejeshwa: Picha ya mbili
- Kuhumu kwa kurejeshwa: Picha ya nne Kuhumu kwa kurejeshwa: Fomu ya usajili
Mwongozo wa kusoma kwa CSS kwa uweza kutengeneza fomu ya kizingo ya kuingia.
Fomu ya kizingo ya kuingia inayowakilisha
Husomo kwa uweza kutengeneza fomu ya kizingo ya kuingia
Kichwa cha kwanza - Ongeza HTML:
Tumia elementi ya <form> kuhandisha ingia. Unaweza kuwafikia mafanikio ya mafunzo yetu ya PHP kwa uongezwa.
Tengeneza ukingia kila uga kuingia kwa vifaa ya ingia au viungo vya media ya kizingo:
<div class="container">
<form action="/action_page.php">
<div class="row">
<h2 style="text-align:center">Ingia na Media ya Kizingo au Kwa Mawasiliano</h2>
<div class="vl">
<span class="vl-innertext">au</span>
</div>
<div class="col">
<a href="#" class="fb btn">
<i class="fa fa-facebook fa-fw"></i> Ingia na Facebook
</a>
<a href="#" class="twitter btn">
<i class="fa fa-twitter fa-fw"></i> Ingia na Twitter
</a>
<a href="#" class="google btn">
<i class="fa fa-google fa-fw"></i> Ingia na Google+
</a>
</div>
<div class="col">
<div class="hide-md-lg">
<p>��ingia kwa sababu ya kina:</p>
</div>
<input type="text" name="username" placeholder="Jina la mtumiaji" required>
<input type="password" name="password" placeholder="Namba ya nywila" required>
<input type="submit" value="Ingia">
</div>
</div>
</form>
</div>
<div class="bottom-container">
<div class="row">
<div class="col">
<a href="#" style="color:white" class="btn">Jifungu</a>
</div>
<div class="col">
<a href="#" style="color:white" class="btn">Kutafuta namba ya nywila?</a>
</div>
</div>
</div>
Mwongozo wa pili - Ongeza CSS:
* {box-sizing: border-box}
/* Kuingiza stili ya kiumeji */
.container {
position: relative;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px 0 30px 0;
}
/* Kuingiza stili ya eneo la input na mifungo ya kiungo */
input,
.btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 4px;
margin: 5px 0;
opacity: 0.85;
display: inline-block;
font-size: 17px;
line-height: 20px;
text-decoration: none; /* Kupunguza kichwa cha kiungo */
}
input:hover,
.btn:hover {
opacity: 1;
}
/* Kuingiza rangi rahisi kwa mifungo ya Facebook, Twitter na google */
.fb {
background-color: #3B5998;
color: white;
}
.twitter {
background-color: #55ACEE;
color: white;
}
.google {
background-color: #dd4b39;
color: white;
}
/* Kufanya muundo wa kitumiaji cha kufikia */
input[type=submit] {
background-color: #04AA6D;
color: white;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
/* Muundo wa mawio ya kina */
.col {
float: left;
width: 50%;
margin: auto;
padding: 0 50px;
margin-top: 6px;
}
/* Kusafisha kipato cha kufikia kwenye mawio ya kina */
.row:after {
content: "";
display: table;
clear: both;
}
/* Mzinga wa kijitoa */
.vl {
position: absolute;
left: 50%;
transform: translate(-50%);
border: 2px solid #ddd;
height: 175px;
}
/* Matukio ya kijitoa ya kijitoa */
.inner {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 50%;
padding: 8px 10px;
}
/* Hifadhi matukio kwenye mifumo ya kizuri na kikubwa */
.hide-md-lg {
display: none;
}
/* Kikuu cha chakula cha chini */
.bottom-container {
text-align: center;
background-color: #666;
border-radius: 0px 0px 4px 4px;
}
/* Muundo wa kijeshi wa kina - wakati kina ya ekranu ina ujumbe wa kidogo ya 650px, twaongezea mawio ya mbali ya kina hata kama kwa kumpa kwa kina */
@media screen and (max-width: 650px) {
.col {
width: 100%;
margin-top: 0;
}
/* Hifadhi mzinga wa kijitoa */
.vl {
display: none;
}
/* Inaonyesha ya matukio ya kutosha kwenye mifumo ya kizuri */
.hide-md-lg {
display: block;
text-align: center;
}
}
Kuhumu kwa kurejeshwa: Picha za kina kina
Kuhumu kwa kurejeshwa: Picha za kina kinaKuhumu kwa kurejeshwa: fomu ya HTML
Kuhumu kwa kurejeshwa: Picha za kina kinaKuhumu kwa kurejeshwa: fomu ya CSS
- Kuhumu kwa kurejeshwa: Mafunzo Kuhumu kwa kurejeshwa: Picha ya mbili
- Kuhumu kwa kurejeshwa: Picha ya nne Kuhumu kwa kurejeshwa: Fomu ya usajili
