• 当前标签:表格

程序开发 H5学习之制作费用报销单

表格的实践。 代码: <html> <head> <meta charset="UTF-8"> <title>费用报销单</title> <style> main{ width: 21cm; margin: 3cm auto 0; box-shadow: 0 0 10px #111; padding: 0.5cm 1cm 0 1cm; box-sizing: border-box; } caption h1{ width: 6cm; font-size: 0.6cm; margin: 0.8cm auto 0; border-bottom: solid 1px black; } caption p{ margin: 0.2cm 0; } caption p span:nth-child(1){ position: relative; left: 40px; } caption p span:nth-child(2){ float: right; } table{ border: 1px solid black; margin: 0 auto; font-size: 0.35cm; border-spacing: 0; border-collapse: collapse; } td{ border: 1px solid black; height: 0.8cm; text-align: center; padding: 0; } tr:nth-child(1) td:nth-child(1){ width: 6cm; } tr:nth-child(1) td:nth-child(2), tr:nth-child(1) td:nth-child(3){ width: 2cm; } tr:nth-child(1) td:nth-child(4){ width: 3cm; } tr:nth-child(1) td:nth-child(5){ width: 3.5cm; } tr:nth-child(8) td{ text-align: left; } table table{ width: 100%; /*去除边框*/ border: none; } table table td{ border: none; border-right: 1px solid black; width: 5cm!important; } table table tr td:last-child{ border-right: none; } footer{ padding: 0.3cm; text-align: center; } </style> <body> <main> <table> <caption> <h1>费 用 报 销 单</h1> <p> <span>报销日期    年  月  日</span> <span>附件   张</span> </p>

2017-04-14 20:39:00 130 0 0
阅读详情

程序开发 H5学习之列表、引用标签、定义标签、figure标签、表格

列表、引用标签、定义标签、figure标签、表格等标签用法的学习。 列表: <html> <head> <meta charset="UTF-8"> <title>有序列表和无序列表</title> <style> ol{ counter-reset: ol; } li{ /*设置列表标记类型*/ list-style-type: none; /*设置如何放置标记符号的位置 list-style-position: inside;*/ /*设置图像替换列表的标记符号 list-style-image: url(fff.png);*/ /*list-style: disc inside url(fff.png);*/ } ol li:before{ counter-increment: ol; content: '['counter(ol)'] '; } ul{ padding-left: 80px; } ul li{ list-style-type: circle; } ul li:before{ content: '❤♠♢♣'; color: red; } </style> <body> <!--ol定义有序列表 默认带有16px的外间距 带有40px的左内间距--> <!--li定义列表的项 reversed 倒序 start 有序列表的初始值 如:start="4" type 有序列表的标记类型 如:type="A"--> <ol type="I" start="4"> <li>HTML</li> <li>JavaScript</li> <li>CSS</li> </ol> <!--ul定义无序列表--> <ul> <li>JavaScript</li> <li>CSS</li> <li>NET</li> </ul> </body> </html> 引用标签: <html> <head> <meta charset="UTF-8"> <title>引用标签</title> <style> cite{ font-style: normal; } cite:before{ content: '《'; } cite:after{ content: '》'; } q{ quotes: '「' '」''〔' '〕'; } </style> <body> <!--q表示引用内容 cite表示引用来源 通常是书籍 刊物 名称--> <q>有朋自远方来不亦说乎</q>这句话来着<cite>论语</cite><br> <q>学而不思则罔 <q>思</q>而不学则殆</q> </body> </html> 定义标签: <html> <head> <meta charset="UTF-8"> <title>定义标签</title> <style> dfn{ font-style: normal; } </style> <body> <!--dfn对特殊短语的定义--> <dfn> <!--使用strong强调定义的词 如果这个词是缩写 最好同时使用addr标签--> <strong><addr title="Hypertext Markup language">HTML5</addr></strong>是超文本标记语言的最新发展成果 它包含HTML5 CSS3 JavaScript 等前端开发技术的最新内容 HTML5是移动互联网时代事件的产物 </dfn> <p> <h1>一个简单的HTML文档</h1> <code> <!--code表示代码内容为某种代码 pre可以保留空格换行等代码格式--> <pre> <html> <head> <meta charset="UTF-8"> <title></title> <style> </style> <body> </body>

2017-04-13 23:26:47 73 0 0
阅读详情
  • 1
前往