好烦小窝 - html
type: channel
link: https://blog.fanl.cn/tag/html/
items: 有趣的注释代码图案整理
items: Fansir - 朋友圈 Ver1.0
items: 网页设计作业 - 电脑学堂页面
items: 网页设计作业 - 小米商城首页
items: 网页设计作业 - 6-1|2
items: 网页设计作业 - 盒子模型布局

有趣的注释代码图案整理
type: item
date: 2024-07-29T18:25:00+08:00
description: 记录整理下；说不定哪天用得上 ::(滑稽)可能是主题不太适配，有些空格被格式化掉了，加载出来的蛮奇怪，索性不管了 :@(吐血倒地) ；这里的正常加载： 有趣的注释代码整理 - Study Blog 1、马/*** _(\_/) ,((((^`\ (((( (6 \ ,((((( , \ ,,,_ ,((((( /"._ ,`, ((((\\ ,... ,(((( / `-.-' ))) ;' `"'"'""(((( ( ((( / ((( \ )) | | (( | . ' | )) \ _ ' `t ,.') ( | y;- -,-""'"-.\ \/ ) / ./ ) / `\ \ |./ ( ( / /' || \\ //'| || \\ _//'|| || )) |_/ || \_\ |_/ || `'" \_\ `'" */ /*** * ┌─┐ ┌─┐ * ┌──┘ ┴───────┘ ┴──┐ * │ │ * │ ─── │ * │ ─┬┘ └┬─ │ * │ │ * │ ─┴─ │ * │ │ * └───┐ ┌───┘ * │ │ * │ │ * │ │ * │ └──────────────┐ * │ │ * │ ├─┐ * │ ┌─┘ * │ │ * └─┐ ┐ ┌───────┬──┐ ┌──┘ * │ ─┤ ─┤ │ ─┤ ─┤ * └──┴──┘ └──┴──┘ * 神兽保佑 * 代码无BUG! */ /*** * ┌─┐ ┌─┐ * ┌──┘ ┴───────┘ ┴──┐ * │ │ * │ ─── │ * │ > < │ * │ │ * │ ... ⌒ ... │ * │ │ * └───┐ ┌───┘ * │ │ * │ │ * │ │ * │ └──────────────┐ * │ │ * │ ├─┐ * │ ┌─┘ * │ │ * └─┐ ┐ ┌───────┬──┐ ┌──┘ * │ ─┤ ─┤ │ ─┤ ─┤ * └──┴──┘ └──┴──┘ * 神兽保佑 * 代码无BUG! */ /*** * ┌─┐ ┌─┐ + + * ┌──┘ ┴───────┘ ┴──┐++ * │ │ * │ ─── │++ + + + * ███████───███████ │+ * │ │+ * │ ─┴─ │ * │ │ * └───┐ ┌───┘ * │ │ * │ │ + + * │ │ * │ └──────────────┐ * │ │ * │ ├─┐ * │ ┌─┘ * │ │ * └─┐ ┐ ┌───────┬──┐ ┌──┘ + + + + * │ ─┤ ─┤ │ ─┤ ─┤ * └──┴──┘ └──┴──┘ + + + + * 神兽保佑 * 代码无BUG! */2、兔/*** * 瓦瓦 十 * 十齱龠己 亅瓦車己 * 乙龍龠毋日丶 丶乙己毋毋丶 * 十龠馬鬼車瓦 己十瓦毋毋 * 鬼馬龠馬龠十 己己毋車毋瓦 * 毋龠龠龍龠鬼乙丶丶乙車乙毋鬼車己 * 乙龠龍龍鬼龍瓦 十瓦毋乙瓦龠瓦亅 * 馬齱龍馬鬼十丶日己己己毋車乙丶 * 己齱馬鬼車十十毋日乙己己乙乙 * 車馬齱齱日乙毋瓦己乙瓦日亅 * 亅車齺龖瓦乙車龖龍乙乙十 * 日龠龠十亅車龍毋十十 * 日毋己亅 己己十亅亅 * 丶己十十乙 丶丶丶丶丶 * 亅己十龍龖瓦 丶 丶 乙十 * 亅己十龠龖毋 丶丶 丶己鬼鬼瓦亅 * 十日十十日亅丶亅丶 丶十日毋鬼馬馬車乙 * 十日乙十亅亅亅丶 十乙己毋鬼鬼鬼龍齺馬乙 * 丶瓦己乙十十亅丶亅乙乙乙己毋鬼鬼鬼龍齱齺齺鬼十 * 乙乙十十十亅乙瓦瓦己日瓦毋鬼鬼龠齱齱龍龍齱齱毋丶 * 亅十十十十乙瓦車毋瓦瓦日車馬龠龍龍龍龍龍龠龠龠馬亅 * 十十十十己毋車瓦瓦瓦瓦鬼馬龠龍龠龠龍龠龠龠馬龠車 * 亅十十日毋瓦日日瓦鬼鬼鬼龠龠馬馬龠龍龍龠馬馬車 * 亅亅亅乙瓦瓦毋車車車馬龍龠鬼鬼馬龠龍龍龠馬馬鬼 * 丶丶乙亅亅乙車鬼鬼鬼毋車龍龍龠鬼馬馬龠龍齱齱龍馬鬼 * 亅己十十己十日鬼鬼車瓦毋龠龍龠馬馬龠龠龠齱齺齺齱龠鬼 * 亅乙乙乙十車馬車毋馬齱齱龍龠龠龠馬龠龍齱龍龠龠鬼瓦 * 丶毋龠鬼車瓦車馬龠龍龠龠龍齱齱龠馬馬鬼毋日 * 十乙己日十 丶己鬼龍齱齺齱龍馬馬馬車毋己 * 丶十己乙亅丶 亅瓦馬龠龍龠龠馬毋瓦乙 * 丶十十乙亅十 亅己瓦車馬龠鬼車瓦乙 * 丶十乙十十丶 丶丶亅十瓦鬼車瓦己 * 丶亅亅丶 亅日瓦日 * 丶 */3、狗头/*** * .,:,,, .::,,,::. * .::::,,;;, .,;;:,,....:i: * :i,.::::,;i:. ....,,:::::::::,.... .;i:,. ......;i. * :;..:::;::::i;,,:::;:,,,,,,,,,,..,.,,:::iri:. …

Fansir - 朋友圈 Ver1.0
type: item
date: 2023-12-25T21:35:00+08:00
description: 效果图：V1.0版本介绍：纯html+css ::(狂汗)点赞、评论、等等一些列功能当然没有实现 :@(坐等)这算是个小小的前台模板了 ::(捂嘴笑)花了两节课，后面有时间把其他功能实现下，顺便加个后台目前这空壳就先到这吧源码压缩好了，底部就可以直接下载 ::(滑稽)HTML： 好烦小窝 - 朋友圈 Join_us <!-- --> 联系人 快乐的钟好烦 编辑个签，展示独特态度。 快乐的钟好烦 这里写你想说的话，p标签超过了行长度会自动换行的~,,,不信你看呀..............对吧？ 刚刚 赞一个 钟好烦...等9人觉得很赞 快乐的钟好烦:哈哈哈~ 大爷:不过如此嘛。 快乐的钟好烦 这里写你想说的话，p标签超过了行长度会自动换行的~,,,不信你看呀..............对吧？ 刚刚 赞一个 钟好烦...等9人觉得很赞 快乐的钟好烦:哈哈哈~ 大爷:不过如此嘛。 快乐的钟好烦 这里写你想说的话，p标签超过了行长度会自动换行的~,,,不信你看呀..............对吧？ 刚刚 赞一个 钟好烦...等9人觉得很赞 快乐的钟好烦:哈哈哈~ 大爷:不过如此嘛。 © 2023 好烦小窝 CSS：* { margin: 0; padding: 0; font-size: 14px; font-family: Microsoft YaHei; } body { background-color: ghostwhite; } #center { margin: 0 auto; width: 550px; } #top { z-index: 10; display: flex; top: 0; height: 300px; } .top-imgbg { width: 550px; height: 300px; background-position-x: 50%; background-repeat: no-repeat; background-position: center; } .top-nav { margin: 5px 0 0 5px; } .top-nav ul { list-style: none; } .top-nav ul li { float: left; } .top-nav ul li a { text-decoration: none; color: white; font-weight: bold; } .friend-right { margin-left: 442px; } .user-about { z-index: 5; float: right; position: relative; margin: 225px 85px 0 0; width: 120px; height: 64px; } .user-about h2 { float: right; font-family: "宋体"; font-size: 17px; margin-right: 8px; margin-top: 22px; color: white; } .user-about img { position: absolute; top: 6px; left: 120px; width: 60px; height: 60px; background-position-x: 50%; } #area-speak { z-index: 10; margin: 0 auto; width: 550px; /* height: 500px; */ border: 1px white solid; background-color: #FFFFFF; } .user-moto { float: right; margin: 20px 28px 0 0px; } .user-moto span { font-size: 13px; font-family: "楷体"; } #area-speak { /* margin-top:0px; */ } .nullline { margin-top: 42px; width: 540px; /* border: 1px black solid; */ } .area-text-body { padding: 10px; /* float: right; */ margin: 8px auto; width: 540px; /* 单个大小自适应height取消 */ height: 455px; border-top: whitesmoke 1px solid; } .user-img { float: left; margin: 0 8px 0 0; } .user-img img…

