写作业博客时需要注意的事项

  1. 多扯点基础知识、背景知识,老师可能不会认真看,但会显得你很用功,即使你觉得那些都是废话,但也不能洋洋洒洒几百字。
  2. 如果你看了参考资料,简单的写出来,来几句话,再加个链接、标粗一下,显得你很用工
  3. 选个好看、简洁、牛逼,容易阅读(重点)的博客皮肤。(GitHub一搜一大把)
  4. 该装逼时就装逼。但要装的自然。
  5. 代码块时用博客提供给你的插入代码块功能(或者用markdown语法)。排版更好看,更容易阅读
  6. 当然最重要的还是文章的质量,全是水话的话,emmmmm
  7. 语言可以生动有趣一点。
  8. 以上均为个人意见,使用时需谨慎
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的!这里是一个简单的示例代码,实现了个人博客网站的要求,包含了导航栏、轮播图和 footer 三部分,并实现了轮播图标签按钮的翻页功能。请注意,这只是一个示例,你可以根据自己的需求进行修改和扩展。 HTML 代码: ```html <!DOCTYPE html> <html> <head> <title>个人博客网站</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <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> <div class="carousel"> <img src="https://picsum.photos/800/400?random=1" data-index="1"> <img src="https://picsum.photos/800/400?random=2" data-index="2"> <img src="https://picsum.photos/800/400?random=3" data-index="3"> <img src="https://picsum.photos/800/400?random=4" data-index="4"> <img src="https://picsum.photos/800/400?random=5" data-index="5"> <div class="carousel-buttons"> <button data-index="1" class="active"></button> <button data-index="2"></button> <button data-index="3"></button> <button data-index="4"></button> <button data-index="5"></button> </div> </div> <section> <h2>博客文章列表</h2> <ul> <li><a href="#">文章标题1</a></li> <li><a href="#">文章标题2</a></li> <li><a href="#">文章标题3</a></li> <li><a href="#">文章标题4</a></li> <li><a href="#">文章标题5</a></li> </ul> </section> </main> <footer> <p>版权所有 © 2021</p> </footer> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </body> </html> ``` CSS 代码: ```css body { font-family: Arial, sans-serif; margin: 0; } header { background-color: #333; color: #fff; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; } nav a { color: #fff; text-decoration: none; padding: 10px; } main { max-width: 800px; margin: 0 auto; } .carousel { position: relative; height: 400px; overflow: hidden; } .carousel img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .carousel img.active { opacity: 1; } .carousel-buttons { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin-bottom: 20px; } .carousel-buttons button { background-color: #ccc; border: none; width: 10px; height: 10px; border-radius: 50%; margin: 0 10px; } .carousel-buttons button.active { background-color: #333; } section { margin-top: 50px; } section h2 { font-size: 24px; margin-bottom: 20px; } section ul { list-style: none; margin: 0; padding: 0; } section li { margin-bottom: 10px; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` JavaScript 代码: ```javascript $(function() { // 初始化轮播图和按钮 var $carousel = $('.carousel'); var $images = $carousel.find('img'); var $buttons = $carousel.find('.carousel-buttons button'); var currentIndex = 0; $images.eq(0).addClass('active'); $buttons.eq(0).addClass('active'); // 标签按钮点击事件 $buttons.click(function() { var index = $(this).data('index') - 1; if (index !== currentIndex) { // 切换图片和按钮 $images.eq(currentIndex).removeClass('active'); $buttons.eq(currentIndex).removeClass('active'); $images.eq(index).addClass('active'); $buttons.eq(index).addClass('active'); currentIndex = index; } }); }); ``` 希望这份示例代码对你有所帮助!如果你有任何问题,请随向我提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值