![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
jasmyn518
这个作者很懒,什么都没留下…
展开
-
Java实现 抓取网页内容
import java.io.IOException;import okhttp3.Call;import okhttp3.OkHttpClient;import okhttp3.Request;public class GetPage { /** * 根据输入的url,读取页面内容并返回 */ public String getContent(String url) { // okHttpClient 实例 OkHttpClient okHttpClient原创 2022-04-16 13:35:38 · 1023 阅读 · 0 评论 -
Web实现:统计图
前端代码:<!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--360浏览器优先以webkit内核解析--> &l原创 2022-04-16 13:33:58 · 577 阅读 · 0 评论 -
Web实现:页面底部栏实例
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-04-16 13:30:13 · 1103 阅读 · 0 评论 -
Web实现:微博底部栏实例
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-04-16 13:27:32 · 223 阅读 · 0 评论 -
Web实现:消息卡片开发实例
图片都在本地没有上传,使用代码时可以适当修改。第一种:HTML部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>代码演示</title> <link rel="stylesheet" href="index.css"></head><body> <div原创 2022-04-16 13:22:09 · 476 阅读 · 0 评论 -
Web实现:页面横向滚动
实现效果:根据页面宽度,当页面宽度超出内容时,页面禁止横向滚动,页面宽度小于内容时,页面横向滚动。根据页面的不同宽度,字体大小也会相应变化。HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2022-04-16 13:10:46 · 1494 阅读 · 0 评论 -
Java实现 判断并输出文件大小
有些地方需要判断用户上传的文件大小或者下载文件之类的地方,这个功能还是比较实用的。Java代码如下:package 包名;import java.io.File;public class FileAction { public static void main(String[] args) { File file = new File("chaoyue.jpeg"); long size = file.length() / 1024;原创 2022-04-16 13:00:10 · 5161 阅读 · 0 评论 -
Web实现:旧版微博个人页整体实现
微博已经改版了,这部分代码还是很久之前写的,旧版的个人主页,分享一下。HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Comp原创 2022-04-16 12:53:50 · 1199 阅读 · 0 评论 -
Web实现:多行文本超出省略知乎实例
HTML部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="st原创 2022-04-16 12:48:17 · 230 阅读 · 1 评论 -
Web实现:多行文本超出省略实例
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-04-16 12:46:13 · 363 阅读 · 1 评论 -
Web实现:多行文本超出省略知乎热榜开发实例
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-04-11 12:15:39 · 202 阅读 · 0 评论 -
Web实现:单行文本超出省略知乎热榜开发实例
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-04-11 12:13:39 · 127 阅读 · 0 评论 -
Web实现:单行文本超出省略微博个人页微关系
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-04-09 09:54:19 · 129 阅读 · 0 评论 -
Web实现:单行文本超出省略实例
旧版微博关注列表中的关注的图像和昵称。头像在上,昵称在下,昵称太长时需要省略。HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-原创 2022-04-09 09:51:40 · 168 阅读 · 0 评论 -
Web实现:单行文本超出省略文本溢出省略
/*text-overflow有两个有效值:clip:默认值,表示在内容区域的极限处截断文本;ellipsis:表示用一个省略号(“…”)来表示被截断的文本。强制不换行 white-space:nowrap;隐藏超出部分 overflow:hidden;用省略号代替剩余内容 text-overflow:ellipsis;*/HTML部分:<!DOCTYPE html><html lang="en"> <head><!--系统内置 st原创 2022-04-09 09:47:20 · 338 阅读 · 0 评论 -
Web实现:单行文本超出省略元素内容溢出
/*overflow有5个有效值:visible:默认值,从父元素继承overflow属性的值;hidden:内容会被修剪,并且超出的内容不可见;inherit:内容不会被修剪,会呈现在元素框之外;scroll:内容会被修剪,浏览器会显示滚动条以便查看超出的内容;auto:由浏览器定夺,如果内容被修剪,就会显示滚动条。*/HTML部分:<!DOCTYPE html><html lang="en"> <head><!--系统内置 start-原创 2022-04-09 09:43:22 · 185 阅读 · 0 评论 -
Web实现:单行文本超出省略强制不换行
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-04-09 09:39:32 · 487 阅读 · 0 评论 -
Web实现:flex弹性布局微博个人页明星势力榜案例
效果图:flex弹性布局微博个人页明星势力榜HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" cont原创 2022-04-09 09:35:51 · 145 阅读 · 0 评论 -
Web实现:flex弹性布局微博个人页左侧栏开发案例
跟前面几篇一样,这里也是旧版微博页面的实现效果,图片自行更换,就不贴出来了。HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-C原创 2022-04-07 12:04:47 · 321 阅读 · 0 评论 -
Web实现:flex弹性布局两栏自适应布局上下案例
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-04-07 11:59:42 · 613 阅读 · 0 评论 -
Web实现:flex弹性布局三栏自适应布局上下三栏
实际使用时有时候需要上下的自适应布局,实现代码如下:HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" c原创 2022-04-07 11:54:37 · 552 阅读 · 0 评论 -
Web实现:flex弹性布局微博左侧栏数据
在微博个人主页左侧有关注,粉丝和微博数量这几个数据,当然改版之后有所变化,需要实现的效果图大概就是下图这样的:HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta原创 2022-04-07 11:50:09 · 294 阅读 · 0 评论 -
Web实现:flex弹性布局三栏自适应布局
效果:整个页面分为三栏,左右两栏都是固定宽度,中间栏根据屏幕大小宽度相应变化。实现:HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X原创 2022-04-07 11:43:40 · 1965 阅读 · 0 评论 -
Web实现:flex弹性布局指定项目放大
在代码中使用的图片自行更换,就不在本文中贴出来了。HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" co原创 2022-04-07 11:39:05 · 215 阅读 · 0 评论 -
Web实现:flex弹性布局两栏自适应布局
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-03-04 14:21:44 · 991 阅读 · 0 评论 -
Web实现:flex弹性布局项目自动充满剩余空间
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> .原创 2022-03-04 14:19:21 · 1738 阅读 · 0 评论 -
Web实现:flex弹性布局项目不缩放
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> .原创 2022-03-04 14:16:15 · 3031 阅读 · 0 评论 -
Web实现:flex弹性布局分享链接实例
由于图片不是在线图片,效果显示不出来,下面贴出图片,可以自行下载替换。文件名和图片对应关系如下图:HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <met原创 2022-03-04 14:12:22 · 92 阅读 · 0 评论 -
Web实现:flex弹性布局项目换行
HTML部分:<!DOCTYPE html><html lang="en"> <head><!--系统内置 start--><script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script><!--系统内置 end--> <meta chars.原创 2022-03-04 14:03:28 · 212 阅读 · 0 评论 -
Web实现:flex弹性布局简单示例2
HTML部分:<!DOCTYPE html><html lang="en"> <head><!--系统内置 start--><script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script><!--系统内置 end--> <meta chars.原创 2022-03-04 14:00:47 · 116 阅读 · 0 评论 -
Web实现:flex弹性布局排行榜简单案例
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-03-01 22:10:14 · 264 阅读 · 0 评论 -
Web实现:flex弹性布局微博导航栏案例
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-03-01 22:07:47 · 261 阅读 · 0 评论 -
Web实现:flex弹性布局上下左右居中
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-03-01 22:04:19 · 563 阅读 · 0 评论 -
Web实现:flex弹性布局导航条案例调整水平方向的分布
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-03-01 21:59:53 · 403 阅读 · 0 评论 -
Web实现:flex弹性布局简单示例
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-02-20 12:42:00 · 236 阅读 · 0 评论 -
Web实现:微博个人banner开发
代码中的图片并不是在线图片,可以自行查找替换。HTML部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实战微博--banner</title> <link rel="stylesheet" href="index.css"></head><body> <s原创 2022-02-20 12:38:46 · 318 阅读 · 0 评论 -
Web实现:装饰边框添加阴影
装饰元素的边框,给边框加上阴影效果。HTML部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>练习</title> <link rel="stylesheet" href="index.css"></head><body> <div class="box"&原创 2022-02-12 00:44:36 · 838 阅读 · 0 评论 -
Web实现:装饰鼠标箭头实例
装饰鼠标箭头实例效果图:HTML部分代码:<!DOCTYPE html><html lang="en"><head><!--系统内置 start--><script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script><!--系统内置 end-->原创 2022-02-12 00:42:21 · 459 阅读 · 0 评论 -
Web实现:装饰鼠标箭头
装饰鼠标箭头效果图如下:HTML部分代码:<!DOCTYPE html><html><head><!--系统内置 start--><script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script><!--系统内置 end--> <meta c原创 2022-02-12 00:38:25 · 514 阅读 · 0 评论 -
Web实现:微博头部开发实例
HTML部分代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>微博实战--head</title> <link rel="stylesheet" href="index.css"></head><body> <div class="outer-tile">原创 2022-02-12 00:33:17 · 359 阅读 · 0 评论