w3cschool的htmlcss知识
<!DOCTYPE html> <html> <head> <style> .dropbtn { background-color: #4CAF50; color: rgb(212, 91, 91); padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; /* 是不移动 可以改成10px试一下看效果 */ right: 50px; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> </head> <body> <h1>对齐的下拉内容</h1> <p>通过 left 和 right 属性,决定下拉内容是左到右还是右到左。</p> <div class="dropdown" style="float:left;"> <button class="dropbtn">Left</button> <div class="dropdown-content" style="left:0;"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown" style="float:right;"> <button class="dropbtn">Right</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <!-- 理解了吗?明白了吗? --> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .fu { position: relative; width: 200px; height: 200px; background-color: skyblue; border: 1px solid red; } .zi { position: absolute; /* 距离左侧距离 */ right: 20px; /* 距离上侧距离 */ top: 20px; left: 10px; width: 50px; height: 50px; background-color: red; } </style> </head> <body> <!-- 子绝父相 --> <div class="fu"> <div class="zi">代码</div> </div> </body> </html>
每当你觉得想要批评什么人的时候,你切要记着,这个世界上的人并非都具备你禀有的条件。---《了不起的盖茨比》
看得懂的知识往后看。
好厉害,隔壁的员工会全英文对话,专八,与外国人对话,就和说母语一样。厉害。多听英文。