首页 > 其他分享 >css表格表单

css表格表单

时间:2024-10-09 13:14:01浏览次数:8  
标签:... style 表格 list 表单 10px 0px border 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>
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:宽度
padding:每个单元格边框与其内容之间的空隙
text-transform将表格标题中的内容转换为大写。
letter-spacing,font-size字体间隔,字体大小
border-top.border-bottom表格边框
text-align文本对齐
background-color背景色
:hover悬停
<!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>

标签:...,style,表格,list,表单,10px,0px,border,css
From: https://www.cnblogs.com/zhongta/p/18453999

相关文章

  • 第五章 CSS盒模型
    5.1盒模型的定义    Web页面上大部分的元素(特别是块状元素)都可以看作是一个盒子,W3C组织建议把所有网页上的对象都放在一个盒子(box)中,设计者可以通过创建定义来控制这个盒子的各种属性,这些对象包括段落、列表、标题、图片及层。    盒子的结构可以看作一个......
  • 在线表格技术如何助力企业实现全面预算?
    最新技术资源(建议收藏)https://www.grapecity.com.cn/resources/前言在当今快速变化和竞争激烈的商业环境中,企业需要通过精细化的管理手段来确保自身的市场竞争力和持续发展。全面预算管理(ComprehensiveBudgetManagement)作为企业管理的重要组成部分,不仅为企业的财务决策提供......
  • javascript学习——CSS 操作总结
    CSS操作CSS与JavaScript是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动。但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合。本章介绍如何通过JavaScript操作CSS。HTML元素的style属性操作CSS样式最简单的方法,就是......
  • 第五章 CSS盒模型
    第五章CSS盒模型5.1盒模型的定义        Web页面上大部分的元素(特别是块状元素)都可以看作是一个盒子,W3C组织建议把所有网页上的对象都放在一个盒子(box)中,设计者可以通过创建定义来控制这个盒子的各种属性,这些对象包括段落、列表、标题、图片及层。       ......
  • 前端学习-CSS的复合选择器(十四)
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档目录前言什么是复合选择器后代选择器语法格式注意事项代码示例子选择器语法格式注意事项代码示例并集选择器语法格式伪类选择器链接伪类选择器​编辑注意事项:focus伪类选择器表格总结总结......
  • CSS3属性选择器
    属性选择器选择符                       简介E[att]                   选择具有att属性的元素E[att="val"]          选择具有att属性且属性值等于val的E元素E......
  • 表单验证:FormValidation JavaScript 1.7
    FormValidation表单验证:JavaScript的最佳验证库::用ES6编写使用TypeScript进行类型安全零依赖没有jQuery可用作AMD、ES6模块和全局脚本灵活的:自定义图标自定义错误消息动态字段自定义有效和无效颜色动态启用、禁用验证器自定义错误信息位置Playnicewithformlibra......
  • 528.大气的家具定制设计公司网站 大学生期末大作业 Web前端网页制作 html+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......
  • 【Unity】绘制表格:排行榜
    绘制一款表格,表格特征为头行颜色不同、间隔行不同背景色、滚动视图;表格内容是分数排行榜,前三名有奖牌图标前缀。成果展示Scene部分标题和背景滚动视图:表头、表格行模板效果图脚本部分脚本绑定在滚动组件的Viewport物体上。publicclassHighscoreTable:MonoBehaviour......
  • css 盒模型
    目录css盒模型的组成css盒模型的注意点现象描述:原因:解决方案:1.使用padding代替margin:2.使用overflow:hidden;或其他非visible的值:3.使用border或padding阻止合并:4.使用display:flow-root;(CSS中的BFC):5.使用position定位:块级盒子(BlockBox):特点:例子:内联盒子(Inl......