1:制作一张商品信息表,内容自定,要求用到行与列的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一张商品信息表,内容自定,要求用到行与列的合并</title> <style> table{ border: 1px solid black; box-sizing: border-box; width: 600px; margin: 20px auto; border-collapse: collapse; } th,td{ border: 1px solid black; line-height: 50px; text-align: center; padding: 5px; } table caption{ margin-bottom: 10px; } table thead>tr:first-of-type{ background:linear-gradient(greenyellow,yellow); } tbody tr:nth-of-type(odd){ background:linear-gradient(orangered,lightgoldenrodyellow); } tbody tr:nth-of-type(5)>td:first-of-type{ background:linear-gradient(lavender,aqua); } tbody tr:nth-of-type(5)>td:nth-of-type(2){ color: white; background:linear-gradient(lavender,aqua); } tbody tr:nth-of-type(6)>td:nth-child(1){ background:linear-gradient(lightgray,fuchsia); color: white; } </style> </head> <body> <table> <caption>京东双十一促销</caption> <thead> <tr> <th>序号</th> <th>商品名称</th> <th>数量</th> <th>促销价</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>iphone11</td> <td>100</td> <td>5599</td> </tr> <tr> <td>2</td> <td>华为note30</td> <td>100</td> <td>3599</td> </tr> <tr> <td>3</td> <td>vivo223</td> <td>100</td> <td>2599</td> </tr> <tr> <td>4</td> <td>oppo213</td> <td>100</td> <td>1599</td> </tr> <tr> <td rowspan="2">系统</td> <td>IOS</td> <td>100</td> <td>559900</td> </tr> <tr> <td>ANDROID</td> <td>300</td> <td>779700</td> </tr> <tr> <td colspan="2">合计</td> <td>400</td> <td>1339600</td> </tr> </tbody> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2:使用<div><span><p><ul>...等标签来制作一张课程表
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用<div><span><p><ul>...等标签来制作一张课程表</title> <style> .table{ display: table; margin: auto; box-sizing: border-box; width: 500px; } .caption{ display: table-caption; text-align: center; margin-bottom: 10px; } .thead{ display: table-header-group; font-size: 1.2rem; color: lightcoral; background: linear-gradient(lightcyan,yellow); } .tfoot{ display: table-footer-group; } .tbody{ display: table-row-group; } ul{ display: table-row; } ul>li{ display: table-cell; border: 1px solid black; padding: 10px; } .tfoot ul:first-of-type{ background: linear-gradient(lightgrey,crimson); color: white; } </style> </head> <body> <div class="table"> <span class="caption">课程表</span> <div class="thead"> <ul> <li>序号</li> <li>课程</li> <li>描述</li> </ul> </div> <div class="tbody"> <ul> <li>1</li> <li>前端</li> <li>HTML+css</li> </ul> <ul> <li>2</li> <li>后端</li> <li>PHP+mysql</li> </ul> <ul> <li>3</li> <li>框架</li> <li>laravel</li> </ul> </div> <div class="tfoot"> <ul> <li>备注</li> <li>努力学习</li> <li>才能步入知识殿堂</li> </ul> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3:使用绝对定位,实现用户登录框在页面中始终居中显示
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用绝对定位,实现用户登录框在页面中始终居中显示 </title> <style> body{ height: 2000px; } .login{ width: 300px; margin:0px auto; } .form{ position: fixed; top:100px; } </style> </head> <body> <div class="login"> <div class="form"> <p> <label for="name">账号:</label> <input type="text" name="name" id="name"> </p> <p> <label for="pwd">密码:</label> <input type="password" name="pwd" id="pwd"> </p> <p> <input type="submit" value="登录"> </p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4:模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路</title> <style> header,footer{ height: 100px; background-color: lightgray; } main{ border: 2px solid red; box-sizing: border-box; padding-left: 200px; padding-right: 200px; overflow: auto; } main>article{ box-sizing: border-box; min-height: 500px; width: 100%; background-color: lawngreen; } main>aside{ width: 200px; box-sizing: border-box; min-height: 500px; } main > aside:first-of-type { background-color: red; } main > aside:last-of-type { background-color: lightcyan; } main>article, main > aside:first-of-type, main > aside:last-of-type{ float: left; } aside:first-of-type{ margin-left:-100%; position: relative; left:-200px; } aside:last-of-type{ margin-left: -200px; position: relative; left: 200px; } </style> </head> <body> <header> 头部 </header> <main> <article> 内容 </article> <aside> 左侧 </aside> <aside> 右侧 </aside> </main> <footer> 底部 </footer> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
思路:是将主体内容部分固定,利用左右边内边距来为左右区域留出位置。
步骤1:写出主体内容区,并给左右边距设置padding值。2:利用相对定位进行位移。达到圣杯布局效果