网页设计作业 - 电脑学堂页面
type: item
date: 2023-12-06T17:59:00+08:00
description: 实现效果：HTML（已引用外部样式，单html可实现效果）： 标题 设为首页 | 加入收藏 <!-- --> 商城首页 网购学堂 购物指南 经验交流 支付选择 维修常识 安全网购 学堂活动 学堂区 电脑商城个人网店申请注册指南2021-1-20 云计算的发展趋势和未来前景2021-1-18 SAAS组件化管理维护视频教程2021-1-15 网店后台管理维护视频教程2021-1-11 商务网站发展的瓶颈与基于2021-1-10 学堂互动 COMMUNITICATION 商场加盟 DECLARATION FORM 学堂宗旨 在电脑学堂，您可以分享网络购物的经验和乐趣。同时，您也能结交到来自四面八方的朋友。学堂将为您提供一个自由宽松的学习交流环境，还会经常组织各种活动丰富大家的业余活动。我们秉承“没有最好，只有更好的服务理念，为客户提供一流的服务，让您足不出户便知天下事。 地址：浙江省杭州市电脑商城客户服务部 邮编：310002 Email:gykf@126.com Copyright @ 2021 电脑工作室 ALL Rights Reserved CSS：/* ▄ ▄ ▌▒█ ▄▀▒▌ ▌▒▒▀▄ ▀▒▒▒▐ ▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐ ▄▄▀▒▒▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐ ▄▀▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒█▒▒▒▒▒▐ ▐▒▒▒▄▄▄▒▒▒▒▒▒▒▒▒▒▒▒▒▀▄▒▒▌ ▌▒▒▐▄█▀▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐ ▐▒▒▒▒▒▒▒▒▒▒▒▌██▀▒▒▒▒▒▒▒▒▀▄▌ ▌▒▀▄██▄▒▒▒▒▒▒▒▒▒▒▒░░░░▒▒▒▒▌ ▌▀▐▄█▄█▌▄▒▀▒▒▒▒▒▒░░░░░░▒▒▒▐ ▐▒▀▐▀▐▀▒▒▄▄▄css.134920.xyz▒▌ ▐▒▒▒▀▀▄▄▒▒▒▄▒▒▒▒▒▒░░░░░░▒▒▒▐ ▌▒▒▒▒▒▒▀▀▀▒▒▒▒▒▒▒▒░░░░▒▒▒▒▌ ▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▐ ▀www.fanl.cn▒▒▒▒▒ ▒▒▒▒▄▌ ▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀ ▐▀▒▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀ ▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▀▀ 你看源码时，是否期待源码也同样注视(注释)着你 */ * { margin: 0; padding: 0; } #top { background-image: url("../images/bgpic.jpg"); height: 104px; width: 984px; margin: 0 auto; } .top_left { float: left; margin-top: 40px; } .fanwo_top { float: right; } .fanwo_top_small { margin-right: 15px; float: right; height: 30px; font-size: 15px; padding: 2px; font-weight: 500; } .fanwo_top_small a { color: black; text-decoration: none; } .fanwo_top_body { float: right; width: auto; margin-top: 55px; } .le_img { float: left; height: 50px; background: url("../images/nav_menu_head.gif") no-repeat; } .ce_img { float: left; height: 45px; background: url("../images/nav_bg.jpg") repeat-x; } .ce_img ul { list-style: none; } .ce_img li { float: left; margin: 6px 2px 0 2px; } .ce_img a { font-family: "黑体"; text-decoration: none; color: white; font-size: 14px; } .ri_img { float: left; background: url("../images/nav_menu_tail.gif") no-repeat; } #css_134920_xyz_homework_2023_12_6 { margin: 0 auto; width: 984px; height: 300px; } /* css_134920_xyz_homework_2023_12_6_left */ .css_134920_xyz_homework_2023_12_6_left …

