HTML
关注
分享
扫一扫
jasmyn518
这个作者很懒，什么都没留下…
展开
-
Web实现：仿大学英语四级成绩查询 html css 含效果图
实现：仿英语四级成绩查询网页效果图：index.html:index.css:原创 2022-06-24 11:16:09 · 1320 阅读 · 6 评论 -
Web实现：完整版垃圾分类网站 html+css 内含效果图
实现：完整版垃圾分类网站效果图1：效果图2：效果图3：index.html:index.css:public.css:原创 2022-06-24 11:10:32 · 2505 阅读 · 1 评论 -
Web实现：九寨沟介绍 含html和css 内含效果图
效果图：index.html:index.css:原创 2022-06-22 12:52:29 · 911 阅读 · 2 评论 -
Web实现：徐州旅游网站 含html和css 内含效果图
实现内容：在首页中插入了背景音乐，在各页面中介绍了徐州当地景点和附近酒店，可以报名参加旅游团，也可以对服务进行投诉反馈。效果图1：效果图2：效果图3：index.htmlindex.cssteam.htmlteam.css...原创 2022-06-22 12:44:53 · 236 阅读 · 0 评论 -
Web实现：仿电子仪器网站 含HTML CSS部分 内含效果图
效果图：index.htmlindex.css原创 2022-06-22 09:56:58 · 303 阅读 · 0 评论 -
Web实现：简单的会员注册demo 包含HTML CSS JS部分 内含效果图
效果图1：效果图2：HTML部分：CSS部分：JS部分：原创 2022-06-16 21:32:44 · 1448 阅读 · 2 评论 -
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 · 607 阅读 · 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 · 1156 阅读 · 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 · 245 阅读 · 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 · 568 阅读 · 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 · 1546 阅读 · 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 · 1283 阅读 · 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 · 250 阅读 · 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 · 490 阅读 · 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 · 221 阅读 · 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 · 144 阅读 · 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 · 147 阅读 · 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 · 190 阅读 · 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 · 373 阅读 · 0 评论 -
Web实现：单行文本超出省略元素内容溢出
/*overflow有5个有效值：visible：默认值，从父元素继承overflow属性的值；hidden：内容会被修剪，并且超出的内容不可见；inherit：内容不会被修剪，会呈现在元素框之外；scroll：内容会被修剪，浏览器会显示滚动条以便查看超出的内容；auto：由浏览器定夺，如果内容被修剪，就会显示滚动条。*/HTML部分：<!DOCTYPE html><html lang="en"> <head><!--系统内置 start-原创 2022-04-09 09:43:22 · 205 阅读 · 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 · 516 阅读 · 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 · 171 阅读 · 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 · 348 阅读 · 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 · 646 阅读 · 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 · 590 阅读 · 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 · 313 阅读 · 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 · 2083 阅读 · 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 · 240 阅读 · 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 · 1027 阅读 · 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 · 1785 阅读 · 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 · 3095 阅读 · 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 · 111 阅读 · 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 · 236 阅读 · 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 · 137 阅读 · 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 · 291 阅读 · 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 · 277 阅读 · 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 · 606 阅读 · 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 · 440 阅读 · 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 · 254 阅读 · 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 · 351 阅读 · 0 评论