【Python 测试开发之路】html
div布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div布局</title> <style type="text/css"> body{ margin: 0px; <!-- 设置边框 --> } #container{ width:100%; height: 950px; background-color: darkgray; <!-- 设置背景颜色 --> } #header{ width: 100%; height: 10%; background-color: darkorange; } #lmenu{ width: 10%; height: 80%; background-color: chartreuse; float: left; <!-- 增加浮动，否则会上下排列 --> } #body{ width: 80%; height: 80%; background-color: aquamarine; float: left; <!-- 增加浮动，否则会上下排列 --> } #rmenu{ width: 10%; height: 80%; background-color: #00ff22; float: left; <!-- 增加浮动，否则会上下排列 --> } #foot{ width: 100%; height: 10%; background-color: brown; clear: both; <!-- 清除浮动，否则会继续左右排列 --> } </style> </head> <body> <div id="container"> <div id="header">头部</div> <div id="lmenu">左侧内容菜单</div> <div id="body">主体</div> <div id="rmenu">右侧内容菜单</div> <div id="foot">底部</div> </div> </body> </html>
table 布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table布局</title> </head> <body marginheight="0px" marginwidth="0px"> <!-- 去掉左右边距 --> <!-- 两种写法 --> <!-- <table width="100%" height="950px" style="background-color: aliceblue">--> <table style="background-color:white;width: 100%;height: 950px;"> <tr> <!-- colspan 合并2个单元格，整体布局中间有2块，顶部和底部均是1块 --> <td colspan="3" width="100%" height="10%" bgcolor="#ff8c00">这是头部</td> </tr> <tr> <td width="15%" height="80%" bgcolor="#7fff00">左菜单</td> <td width="70%" height="80%" bgcolor="#7fffd4">中间</td> <td width="15%" height="80%" bgcolor="#7fff00">右菜单</td> </tr> <tr> <td colspan="3" width="100%" height="10%" bgcolor="#5f9ea0">底部菜单</td> </tr> </table> </body> </html>
from表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <form> 用户名： <input type="text" placeholder="这是默认文案"> <br> 密 码： <input type="password"> <br> 复选框 苹果<input type="checkbox" checked> 橘子<input type="checkbox"> 香蕉<input type="checkbox"> </form> <form> 单选框 name属性名称要一致，否则就会变成多选框 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> 无<input type="radio" name="sex"> 无<input type="radio"> 无<input type="radio"> </form> <form> 下拉列表 <select> <option>这是选择1</option> <option>这是选择2</option> <option>这是选择3</option> </select> </form> <form action="./from表单.html" enctype="multipart/form-data" method="post"> 账号： <input type="text"> 密码： <input type="password"> <input type="submit" value="提交"> <input type="button" value="按钮"> <input type="reset" value="清空"> </form> </body> </html>
文本样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body > <b style="background-color: #00ff22"> 粗体文字</b> <br> <i> 斜体文字</i> <br> <sub> 下标文字</sub> <br> <sup> 上标文字</sup> <br> <ins> 插入文字</ins> <br> <del> 删除文字</del> <br> <big> 大号文字</big> <br> <em> 这个跟斜体有什么区别</em> <br> <i> 这是斜体</i> <br> <code>这是code</code> <br> <kbd> 这是kbd</kbd> <br> <samp> 这是samp</samp> <br> <var> 这是var</var> <br> <pre> 这是pre</pre> <br> <abbr> 这是abbr</abbr> <br> <address> 这是address</address> <br> <bdo> 这是bdo</bdo> <br> <blockquote> 这是blo</blockquote> <br> <q> 这是q</q> <br> <cite> 这是cite</cite> <br> <dfn> 这是dfn</dfn> </body> </html>
嵌套列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>动物</li> <ol type="1" start="10"> <li>猫</li> <li>狗</li> <li>猪</li> </ol> <li>人类</li> <ul> <li>男人</li> <li>女人</li> <li>中性</li> </ul> <li>植物</li> <ul> <li>树</li> <ol> <li>樟树</li> <li>杉树</li> </ol> <li>花草</li> <li>水培</li> </ul> </ul> </body> </html>
