随笔分类 -  前端 合集

上一页 1 2 3 4 5
打造网页版「大白」
摘要：知识点： div 布局 CSS 相对定位 CSS 各种属性的应用 效果演示： 代码演示： baymax.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Baymax</title> <style> body { b 阅读全文
posted @ 2021-08-09 11:35 博客zhu虎康 阅读(73) 评论(0) 推荐(0)
jQuery的排他思想
摘要：排他思想：当前元素设置样式，其余的兄弟元素清除样式。 效果： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcs 阅读全文
posted @ 2021-08-09 10:06 博客zhu虎康 阅读(150) 评论(0) 推荐(0)
盒子小游戏——定位
摘要：效果： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 300px; height: 300px; border: 2px sol 阅读全文
posted @ 2021-07-30 17:09 博客zhu虎康 阅读(60) 评论(0) 推荐(0)
QQ会员页面导航
摘要：效果： 代码： 导航栏.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QQ会员</title> <link rel="stylesheet" href="css/style2.css"> </he 阅读全文
posted @ 2021-07-30 14:58 博客zhu虎康 阅读(338) 评论(0) 推荐(0)
设置圆角头像
摘要：效果： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>(｡♥‿♥｡)圆角边框</title> <style> #div1{ width:100px; height: 100px; margin: 3 阅读全文
posted @ 2021-07-30 11:26 博客zhu虎康 阅读(81) 评论(0) 推荐(0)
绘制圆的四分之一
摘要：效果展示： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>(｡♥‿♥｡)圆角边框</title> <style> #div1{ width:100px; height: 100px; border: 阅读全文
posted @ 2021-07-30 11:04 博客zhu虎康 阅读(393) 评论(0) 推荐(0)
用div绘制笑脸
摘要：效果展示： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>(｡♥‿♥｡)圆角边框</title> <style> #div1{ width:100px; height: 100px; border: 阅读全文
posted @ 2021-07-30 08:37 博客zhu虎康 阅读(57) 评论(0) 推荐(0)
打印图案-菱形-升级版
摘要：实现效果： 源码： 实现效果 按输入的行数进行显示菱形的上半部分 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed 阅读全文
posted @ 2021-07-29 17:47 博客zhu虎康 阅读(118) 评论(0) 推荐(0)
日出——半轮红日
摘要：实现效果： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>红日</title> <style> div { border-radius: 50px 50px 0 0; width: 100px; h 阅读全文
posted @ 2021-07-29 17:41 博客zhu虎康 阅读(63) 评论(0) 推荐(0)
实现效果展示
摘要：![](https://img2020.cnblogs.com/blog/2325334/202107/2325334-20210723174659354-1977762325.png) ![](https://img2020.cnblogs.com/blog/2325334/202107/2325334-20210723174636914-698239537.png) ![](https://i 阅读全文
posted @ 2021-07-23 17:48 博客zhu虎康 阅读(40) 评论(0) 推荐(0)
实现点击跳转
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <div onclick=javascrtpt:jump()>在新 阅读全文
posted @ 2021-07-23 17:45 博客zhu虎康 阅读(116) 评论(0) 推荐(0)

上一页 1 2 3 4 5