网页设计作业 - 小米商城首页
type: item
date: 2023-11-15T13:17:00+08:00
description: 小米商城首页（未实现交互，仅html+img）花了差不多10个小时，写了个空壳 ::(黑线) 图片和文字保存+调整，调到吐血，，，记录一下吧，虽然有点丑单起码自己做过。//2023.11.15：优化内容：优化右上角区域宽度添加页面1左侧导航覆盖色搜索图标覆盖按钮色页面2左侧盒子大小声明：看的话仅供学习参考，仅供参考！css用的外部，下面也有原css代码HTML： 小米商城 <!-- --> 小米官网 | 小米商城 | 小米澎湃OS | IoT | 云服务 | 天星数科 | 有品 | 小爱开放平台 | 资质证明 | 协议规则 | 下载app | Select Location 登录 | 注册 | 消息通知 ?购物车(0) Xiaomi手机 Readmi手机 电视 笔记本 平板 家电 路由器 服务中心 社区 手机 电视 家电 笔记本 平板 出行 穿戴 耳机 音箱 健康 儿童 生活 箱包 智能 路由器 电源 配置 保障服务 企业团购 F码通道 米粉卡 以旧换新 话费充值 手机 查看更多 Xiaomi 14 Pro 徕卡Summilux可变光圈镜头｜小米澎湃OS 4999元起 Xiaomi 14 徕卡光学Summilux镜头｜小米澎湃OS｜第三代骁龙®8移动平台 3999元起 Redmi Note 13 Pro 小金刚品质 1399元起 1499元 Redmi Note 13 Pro+ 天玑 7200-Ultra 处理器 1899元起 1999元 Redmi Note 13 5G 1 亿像素 更快更清晰 1099元起 1199元 Xiaomi MIX Fold 3 轻薄折叠屏丨徕卡光学丨全焦段四摄 8999元起 Redmi K60 至尊版 旗舰体验全面超预期 2699元起 2799元 Redmi 12 5G 5G 骁龙芯，大屏大电量 949元起 智能穿戴 耳机 穿戴 Redmi Buds 5 46dB深度降噪丨12.4mm镀钛动圈丨40小时超长续航 199元 Redmi Buds 5 AAPE 潮流限定版 46dB深度降噪丨12.4mm镀钛动圈丨40小时超长续航 299元 Xiaomi Buds 4 Pro 48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频 799元起 1099元 Xiaomi Buds 3 Pro 40dB自适应降噪 ｜空间音频 ｜ HiFi高保真音质 399元起 699元 Redmi Buds 4 Pro 43dB 宽频降噪 | HiFi 高保真音质 | 59ms 游戏低延迟 299元起 399元 Redmi Buds 4活力版 12mm大动圈 | 28小时长续航 | 触控便捷操作 79元起 99元 Redmi Buds 4 35dB 智能主动降噪 | AI 通话降噪 | 30小时超长续航 179元起 229元 Redmi Buds 3 129元 浏览更多 净水器 笔记本 | 平板 热门 Redmi Pad SE 高性价比千元平板｜11英寸高刷护眼大屏｜全金属一体机身｜73.2天超长待机 899元起 999元 Xiaomi Pad 6 Max 14 14英寸大屏幕|骁龙8+处理器|PC级多任务工作台 3799元起 Redmi G 游戏本 2022 16英寸 2.5K 165Hz 电竞大屏 7499元起 Xiaomi Pad 6 11英寸2.8K护眼屏｜骁龙870旗舰处理器｜8840mAh大电量｜MIUI高效办公体验 1799元起 1999元 Xiaomi Pad 6 Pro 骁龙8+旗舰处理器｜11英寸2.8K护眼屏｜8600mAh 67W快充｜MIUI高效办公体验 2349元起 2499元 RedmiBook Pro 15 2022 锐龙版 可选全新锐龙7 6800H处理器，3.2K 90Hz高清屏，RTX 2050高性能独立显卡，CNC一体精雕工艺 5499元起 Redmi Book 15E 15.6‘’ 全高清大屏 3599元起 Redmi G Pro 游戏本 锐龙版 7299元起 浏览更多 热门 家电 热门 电视影音 空调 小米电视6 65” OLED OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏 5999元 6999元 小米电视6 至尊版 65英寸 百级分区背光 | 双120Hz高刷 | 4.5GB+64GB 6899元 7999元 小米电视 ES55 2022款 多分区背光 | MEMC动态补偿 | 杜比视界 2379元 2999元 巨省电 小米空调 1.5匹新1级能效 强劲制冷 | 高效节能 | 智能互联 1899元 2499元 米家新风空调 立式3匹 全屋快通风，就要大新风 6399元 7299元 米家分区洗烘一体机 15kg 健康分开洗 一台就够了 4999元 5999元 米…

