整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
一篇文章我們說(shuō)了單選框、多選框以及下拉框的使用，今天呢我們繼續(xù)看一下表單剩下的常用控件：提交按鈕以及重置按鈕。
提交按鈕，顧名思義就是當(dāng)我們填好了表單中的數(shù)據(jù)之后，我們需要通過(guò)提交按鈕來(lái)將數(shù)據(jù)傳遞到后臺(tái)的服務(wù)器中，供后臺(tái)程序使用。
使用語(yǔ)法：<input type="submit" value="提交數(shù)據(jù)">
詳細(xì)講解：
1、type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用，才能正常的進(jìn)行表單的提交。（或者使用JavaScript代碼來(lái)觸發(fā)提交事件，這個(gè)到后期我們講解js的時(shí)候我進(jìn)行介紹）
2、value：按鈕上顯示的文字，顯示按鈕的名稱。
當(dāng)用戶需要重置表單信息到初始時(shí)的狀態(tài)時(shí)，比如用戶輸入“用戶名”后，發(fā)現(xiàn)書寫有誤，可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以。
使用語(yǔ)法：<input type="reset" value="重置數(shù)據(jù)">
詳細(xì)講解：
1、type：只有當(dāng)type值設(shè)置為reset時(shí)，按鈕才有重置作用，點(diǎn)擊按鈕會(huì)將form表單內(nèi)的所有信息還原到初始未輸入的狀態(tài)。
2、value：按鈕上顯示的文字，顯示重置按鈕的名稱
使用練習(xí)：
我們創(chuàng)建一個(gè)表單，數(shù)據(jù)我們以post的形式提交到百度首頁(yè)，表單里邊有姓名和年齡的輸入框，并且添加提交數(shù)據(jù)按鈕以及重置數(shù)據(jù)按鈕。具體代碼如下圖所示：
在網(wǎng)頁(yè)中的顯示效果就如下圖所示：
我們?cè)谛彰湍挲g輸入框中輸入內(nèi)容，點(diǎn)擊重置數(shù)據(jù)既可以清空里邊的內(nèi)容，還原到初始狀態(tài)，點(diǎn)擊提交數(shù)據(jù)按鈕，那么數(shù)據(jù)將會(huì)提交到我們的指定鏈接處。
以上呢就是表單最常用的一些控件了，接下來(lái)我們對(duì)學(xué)到的表單知識(shí)進(jìn)行一次綜合的測(cè)試，我們來(lái)寫一個(gè)完整的表單包含我們學(xué)到的所有知識(shí)。
我們?cè)谶@里就寫一個(gè)網(wǎng)站制作常用的留言表，表格名稱就叫留言表，然后表中包含有姓名輸入框、性別單選框（默認(rèn)選中男）、愛(ài)好多選框（默認(rèn)選中第一個(gè)）、所在地區(qū)下拉框、留言內(nèi)容多行文本框，以及提交信息按鈕和重置信息按鈕。數(shù)據(jù)提交呢我們還是提交到百度，提交類型我們使用post。具體的代碼如下圖所示：
在網(wǎng)頁(yè)中的顯示效果就如下圖所示：
好了，到了這里我們的第一個(gè)表單就算是做完了，到這有人就會(huì)問(wèn)了，為什么別人的代碼在瀏覽器上看起來(lái)都是那么的規(guī)整，我這么寫完看著怎么這么丑，接下來(lái)的文章我們將為大家介紹css的知識(shí)了，學(xué)習(xí)了css你也可以將你的頁(yè)面做的高達(dá)上起來(lái)。最后大家看完一定要自己動(dòng)手寫一寫，只有自己寫出的代碼才能體會(huì)到其中的樂(lè)趣，多加練習(xí)才是王道。
每日金句：人生最大的喜悅是每個(gè)人都說(shuō)你做不到，你卻完成它了！喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。
SS中的浮動(dòng)（Floats）、定位（Positioning）和顯示（Display）屬性是前端工程師掌握頁(yè)面布局的關(guān)鍵。本文將深入探討這些屬性的工作原理和使用場(chǎng)景，幫助開發(fā)者更好地理解和運(yùn)用它們來(lái)構(gòu)建響應(yīng)式和精確的網(wǎng)頁(yè)布局。
浮動(dòng)是CSS中用于實(shí)現(xiàn)元素排列的一種方式，它可以讓元素脫離正常的文檔流，并可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)元素的邊緣。
.element {
float: left; /* 或者 'right' */
}
.clear-element {
clear: both; /* 可以是 'left', 'right', 或 'both' */
}
定位屬性允許你控制元素的位置，它可以是相對(duì)于它的正常位置、相對(duì)于最近的已定位祖先元素、相對(duì)于視口或絕對(duì)位置。
.element {
position: static | relative | absolute | fixed | sticky;
}
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
.absolute-element {
position: absolute;
top: 0;
right: 0;
}
.fixed-element {
position: fixed;
bottom: 0;
left: 0;
}
.sticky-element {
position: sticky;
top: 10px;
}
display屬性是CSS中最重要的用于控制布局的屬性之一，它定義了元素如何顯示在頁(yè)面上。
.element {
display: block | inline | inline-block | flex | grid | none;
}
.block-element {
display: block;
}
.inline-element {
display: inline;
}
.inline-block-element {
display: inline-block;
}
.flex-container {
display: flex;
}
.grid-container {
display: grid;
}
.hidden-element {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="navigation">Navigation</div>
</div>
<div class="main-content">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
<div class="fixed-element">Fixed Element</div>
</body>
</html>
/* Reset some default styles */
body, h1, p {
margin: 0;
padding: 0;
}
/* Header styles */
.header {
background-color: #f8f8f8;
border-bottom: 1px solid #e7e7e7;
padding: 10px;
overflow: hidden; /* Clearfix for floated elements */
}
.logo {
float: left;
font-size: 24px;
}
.navigation {
float: right;
font-size: 18px;
}
/* Main content styles */
.main-content {
padding: 20px;
}
.sidebar {
float: left;
width: 200px;
background-color: #ddd;
padding: 10px;
}
.content {
margin-left: 220px; /* Make space for the sidebar */
background-color: #eee;
padding: 10px;
}
/* Footer styles */
.footer {
background-color: #f8f8f8;
border-top: 1px solid #e7e7e7;
text-align: center;
padding: 10px;
position: relative; /* For demonstration purposes */
top: 20px; /* Move the footer down a bit */
}
/* Fixed element styles */
.fixed-element {
position: fixed;
bottom: 10px;
right: 10px;
padding: 5px 10px;
background-color: #333;
color: #fff;
z-index: 1000; /* Ensure it stays on top */
}
/* Clearfix hack */
.clearfix::after {
content: "";
clear: both;
display: table;
}
在這個(gè)例子中，我們創(chuàng)建了一個(gè)包含頭部、側(cè)邊欄、主要內(nèi)容和頁(yè)腳的基本布局。我們使用浮動(dòng)來(lái)對(duì)齊頭部的Logo和導(dǎo)航，以及創(chuàng)建一個(gè)側(cè)邊欄。我們還使用了相對(duì)定位來(lái)稍微下移頁(yè)腳，并使用固定定位為頁(yè)面添加了一個(gè)始終可見的固定元素。最后，我們使用了overflow: hidden;來(lái)清除頭部中浮動(dòng)元素的影響。
浮動(dòng)、定位和顯示屬性是CSS中構(gòu)建復(fù)雜布局的強(qiáng)大工具。通過(guò)深入理解和正確應(yīng)用這些屬性，前端工程師可以創(chuàng)建出既美觀又功能強(qiáng)大的網(wǎng)頁(yè)。隨著Web標(biāo)準(zhǔn)的不斷發(fā)展，我們也需要不斷學(xué)習(xí)和適應(yīng)新的CSS特性，以保持我們技能的前沿性。
2014年畢業(yè)至今5年多了，感慨一下真的過(guò)得好快吶！群里有朋友問(wèn)我關(guān)于reset.css問(wèn)題，個(gè)人覺(jué)得用一個(gè)模板就夠了，沒(méi)必要每次重寫。reset.css就是css樣式的重置，為了處理些默認(rèn)樣式，也是為了各大瀏覽器的兼容性。我的reset.css模板，可參考下，不足之處，請(qǐng)指正批評(píng)下！
@charset "GBK";
*{margin:0;padding:0;}
html{background:#fff}
body{font-size:14px;font-family:"Microsoft YaHei","SimSun";}
ul li{list-style:none;}
img{border:none;}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px white inset;}
input{outline:none;}
a,a:hover{text-decoration:none;}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*+height:1%;}
說(shuō)明：
1.指定了css文件編碼為BGK；
2.*代表了所有，清除了所有盒子的內(nèi)外邊距；
3.指定了默認(rèn)字體和大小，字體名稱使用了英文，可防止亂碼現(xiàn)象；
4.li的點(diǎn)樣式、img圖片的默認(rèn)邊框清除了；
5.表單input和a的一些默認(rèn)樣式清除了；
6.最后是清除浮動(dòng)的樣式，使用時(shí)直接在盒子上寫clearfix類名就行了。
溫馨提示：如果你對(duì)web前端開發(fā)感興趣，可以加入免費(fèi)交流學(xué)習(xí)群：932617626
除注明外的文章,均為來(lái)源:湯久生博客,轉(zhuǎn)載請(qǐng)保留本文地址！
原文地址：http://tangjiusheng.com/divcss/165.html
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
