HTML+CSS 2021.3.22

/* 大相小绝/子绝父相:大盒子相对定位,小盒子相对定位 /
/
position: 定位 相对定位,绝对定位,固定地位 /
position: relative; /
相对定位::相对于自己原来的位置来偏移,不脱标 /
/
偏移量 left,right,top,bottom*/
left: 100px; /* 往左偏移100px; /
/
absolute绝对定位:根据上一个有定位的父盒子来偏移位置,如果说往上都没有定位盒子,就根据body来偏移 /
/
绝对定位的盒子会脱标 /
position: absolute;
/
偏移量 /
/
fixed:固定定位 /
;/
正数/负数/0; 值越大,显示越靠前 */

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一个简单的购物商城网页示例,包含 HTMLCSS 和 JS,并带有网页跳转功能。 HTML 代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物商城</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>购物商城</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">商品分类</a></li> <li><a href="#">购物车</a></li> <li><a href="#">登录</a></li> </ul> </nav> </header> <main> <h2>最新商品</h2> <div class="product-list"> <div class="product"> <img src="product1.jpg" alt="Product 1"> <h3>商品名称1</h3> <p>商品描述1</p> <button>加入购物车</button> </div> <div class="product"> <img src="product2.jpg" alt="Product 2"> <h3>商品名称2</h3> <p>商品描述2</p> <button>加入购物车</button> </div> <div class="product"> <img src="product3.jpg" alt="Product 3"> <h3>商品名称3</h3> <p>商品描述3</p> <button>加入购物车</button> </div> </div> </main> <footer> <p>© 2021 购物商城</p> </footer> <script src="script.js"></script> </body> </html> ``` CSS 代码: ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 10px; } header h1 { margin: 0; } header nav ul { list-style: none; margin: 0; padding: 0; } header nav ul li { display: inline-block; margin-right: 10px; } header nav ul li:last-child { margin-right: 0; } header nav ul li a { color: #fff; text-decoration: none; } main { padding: 10px; } .product-list { display: flex; flex-wrap: wrap; } .product { flex-basis: calc(33.33% - 20px); margin: 10px; padding: 10px; background-color: #f9f9f9; text-align: center; } .product img { width: 100%; height: auto; margin-bottom: 10px; } .product h3 { margin: 0; } .product button { background-color: #333; color: #fff; border: none; padding: 5px 10px; margin-top: 10px; cursor: pointer; } footer { background-color: #333; color: #fff; text-align: center; padding: 10px; } ``` JS 代码: ```javascript // 在商品按钮上添加点击事件 var buttons = document.querySelectorAll('.product button'); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function() { alert('已加入购物车!'); }); } ``` 这是一个简单的购物商城网页,包含了一个导航栏、一个商品列表和一个页脚,以及一个简单的 JS 功能,点击商品按钮会弹出提示框。 您可以根据需要修改代码和样式,添加更多功能和交互,实现一个完整的购物商城网站。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值