|
|
@@ -0,0 +1,66 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ div {
|
|
|
+ width: 400px;
|
|
|
+ height: 700px;
|
|
|
+ border: 1px solid #f00;
|
|
|
+ }
|
|
|
+ /* 清除无序列表默认样式 */
|
|
|
+ ul {
|
|
|
+ list-style: none;
|
|
|
+ width: 200px;
|
|
|
+ height: 420px;
|
|
|
+ /* background: #00f; */
|
|
|
+ }
|
|
|
+ ul li {
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+ border: 1px solid #f00;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60px;
|
|
|
+ }
|
|
|
+ /* 清除a标签默认样式 */
|
|
|
+ ul li a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ /* 划过效果 */
|
|
|
+ ul li:hover {
|
|
|
+ /* background: #f00; */
|
|
|
+ /* background: rgb(255, 0, 0); */
|
|
|
+ background: rgba(255, 0, 0,0.5);
|
|
|
+ }
|
|
|
+ ul li:hover a{
|
|
|
+ color: #ffff00;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ 颜色
|
|
|
+ 16进制颜色 rgb rgba(alpha:0（全透明）~1(正常))
|
|
|
+ 红色 #f00 #ff0000 255,0,0
|
|
|
+ 黄色 #ff0 #ffff00 255,255,0
|
|
|
+ 绿色 #0f0 #00ff00 0,255,0
|
|
|
+ 蓝色 #00f #0000ff 0,0,255
|
|
|
+ 白色 #fff #ffffff 255,255,255
|
|
|
+ 黑色 #000 #000000 0,0,0
|
|
|
+ */
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div>
|
|
|
+ <ul>
|
|
|
+ <li><a href="">星期一</a></li>
|
|
|
+ <li><a href="">星期二</a></li>
|
|
|
+ <li><a href="">星期三</a></li>
|
|
|
+ <li><a href="">星期四</a></li>
|
|
|
+ <li><a href="">休息</a></li>
|
|
|
+ <li><a href="">休息</a></li>
|
|
|
+ <li><a href="">休息</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
e