CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于向某些选择器添加特殊元素。
新建一个html文件,代码内容如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Pseudo Class And Pseudo Element</title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"> <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/fontawesome.css" rel="stylesheet"> <style type="text/css"> a:link{ color:#00F; } a:visited{ color:black; } a:hover{ color:yellow; } a:active{ color:red; } tr td:nth-child(1):before{ content:"你的名字:"; color:red; } tr td:nth-child(3):before{ content:url(http://doc.exesoft.cn/pic/phone.png); display:inline-block; width:23px; height:23px; position:relative; left:-10px; top:5px; } </style> </head> <body> <div class="container"> <h2><a href="http://www.cnblogs.com/exesoft">伪类及伪元素演示</a></h2> <table class="table table-bordered"> <tr> <td>Name</td> <td>Age</td> <td>Phone</td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </body> </html>
用浏览器预览上方的代码文件。
最终作业提交方式:
1.看懂上面代码,
2.复制到到自定义html文件中,进行预览测试。
3.用手机抓页面预览动态演示视频,最后把视频传至我的邮箱:ma@exesoft.cn
邮件名称类似: 2018电商1班-18-张三-5-9-网页作业,红字要符合自己.
另外:
所用的phone.png图标素材下载地址: http://doc.exesoft.cn/pic/phone.png