CSS之form表單與table表格
阿新 • • 發佈：2019-02-10
CSS介紹
form表單
<!--br標籤--> 用於換行
<!--action: 表單要提交的伺服器介面
method: 表單提交方式 預設是GET 一般用post(加密後傳過去)
-->
<!--輸入框
placeholder 佔位符,給使用者提示
value 最終要傳送給伺服器的值
name 給伺服器值的時候提示這個值是什麼值(身高\體重\姓名等)
-->
<!--multiple 可以上傳多個檔案-->
<!--隱藏資訊 如果想要收集一些不需要使用者填的資訊,可以使用hidden型別,如註冊時候的裝置型別-->
<!--提交資訊的按鈕submit--> <!DOCTYPE html>
<html lang="ne">
<head>
<meta charset="utf-8" />
<title>form表單</title>
<style type="test/css"></style>
</head>
<body>
<form action="" method="" id="first">
<input 截圖
table表格
合併邊框 -- collapse(邊框合併) separate(邊框不合並)
empty-cells:hide 隱藏空的單元格,在邊框沒有合併的情況下<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table表單</title>
<style type="text/css">
table{
border-collapse:collapse;
border:1px red solid;
/*隱藏空的單元格 在邊框沒有合併的情況下*/
empty-cells:hide;
text-align:center;
}
tbody{
/*改變表格垂直居中方式
top middle bottom
*/
vertical-align: top;
}
</style>
</head>
<body>
<!--
border:邊框,和css的border不一樣
cellspacing: 單元格之間的距離
cellpadding: 單元格內邊距
-->
<table border="1" width="200" height="100" cellspacing="0" cellpadding="10">
<!--<capyion></caption>-->
<!--<thread></thread>-->
<!--<tbody>-->
<tr>
<th height="200">1</th>
<th width="600">2</th>
</tr>
<tr>
<th height="200">11</th>
<th width="600">22</th>
</tr>
<!--</tbody>-->
<!--<tfoot></tfoot>-->
</table>
</body>
</html>截圖
圖形設計
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> clip-path</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
}
.circle{
/*circle: (半徑 at x y) */
clip-path: circle(50% at 50% 50%);
}
.circle1{
/*circle: (半徑 at x y) */
clip-path: circle(50% at 50% 60%);
}
.ellipse{
/*橢圓ellipse(x y at 圓心)*/
clip-path: ellipse(50% 30% at 50%);
}
.polygon{
clip-path: polygon(50% 0% ,100% 100% ,0% 100% );
}
.class1{
clip-path: polygon(0% 40% ,40% 40% , 40% 0% , 60% 0% , 60% 40% ,100% 40%,
100% 60%,60% 60%, 60% 100%,40% 100%, 40% 60%,0% 60%);
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="circle1"></div>
<div class="ellipse"></div>
<div class="polygon"></div>
<div class="class1"></div>
</body>
</html>結果截圖
行塊對齊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表單</title>
<style type="text/css">
.div1{
width: 100px;
height: 50px;
background-color: red;
font-size:20px;
}
.div2{
width: 60px;
height: 200px;
background-color: yellow;
}
.div3{
width: 80px;
height: 140px;
background-color: blue;
}
div{
/*行塊*/
display: inline-block;
/*
baseline 基線對齊
bottom
top
middle
*/
vertical-align: text-bottom;
}
@font-face{
src:url(STXINGKA.ttf);
font-family:"STXingkai";
}
p{
font-size:50px;
/*設定字型*/
font-family:"STXingkai";
}
</style>
</head>
<body>
<!--div.div$*3-->
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">5</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, reiciendis.n你好</p>
</body>
</html>