HTML教程：基础与实践

HTML
需积分: 9 2 下载量 67 浏览量 更新于2024-07-10 收藏 616KB PPT 举报
身份认证 购VIP最低享 7 折!
领优惠券(最高得80元）
资源推荐

<!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>小精灵转呀转~</title> <style> * { list-style: none; margin: 0; padding: 0; } .box2 { width: 260px; height: 190px; margin: 100px auto; /* background-color: skyblue; */ } .box2 li { float: left; width: 24px; height: 24px; background-color: pink; margin: 10px 0 30px 30px; background: url(qb.png) no-repeat; } </style> </head> <body>
<script> var change = document.querySelectorAll('li'); for (var i = 0; i < change.length; i++) { var index = i * 44; change[i].style.backgroundPosition = '0 -' + index + 'px'; } </script> </body> </html>用其他方法实现这个效果，至少三种

<li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html> ``` 2. 用 Canvas 实现转盘效果 ```...

在jsp界面利用
    和
  • 写一个简单的下拉式侧边菜单，要有注释，在点击
      时
    • 可以收放

<li><a href="#">Dropdown 1 - Item 3</a></li> </ul> </li> <!-- li item --> <li><a href="#">Item 2</a></li> <!-- li dropdown item --> <li class="dropdown"> <a href="#">Dropdown 2</a>...

將這個HTML
  • Xiaomi手机
  • Redmi 红米
  • 电视
  • 笔记本
    • </ul 修改為橫著放

可以将<ul>标签的默认样式修改为行内块状，并设置<li>标签的display属性为inline-block。修改后的HTML代码如下所示： ```html <style> ul { list-style-type: none; padding: 0; margin: 0; } li { ...

修改以下代码实现四列在同一排上<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>底部设计</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> footer { background-color: #f5f5f5; padding: 50px 0;} footer h4 { font-size: 18px; font-weight: bold;} footer p { font-size: 14px; line-height: 1.5;} footer ul { list-style: none; padding: 0; margin: 0;} footer ul li { margin-bottom: 10px;} footer ul li a { color: #333; font-size: 14px; line-height: 1.5; text-decoration: none;} footer ul li a:hover { text-decoration: underline;} </style> </head> <body> </body> </html>变成一行四列

<li><a href="#">支付方式</a></li> </ul> </div> <div class="col-md-3 col-sm-3"> <h4>合作伙伴</h4> <ul> <li><a href="#">京东</a></li> <li><a href="#">淘宝</a></li> <li><a href="#">天猫</a></li>...
琳琅破碎
  • 粉丝: 17
  • 资源: 2万+
上传资源 快速赚钱

最新资源