好烦小窝 - 网页设计作业
type: channel
link: https://blog.fanl.cn/tag/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E4%BD%9C%E4%B8%9A/
items: 网页设计作业 - 小米商城登录页面
items: 网页设计作业 - 电脑学堂页面
items: 网页设计作业 - 小米商城首页
items: 网页设计作业 - 6-1|2
items: 网页设计作业 - 盒子模型布局
items: 网页设计作业 - P59四图代码

网页设计作业 - 小米商城登录页面
type: item
date: 2023-12-27T13:50:00+08:00
description: 实现效果：一些介绍：用了简单的map画图+超链接（整张图片分割）纯HTML+CSS+IMGfooter部分放弃了ul+li+a，做的时候居中不了，找了好久没找到原因（水平有限）盒子布局都带有注释，全局默认宽度1600px，做了缩放自适应各个部分内容也有相关注释登录按钮用的a标签代替，input提交标签修改有点麻烦，放弃了HTML 小米商城登录页面 小米商城 让每个人都享受科技乐趣 账号登录|扫码登录 <!-- --> 登录 用户协议| 隐私政策| 帮助中心| 简体| 英语 小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号 CSS* { margin: 0px; padding: 0px; font-family: "黑体"; } body { /* 默认屏幕分辨率width=1600px */ /* 缩放自适应 */ width: 1600px; margin: 0 auto; } #box-body { margin: 0 auto; width: 1600px; } #top-height { margin: 0 auto; width: 1600px; height: 80px; } .top-img { float: left; margin: 18px 0 0 220px; } .top-img img { width: 42px; height: 42px; } .top-text { float: left; } .top-text p { margin: 20px 0 0 10px; } .top-text span { margin: 0 0 0 10px; font-size: 8px; } #center-bj { margin: 0 auto; width: 1600px; height: 500px; background: url(../img/phone.jpg) no-repeat center; } .center-from { float: left; margin: 32px 0 0 980px; width: 300px; height: 420px; /* border: red 1px solid; */ background-color: white; } .center-all { padding: 20px; } .center-text { margin: 5px 0 10px 10px; } .center-text span { font-size: 20px; margin: 0 20px 0 15px; } .center-text a { text-decoration: none; color: darkgray; } .center-other { } .center-other img { width: 260px; height: 150px; } .center-text form a { text-decoration: none; color: white; } .sub-center { margin: 20px 0 0 0; height: 40px; background-color: orangered; } .sub-center span { float: left; color: white; width: 260px; margin-top: 10px; text-align: center; } .center-all input { padding: 5px; margin: 30px 0 0 0; height: 30px; width: 246px; } #footer { margin: 0 auto; width: 1600px; /* height: 154px; */ } .footer-text-area { margin: 45px auto; height: 60px; /* border: red 2px solid; */ color: darkgray; text-align: center; font-size: 14px; } .nav-footer {} /* .nav-footer ul{ margin: 0 auto; list-style: none; } */ .footer-text-area a:hover { color: orangered; } a:hover { color: orangered; } /* .nav-footer ul li{ float: left; list-style: none; } */ .n…

网页设计作业 - 电脑学堂页面
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

网页设计作业 - P59四图代码
type: item
date: 2023-09-26T23:45:00+08:00
description: 原题：3-24：实现效果： 代码： 分组元素的综合应用 爱心包装管理体系 工厂严格执行ISO9001，ISO14001和TS16949，管理体系，产品符合 RoHS环保认证，REACH环保要求。产品的各项参数指标均达到国内外 同类产品的先进水平，在国内外相关领域具有较高影响。 爱心包装经营模式 爱心包装采用标准化和定制化服务相结合的经营模式，以高品质的产品 为立足点，以技术服务于市场为导向，以先进优良的自动化生产和测试 装备为保障，以科学规范的管理，务实高效的决策，朝气蓬勃的高素质 员工团队为依托，为客户提供持续的优良产品生产服务和品质保证。 3-25：实现效果： 代码： 商城支付选择 商城支付选择 由快递公司代收买家货款，货先送到客户手 上，客户验货之后再把客户钱给送货员，之后 货款再转到卖家账户里去。 货到付款 用户可以通过自己所拥有的借记卡，信用卡的 银行，申请开通网上银行，进行网上支付。 网银支付 3-26:实现效果： 代码： 用户注册 <!-- //css样式用style写好了 //copy的话可以删掉 --> 用户注册 用户名 * 密码 * 确认密码 * 性别 男 女 出生日期 联系电话 电子邮件 * 最高学历 中专 大专 大学 职业 学生 教师 工人 爱好 上网 篮球 听歌 下棋 留言 3-27:实现效果： 代码： html： 习题 个人基金投资者情况调查问卷 （1）您选择投资公募基金的主要原因是：（ ） 公募运作管理规范,信息披露全面,可以方便地查找相关信息,申购赎回等均很便利 公募基金会有比较强大的投研团队 公募基金投资门槛低,对投资者没有太多的资质及投资金额要求 （2）您选择投资专户一对多基金的主要原因是：（ ） 专户一对多基金管理规范,同公募基金一样由比较强大的投研团队,且投资范围.投资比例较自由 公募基金会有比较强大的投研团队 其他 （3）您希望获得哪方面的资讯？（ 多选题 ） 产品设计理念 投资思路 基金经理介绍 购买渠道 购买费率 如您希望获得抽奖机会，请留下如下信息 姓名： 手机： 地址： 建议： &nbsp css：.yinying{ background: darkgray; }//到底了~3-27的建个css文件，然后路径进行引用就行，或者直接用style码完 :@(喷水)