网页设计作业 - 6-1|2
type: item
date: 2023-10-30T21:50:00+08:00
description: 声明：仅供参考，看不懂就多看看书实在不行直接交index去我都搞好外链了直接html完全可以显示出效果 ::(你懂的)6-1 效果：6-1 HTML代码： 习题6-1 创业乐园 想成为优秀设计师的“思想” 设计师-----不管从事什么专业的设计，工作环境、生活环境和设计师本人的内心世界一定需要 舒 畅、放松、自然、真实。 生活中好多人有机会去阅读时尚信息，大多是走马观花。没有自己的思维-----是眼在看，心没有 思考，这样的翻阅是休闲娱乐，不是学习的过程。 成为优秀的设计师，是拥有不断进取的创新精神的，不会循规蹈矩，思维灵敏，生活和工作轻松自 如，没有官僚般的狡诈与压抑，敢于承认别人的事业，大家的工作都是一样的，没有阶级，是很自然 的，就是自己喜欢的一份工作，真实的我。要成为优秀的设计师要从自身做起，要独立思考，热爱设 计，对生活中的事物敏感，才能创造出属于自己风格的作品。 作品展示 Web设计 平面设计 VI设计 Logo设计 海报设计 印刷品设计 GUI设计 Copyright (c) 2021 创业中心 All rights reserved 6-1 CSS代码：/*css From:css.134920.xyz */ /* 文章页：https://blog.fanl.cn/archives/280.html */ body { margin: 20px 0px 0px 0px; padding: 0; background: #191919 url(www_fanwo_top/img07.jpg) no-repeat right top; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; color: #3C3C3C; } h1, h2, h3 { margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #549900; } h1 { font-size: 44px; } h2 { font-size: 18px; } /*css From:css.134920.xyz */ /* 文章页：https://blog.fanl.cn/archives/280.html */ p, ul, ol { margin-top: 0; line-height: 240%; text-align: justify; } ul, ol {} blockquote {} a { color: #065EFE; } a:hover { text-decoration: none; } a img { border: none; } img.left { float: left; margin: 7px 30px 0 0; } img.right { float: right; margin: 7px 0 0 30px; } hr { display: none; } .list1 {} .list1 li { float: left; line-height: normal; } .list1 li img { margin: 0 30px 30px 0; } .list1 li.alt img { margin-right: 0; } #wrapper {} /* 顶部单元属性 */ #css_134920_xyz { width: 950px; height: 135px; margin: 0 auto; background: url(www_fanwo_top/img03.jpg) no-repeat left top; } #css_134920_xyz h1, #css_134920_xyz p { margin: 0px; line-height: normal; font-weight: normal; color: #FFFFFF; } #css_134920_xyz h1 { padding: 30px 0px 0px 120px; letter-spacing: -1px; font-size: 48px; } /* 中间大页面属性 */ #css_134920_xyz_2251100259_20231029_6-1_6-1_css { width: 930px; height: 340px; margin: 0px auto; padding: 10px 10px 10px 10px; background: #E1E1E1; } /*css From:css.134920.xyz */ /* 文章页：https://blog.fanl.cn…

网页设计作业 - 盒子模型布局
type: item
date: 2023-10-18T08:31:00+08:00
description: ::(睡觉) 赶早写的按图还原图代码（index）： 盒子模型布局 header-top header_nav left 1 2 3 4 5 6 7 8 9 right footer