css表格表单
1.项目符号样式list-style-type
无序列表：none disc circle square(无，黑点，圆圈，方格)
有序列表：decimal decimal-leading-zero,lower-alpha,upper-alpha,lower_roman,upper-roman
<!DOCTYPE html>
<html>
<head>
<title>List Style Type</title>
<style type="text/css">
ol {
list-style-type: lower-roman;}
</style>
</head>
<body>
<h1>The Complete Poems</h1>
<h2>Emily Dickinson</h2>
<ol>
<li>Life</li>
<li>Nature</li>
<li>Love</li>
<li>Time and Eternity</li>
<li>The Single Hound</li>
</ol>
</body>
</html>
border-color指定颜色
border-style:solid指定边框样式
border-width：2px
不仅表格可以用，其他h1 span也可以使用
2.项目图像
list-style-iamge
<!DOCTYPE html>
<html>
<head>
<title>List Style Image</title>
<style type="text/css">
ul {
list-style-image: url("images/star.png");}
li {
margin: 10px 0px 0px 0px;}
</style>
</head>
<body>
<h1>Index of Translated Poems</h1>
<h2>Arthur Rimbaud</h2>
<ul>
<li>Ophelia</li>
<li>To Music</li>
<li>A Dream for Winter</li>
<li>Vowels</li>
<li>The Drunken Boat</li>
</ul>
</body>
</html>
3.标记的定位
list-style-position
outside:标记位于文本块的左侧
inside:标记位于文本块的内部，并缩进文本块。
<!DOCTYPE html>
<html>
<head>
<title>List Style Position</title>
<style type="text/css">
ul {
width: 250px;}
li {
margin: 10px;}
ul.illuminations {
list-style-position: outside;}
ul.season {
list-style-position: inside;}
</style>
</head>
<body>
<h3>Illuminations</h3>
<ul class="illuminations">
<li>That idol, black eyes and yellow mop, without parents or court ...</li>
<li>Gracious son of Pan! Around your forehead crowned with flowerets ...</li>
<li>When the world is reduced to a single dark wood for our four ...</li>
</ul>
<h3>A Season in Hell</h3>
<ul class="season">
<li>Once, if my memory serves me well, my life was a banquet ...</li>
<li>Hadn't I once a youth that was lovely, heroic, fabulous ...</li>
<li>Autumn already! - But why regret the everlasting sun if we are ...</li>
</ul>
</body>
</html>
4.list-style略写，快捷方式。
ul {
list-style: inside circle;
width: 300px;}
li {
margin: 10px 0px 0px 0px;}
5.表格属性
width:宽度
控制列宽table-layout:auto自动 fixed固定
控制单元格间距border-spacing:2px;
合并相邻的单元格边框：border-collapse:separate不合并 collapse合并
隐藏没有内容的单元格empty-cells:show显示;hide隐藏
设置表格标题位置caption-side:top bottom
padding:每个单元格边框与其内容之间的空隙
text-transform将表格标题中的内容转换为大写。
letter-spacing,font-size字体间隔，字体大小
border-top.border-bottom表格边框
text-align文本对齐
background-color背景色
:hover悬停
表格制作技巧https://www.w3schools.com/html/html_table_styling.asp
<!DOCTYPE>
<html>
<head>
<title>Table Properties</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
table {
width: 600px;}
th, td {
padding: 7px 10px 10px 10px;}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;}
tr.even {
background-color: #efefef;}
tr:hover {
background-color: #c3e6e5;}
.money {
text-align: right;}
</style>
</head>
<body>
<h1>First Edition Auctions</h1>
<table>
<tr>
<th>Author</th>
<th>Title</th>
<th class="money">Reserve Price</th>
<th class="money">Current Bid</th>
</tr>
<tr>
<td>E.E. Cummings</td>
<td>Tulips & Chimneys</td>
<td class="money">$2,000.00</td>
<td class="money">$2,642.50</td>
</tr>
<tr class="even">
<td>Charles d'Orleans</td>
<td>Poemes</td>
<td class="money"></td>
<td class="money">$5,866.00</td>
</tr>
<tr>
<td>T.S. Eliot</td>
<td>Poems 1909 - 1925</td>
<td class="money">$1,250.00</td>
<td class="money">$8,499.35</td>
</tr>
<tr class="even">
<td>Sylvia Plath</td>
<td>The Colossus</td>
<td class="money"></td>
<td class="money">$1031.72</td>
</tr>
</table>
</body>
</html>
6.空单元格的边框empty-cells
（1）show显示（2）hide隐藏（3）inherit继承
<!DOCTYPE html>
<html>
<head>
<title>Empty Cells</title>
<style type="text/css">
td {
border: 1px solid #0088dd;
padding: 15px;}
table.one {
empty-cells: show;}
table.two {
empty-cells: hide;}
</style>
</head>
<body>
<table class="one">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td></td>
</tr>
</table>
<table class="two">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td></td>
</tr>
</table>
</body>
</html>
7.单元格之间的空隙
border-spacing 产生空隙
border-collapse 单元格会挤压到一起
<!DOCTYPE html>
<html>
<head>
<title>Gaps Between Cells</title>
<style type="text/css">
td {
background-color: #0088dd;
padding: 15px;
border: 2px solid #000000;}
table.one {
border-spacing: 5px 15px;}
table.two {
border-collapse: collapse;}
</style>
</head>
<body>
<table class="one">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table class="two">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
8.定义单行文本框样式
<!DOCTYPE html>
<html>
<head>
<title>Styling Text Inputs</title>
<style type="text/css">
input {
font-size: 120%;
color: #5a5854;
background-color: #f2f2f2;
border: 1px solid #bdbdbd;
border-radius: 5px;
padding: 5px 5px 5px 30px;
background-repeat: no-repeat;
background-position: 8px 9px;
display: block;
margin-bottom: 10px;}
input:focus, input:hover {
background-color: #ffffff;
border: 1px solid #b1e1e4;}
input#email {
background-image: url("images/email.png");}
input#twitter {
background-image: url("images/twitter.png");}
input#web {
background-image: url("images/web.png");}
</style>
</head>
<body>
<form>
<input type="text" id="email" />
<input type="text" id="twitter" />
<input type="text" id="web" />
</form>
</body>
</html>
9.定义提交按钮表样式
<!DOCTYPE html>
<html>
<head>
<title>Styling Submit Buttons</title>
<style type="text/css">
input {
font-size: 120%;
color: #5a5854;
background-color: #f2f2f2;
border: 1px solid #bdbdbd;
border-radius: 5px;
padding: 5px 10px 5px 10px;
background-repeat: no-repeat;
background-position: 8px 9px;
display: block;
margin-bottom: 10px;}
input#submit {
color: #444444;
text-shadow: 0px 1px 1px #ffffff;
border-bottom: 2px solid #b2b2b2;
background-color: #b9e4e3;
background: -webkit-gradient(linear, left top, left bottom, from(#beeae9), to(#a8cfce));
background: -moz-linear-gradient(top, #beeae9, #a8cfce);
background: -o-linear-gradient(top, #beeae9, #a8cfce);
background: -ms-linear-gradient(top, #beeae9, #a8cfce);}
input#submit:hover {
color: #333333;
border: 1px solid #a4a4a4;
border-top: 2px solid #b2b2b2;
background-color: #a0dbc4;
background: -webkit-gradient(linear, left top, left bottom, from(#a8cfce), to(#beeae9));
background: -moz-linear-gradient(top, #a8cfce, #beeae9);
background: -o-linear-gradient(top, #a8cfce, #beeae9);
background: -ms-linear-gradient(top, #a8cfce, #beeae9);}
</style>
</head>
<body>
<form>
<input type="submit" value="Register" id="submit" />
</form>
</body>
</html>
text-shadow 浏览器展示3D效果的文本。
10.定义字段集l
<legend>元素，说明空间组需要何种信息
<!DOCTYPE html>
<html>
<head>
<title>Styling Fieldsets and Legends</title>
<style type="text/css">
* {
font-family: Arial, Verdana, sans-serif;
color: #665544;}
input {
border-bottom: 1px dotted #dcdcdc;
border-top: none;
border-right: none;
border-left: none;
padding: 5px;
width: 280px;
margin-bottom: 20px;}
input:focus {
border: 1px dotted #dcdcdc;
outline: none;}
input#submit {
color: #ffffff;
background-color: #665544;
border: none;
border-radius: 5px;
width: 80px;}
input#submit:hover {
color: #665544;
background-color: #efefef;}
fieldset {
width: 350px;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 20px;
text-align: right;}
legend {
background-color: #efefef;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 10px 20px;
text-align: left;
text-transform: uppercase;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Newsletter</legend>
<label for="name">Name: </label><input type="text" id="name" />
<label for="email">Email: </label><input type="text" id="email" />
<input type="submit" value="Subscribe" id="submit" />
</fieldset>
</form>
</body>
</html>
11.表单控件对齐
<!DOCTYPE html>
<html>
<head>
<title>Aligning Form Controls - Solution</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;}
div {
border-bottom: 1px solid #efefef;
margin: 10px;
padding-bottom: 10px;
width: 260px;}
.title {
float: left;
width: 100px;
text-align: right;
padding-right: 10px;}
.radio-buttons label {
float: none;}
.submit {
text-align: right;}
</style>
</head>
<body>
<form action="example.php" method="post">
<div>
<label for="name" class="title">Name:</label>
<input type="text" id="name" name="name" />
</div>
<div>
<label for="email" class="title">Email:</label>
<input type="email" id="email" name="email" />
</div>
<div class="radio-buttons">
<span class="title">Gender:</span>
<input type="radio" name="gender" id="male" value="M" />
<label for="male">M</label>
<input type="radio" name="gender" id="female" value="F" />
<label for="female">F</label><br />
</div>
<div class="submit">
<input type="submit" value="Register" id="submit" />
</div>
</form>
</body>
</html>
12.光标样式
常用值：auto crosshair default pointer move text wait help url()
<!DOCTYPE html>
<html>
<head>
<title>Cursor</title>
<style type="text/css">
a {
cursor: move;}
</style>
</head>
<body>
<p>
<a href="http://www.whitmanarchive.org">Walt Whitman</a>
</p>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！