赞
踩
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> p { font-family: 宋体, sans-serif, Arial, "Times New Roman", 微软雅黑, "Microsoft YaHei UI", serif; } </style> </head> <body> <p>段落一</p> <p>段落二</p> <div>盒子一</div> </body> </html>
显示效果如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> .box-size { width: 100px; height: 100px; } .red { background-color: red; } .blue { background-color: blue; } </style> </head> <body> <div class="box-size red">盒子一</div> <div class="box-size blue">盒二</div> <div class="box-size red">盒子三</div> </body> </html>
显示效果如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> #font-set { color: yellow; font-size: 50px; } </style> </head> <body> <p id="font-set">段落一</p> <p id="font-set">段落二</p> </body> </html>
显示效果如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> * { font-size: 50px; } </style> </head> <body> <p>段落一</p> <div>盒子一</div> </body> </html>
显示效果如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> ul a { color: red; } </style> </head> <body> <ul> <li><a href="#">链接一</a></li> </ul> </body> </html>
显示效果如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> li>a { color: red; } </style> </head> <body> <ul> <li><a href="#">链接一</a></li> </ul> </body> </html>
显示效果如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> div,p { color:red; } </style> </head> <body> <div>盒子一</div> <p>段落一</p> </body> </html>
显示效果如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> a:link { color:blue; text-decoration: none; } a:visited { color:gray; } a:hover { color:black; } a:active { color:yellow; } </style> </head> <body> <a href="http://www.baidu.com">百度</a> <br /> <a href="#">未知的链接</a> </body> </html>
显示效果如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> input:focus { background: red; } </style> </head> <body> <input type="text" /> <br /> <input type="text" /> </body> </html>
当鼠标移到第一个输入框,点击左键,此时光标选中第一个输入框,显示效果如下:
选择被勾选的复选框
示例:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"> <title>Title</title> <style> /* 选择被勾选的复选框 */ input:checked { width: 30px; height: 30px; } </style> </head> <body> <input type="checkbox"> <input type="checkbox"> </body> </html>
效果如下。被勾选的复选框变大了
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。