效果图：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 { height: 45px; width: 46px; } .left-to-text { float: left; width: 465px; height: 308px; } .user-name { float: left; } .user-name p { margin-top: 8px; width: 100px; height: 20px; font-family: "宋体"; font-weight: bold; color: #586C97; font-size: 15px; } .user-speak { float: left; width: 450px; } .speak-text span { font-size: 14px; line-height: 20px; font-family: Microsoft YaHei; } .speak-img { float: left; } .speak-img img { /* 展开效果没写 */ margin-top: 5px; width: 255.2px; height: 255.2px; object-fit: cover; object-position: center; cursor: zoom-in; border-radius: 4px; } .speak-buttom-area { float: left; margin-top: 5px; width: 464px; height: 38px; } .left-time { float: left; } .left-time span { font-size: 12px; color: darkgray; } .right-comment { float: right; } .like-thespeak { margin: 22px 0 2px 0; padding: 8px; font-size: 14px; background-color: #F5F5F5; } .like-people { color: #586C97; padding: 2px; border-bottom: 1px white solid; margin: 1px 0 1px 0; } .comment-people { margin: 5px 0 0 0; } .comment-people p { margin: 0 0 2px 2px; } .comment-people p a { text-decoration: none; color: #586C97; } #footer { margin: 0 auto; width: 550px; height: 40px; border-top: #F5F5F5 1px solid; /* text-align: center; */ } .foot-text { text-align: center; margin: 20px 0 0 0; color: black; } #footer a{ text-decoration: none; }源码下载[file url="https://wwij.lanzout.com/iD8T11iy5k5e"]蓝奏云下载[/file]
实现效果：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 { float: left; width: 320px; } .css_134920_xyz_homework_2023_12_6_left_bg { padding: 8px; height: 35px; margin-top: 18px; background: url("../images/main_left_top_bg.jpg") no-repeat; } .css_134920_xyz_homework_2023_12_6_left_bg a { margin-left: 8px; text-decoration: none; color: #2D6CC7; font-family: "黑体"; font-size: 18px; font-weight: bold; } .left_link {} .left_link ul { margin: 0 0 0 15px; } .left_link li { list-style: none; } .left_link a { text-decoration: none; font-size: 14px; color: black; } .left_link span { float: right; margin-right: 15px; /* margin-left: 30px; */ color: darkgray; font-size: 14px; } .css_134920_xyz_homework_2023_12_6_left .css_134920_xyz_img { margin-top: 18px; } /* css_134920_xyz_homework_2023_12_6_ce */ .css_134920_xyz_homework_2023_12_6_ce { float: left; width: 350px; /* border: 1px red solid; */ } .css_134920_xyz_homework_2023_12_6_top { margin: 30px 0 0 10px; } .css_134920_xyz_homework_2023_12_6_buttom { height: 100px; } .css_134920_xyz_homework_2023_12_6_buttom a { text-decoration: none; color: black; font-family: "黑体"; } .css_134920_xyz_homework_2023_12_6_buttom_text { margin: 75px 0 0 60px; font-weight: bold; } .css_134920_xyz_homework_2023_12_6_buttom_left { float: left; margin: 15px 20px 0 40px; height: 85px; background: url("../images/main_mid_bottom_01.gif") no-repeat; } .css_134920_xyz_homework_2023_12_6_ce span { font-size: 10px; color: darkgray; font-weight: bold; } .css_134920_xyz_homework_2023_12_6_buttom_right { float: left; height: 85px; margin: 15px 0px 0 20px; background: url("../images/main_mid_bottom_02.gif") no-repeat; } /* css_134920_xyz_homework_2023_12_6_right */ .css_134920_xyz_homework_2023_12_6_right { margin: 18px 0 0 18px; float: left; width: 275px; /* border: 1px red solid; */ } .css_134920_xyz_homework_2023_12_6_right_bg { background: url("../images/main_right_bg.jpg") no-repeat; } .css_134920_xyz_homework_2023_12_6_right_bg .title { padding: 15px 0 0 25px; /* margin-left: 10px; */ color: #2D6CC7; font-family: "微软雅黑"; font-weight: bold; font-size: 16px; } .css_134920_xyz_homework_2023_12_6_right_bg .text { height: 250px; padding: 5px 10px 0 15px; font-size: 13px; text-indent: 28px; font-family: "微软雅黑"; font-weight: 500; } #css_134920_xyz { width: 984px; margin: 0 auto; background: url("../images/footer_bg.gif") repeat-x; } .css_134920_xyz_copyright { padding: 10px 0 0 0; } .css_134920_xyz_copyright p { text-align: center; color: darkgray; font-family: "黑体"; font-weight: bold; } .css_134920_xyz_copyright a { text-decoration: none; color: darkgray; }
小米商城首页（未实现交互，仅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元 米家波轮洗衣机 10kg 全景玻璃阻尼上盖 防夹手 899元 1499元 米家迷你波轮洗衣机Pro 3kg 699元 浏览更多 热门 生活电器 电暖器 扫地机 空净 清洁 米家电暖器 温控版 2200W 强劲功率，对流速热，居浴两用 279元 329元 米家石墨烯踢脚线电暖器 仿真火焰版 加湿+火焰效果 | 悬浮外观 | 双核石墨烯速热 1299元 1599元 米家石墨烯智能电暖器 石墨烯高导热，即开即暖无需等 459元 549元 米家踢脚线电暖器E 制暖身材小，抵御寒冬功劳大 449元 499元 米家石墨烯折叠踢脚线电暖器 超薄版 0°-180°百变折叠不占地|石墨烯速热|智能恒温 799元 899元 米家石墨烯踢脚线电暖器 石墨烯速热取暖，快上加快 749元 米家直流变频两季扇 暖风和煦，凉风沁人 749元 899元 米家踢脚线电暖器1S 649元 浏览更多 电暖器 厨房电器 净水器 烟灶 电饭煲 微蒸烤 米家净水器1600G 2.1秒一杯水，还原自来水的澎湃流速 3499元 4599元 小米双核净水器1200G 3.2L/min大流量，鲜活首杯水 2699元 3499元 小米即热净水器Q600 净热一体，1秒速热，精选调温每1℃ 2199元 3499元 小米净水器H600G 纯净生活双出水，六级过滤健康直饮 1199元 1499元 米家净水器1000G 澎湃大水量，5年免换RO滤芯 1699元 2499元 小米双核净水器1200G 3.2L/min大流量，鲜活首杯水 2699元 3499元 小米净水器H800G Pro 长效过滤，鲜活好水随心出 1599元 1999元 小米即热净水器Q800 2499元 浏览更多 净水器 智能家居 小爱音箱 门锁门铃 路由器 智能设备 Xiaomi智能家庭屏 10 MIUI Home｜10.1" 高清大屏｜115°超广角摄像头｜儿童模式｜家庭 899元 999元 小米小爱音箱Play 增强版 LED时钟显示，语音控制传统家电 119元 149元 小米小爱音箱 Play 听音乐、语音遥控家电 99元 109元 小米小爱音箱 Pro 澎湃低音，语音遥控传统家电 279元 299元 小米AI音箱（第二代） 低频饱满有深度，人声清晰有细节 179元 199元 小米小爱触屏音箱 可视化智能家居，海量视听资源 219元 269元 小米小爱音箱 Hi-Fi级音频芯片，支持AUX IN接口，你桌面的有源音箱 219元 249元 Redmi小爱触屏音箱 8英寸 399元 浏览更多 小爱音箱 运动出行 平衡车/滑板车 运动健身 箱包配饰 出行工具 九号平衡车 年轻人的酷玩具 1999元 2199元 九号平衡车燃动版 燃动升级，随走随停 2199元 2599元 九号平衡车 Plus 一个形影不离的新伙伴 2999元 3499元 米家电动滑板车1S 型出格，行出色 1799元 2199元 小米米家电动滑板车Pro 性能提升，动力更强劲 2699元 3099元 九号卡丁车Pro兰博基尼汽车定制版 九号卡丁车Pro兰博基尼汽车定制版 9999元起 九号平衡车 改装套件（不含平衡车） 小朋友的大玩具，老顽童的小赛车 2699元起 2999元 米家电动滑板车 3 青春版 1499元 浏览更多 净水器 预约维修服务 七天无理由退货 15天免费换货 满69元包邮 1100余家售后网点 选购指南 手机 电视 笔记本 平板 穿戴 耳机 家电 路由器 音箱 配件 服务中心 申请售后 服务政策 维修服务价格 订单查询 以旧换新 保障服务 防伪查询 F码通道 线下门店 小米之家 服务网点 授权体验店/专区 关于小米 了解小米 加入小米 投资者关系 可持续发展 廉洁举报 关注我们 新浪微博 官方微信 联系我们 公益基金会 400-100-5678 8:00-18:00（仅收市话费） 人工客服 小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 音乐 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 | Select Location 北京互联网法院法律服务工作站 | 中国消费者协会 | 北京市消费者协会 © mi.com京ICP证110507号 京ICP备10046444号京公网安备11010802020134号 京网文[2023]0169-004号 （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告 增值电信业务经营许可证编号：京B2-20180851 网络食品经营备案 京食药网食备202010048 食品经营许可证 新出发京批字第直220280号 违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 手机APP 个人中心 售后服务 人工客服 购物车 CSS：/* ------------------------------- 外部css：css.134920.xyz ------------------------------- //Time：2023/11/11 ------------------------------- //Author：快乐的钟好烦 ------------------------------- //突破自己，急速前进 ------------------------------- HtmlFrom：https://blog.fanl.cn ------------------------------- */ * { margin: 0; padding: 0; border: 0; } #top { /* 顶部样式 */ width: 100%; height: 40px; /* 调色板红蓝绿70 */ background-color: rgb(0, 0, 0); } body { font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; color: #333; min-width: 1226px; } #top a { /* 顶部超链接样式 */ color: darkgrey; text-decoration: none; font-size: 13px; font-family: "宋体"; line-height: 40px; } #top a:hover { color: white; } #www_fanwo_top_css_134920_xyz { width: 1226px; margin-right: auto; margin-left: auto; } #top_left { /* 顶部左侧 */ float: left; line-height: 40px; } #top_right { float: right; line-height: 40px; } #top_right .shop{ float: right; list-style: none; width: 150px; text-align: right; } #top_right .shop a{ /*左边距*/ margin-right: 15px; } .smallbar { /* 小竖线 */ color: dimgray; font-size: 10px; margin: 0 2px 0 2px; } #p1color { margin: 0 auto; width: 1226px; background-color: #fff; } #p2color { background-color: rgb(247, 247, 247); } #p3color { background-color: #fff; } #header_top { width: 1226px; margin: 0 auto; height: 75px; } .img_mi { width: 56px; margin: 22px 0 22px 0; margin-left: 5px; } .img_mi img { float: left; height: 56px; width: 56px; } /* 外部css：css.134920.xyz */ .header_nav { float: left; width: 850px; height: 88px; } /* 234-56=width */ .header_nav .bai { float: left; width: 178px; height: 88px; } .header_nav .nav_link { float: left; width: auto; } .header_nav .nav_link ul li { float: left; list-style: none; height: 88px; } .header_nav .nav_link li a { position: relative; top: 14px; text-decoration: none; font-size: 16px; font-family: Arial, Helvetica, sans-serif; padding: 12px 0 0 20px; color: rgb(92, 92, 92); } .header_nav .nav_link li a:hover { color: #ff6700; } /* 搜索框样式来自菜鸟教程*/ #header_top .search { float: right; position: relative; right: 0; width: 310px; } .search input { float: right; padding: 15px; font-size: 18px; border: 1px solid darkgray; width: 220px; background: white; } .search button { float: right; width: 48px; padding: 15px; background: white; color: darkgray; font-size: 18px; border: 1px solid darkgray; border-left: none; /* 防止双边框 */ cursor: pointer; } .search button:hover { /* 背景橙色,文本白色 */ background-color: #ff6700; color: #fff; } #www_fanwo_top_archives_486_html_one { display: flex; margin: 0 auto; width: 1226px; height: 460px; /* 外部css：css.134920.xyz */ } #www_fanwo_top_archives_486_html_one .left { width: 234px; height: 460px; font-size: 14px; color: #fff; } #www_fanwo_top_archives_486_html_one .left ul { height: 420px; border: 0; background: rgba(105, 101, 101, .6); margin: 0; padding: 20px 0; list-style-type: none; } #www_fanwo_top_archives_486_html_one .left ul li { position: relative; display: block; padding-left: 1px; height: 42px; line-height: 42px; } #www_fanwo_top_archives_486_html_one .left ul li a { position: relative; display: block; padding-left: 28px; height: 42px; line-height: 42px; font-size: 16px; color: white; text-decoration: none; } #www_fanwo_top_archives_486_html_one .left ul li a:hover { background-color: #ff6700; } #www_fanwo_top_archives_486_html_one .left ul li a img { float: right; margin: 10px; width: 20px; height: 20px; } .right_img { flex: 1; float: left; width: 992px; height: 460px; background-image: url("../img/top1img.png"); background-size: cover; } #www_fanwo_top_archives_486_html_two { margin: 18px auto; width: 1240px; height: 170px; } #www_fanwo_top_archives_486_html_two .left { float: left; margin-left: 0 7px 0 0; width: 234px; height: 170px; background-color: #5f5750; } #www_fanwo_top_archives_486_html_two .left ul li { float: left; padding: 4px; margin: 15px 0 0 0; text-align: center; list-style: none; width: 70px; height: 63.6px; font-size: 13px; } #www_fanwo_top_archives_486_html_two .left ul li a { text-decoration: none; color: darkgray; } #www_fanwo_top_archives_486_html_two .left ul li a:hover { color: #ffffff; } #www_fanwo_top_archives_486_html_two .left ul li a img { width: 24px; height: 24px; } #www_fanwo_top_archives_486_html_two .css_134920_xyz1 { margin: 0 5px 0px 15px; float: left; width: 316px; height: 170px; } #www_fanwo_top_archives_486_html_two .css_134920_xyz2 { margin: 0 5px 0px 9px; float: left; width: 316px; height: 170px; } #www_fanwo_top_archives_486_html_two .css_134920_xyz3 { margin: 0 0px 0px 9px; float: left; width: 316px; height: 170px; } #www_fanwo_top_archives_486_html_two .css_134920_xyz_img-set img { width: 316px; height: 170px; } #p2css_134920_xyz-fanwo_top { margin: 0 auto; width: 1226px; height: 5888px; } #p3css_134920_xyz-fanwo_top { margin: 30px auto; width: 1226px; height: 468px; } #p4css_134920_xyz-fanwo_top { margin: 0 auto; width: 1226px; height: 263.2px; } #p2css_134920_xyz-fanwo_top .hentu img { width: 1226px; height: 120px; margin: 26.2px 0 26.2px 0; } #isolatefontarea { height: 39.6px; margin: 0 0 10px 0; } .phone_text { float: left; font-family: "宋体"; color: #333; width: 77px; font-size: 15px; } .right_lookmore { float: left; margin: 10px 0 0 1057px; color: #333; } .right_lookmore a { font-size: 16px; text-decoration: none; } .img_more { float: left; width: 25px; height: 25px; } #isolatefontarea .img_more img { margin: 10px 0 0 10px; width: 20px; height: 20px; } .leftlongimg { float: left; width: 234px; height: 614px; } #p2css_134920_xyz-fanwo_top .leftlongimg a img { width: 234px; height: 614px; } .p2_areaimg { float: left; width: 992px; height: 614px; text-align: center; } .p2_areaimg ul li { float: left; width: 234px; height: 300px; list-style: none; background-color: #fff; margin: 0 5px 12px 9px; } .p2_areaimg ul li a { padding: 10px; text-decoration: none; } .p2_areaimg ul li a p .title { color: #333; font-size: 14px; } .p2_areaimg ul li a img { width: 160px; height: 160px; } .phonename { padding: 18px; width: 205px; height: 1px; text-align: center; overflow: hidden; color: black; } .describe { margin: 6px 0 10px 8px; width: 200px; height: 10px; text-align: center; overflow: hidden; padding: 10px; color: darkgray; font-size: 10px; } .price { text-align: center; color: #ff6700; font-size: 14px; } #mi-show { float: left; margin: 25px 0 10px 0; width: 1226px; height: 50px; } .mi-h2 { margin-top: 10px; float: left; width: 150px; font-size: 15px; font-family: "宋体"; } .mi-h2-right { margin-top: 20px; float: right; } .mi-h2-right li { float: left; width: 45px; list-style: none; } .mi-h2-right li a { text-align: center; text-decoration: none; color: black; font-size: 16px; } .hot-h2-right { margin-top: 20px; float: right; width: 45px; } .hot-h2-right li { float: left; width: 55px; list-style: none; } .hot-h2-right li a { text-align: center; text-decoration: none; color: black; font-size: 16px; } /* 外部css：css.134920.xyz */ /* 家电以下样式整合: */ .www_innyun_cn-h2-right { margin-top: 20px; float: right; width: auto; } .www_innyun_cn-h2-right li { float: left; list-style: none; margin: 0 15px 0 14px; } .www_innyun_cn-h2-right li a { text-align: center; text-decoration: none; color: black; font-size: 16px; } .www_innyun_cn-p2_areaimg { float: left; width: 1226px; height: 614px; text-align: center; } .www_innyun_cn-p2_areaimg ul li { float: left; width: 234px; height: 300px; list-style: none; background-color: #fff; margin: 0 11.2px 12px 0; } .www_innyun_cn-p2_areaimg ul li a { padding: 10px; text-decoration: none; } .www_innyun_cn-p2_areaimg ul li a p .title { color: #333; font-size: 14px; } .www_innyun_cn-p2_areaimg ul li a img { width: 160px; height: 160px; } /* 智能穿戴区域小区块 */ .hottenaddone { float: left; width: 234px; height: 143px; list-style: none; background-color: #fff; margin: 0.5px 0px 12px 9px; } .hottenaddone a { color: black; } .tenaddone { float: left; width: 234px; height: 143px; list-style: none; background-color: #fff; margin: 1px 11.2px 12px 0; } .tenaddone a { color: black; } .left_textarea { float: left; width: 124px; height: 143px; } .right_imgarea { float: left; width: 110px; height: 143px; } .smallimgarea { margin: 30px auto; width: 90px; height: 90px; } .smallimgarea img { width: 80px; height: 80px; } .smallname { margin: 35px 0px 5px 33px; text-align: left; } .moreposition { margin: 48px 0 5px 33px; text-align: left; } .text1more { font-size: 18px; } .text2more { font-size: 12px; color: darkgray; } /* 外部css：css.134920.xyz */ .www_innyun_cn-p2_areaimg .bigimg { float: left; width: 234px; height: 300px; list-style: none; background-color: #fff; margin: 0 11.2px 12px 0; } .www_innyun_cn-p2_areaimg .bigimg img { width: 234px; height: 300px; } .footer-hentu { float: left; margin: 30px 0 0 0; } .footer-hentu img { width: 1216px; height: 120px; } #service { height: 80px; border-bottom: 1px solid darkgrey; } #service ul { text-align: left; list-style: none; } #service ul li { float: left; width: 234.74px; height: 30px; margin: 27.5px 0 0 0; border-right: 1px darkgray solid; text-decoration: none; color: #333; } #service ul li img { width: 24px; height: 24px; } #service ul li .service-img { float: left; margin: 0 10px 0 55px; } .service-img { float: left; margin: 0 5px 0 50px; } .wd img { width: 24px; height: 24px; } .wd { border: none; float: left; width: 234.74px; height: 25px; margin: 27.5px 0 0 0; text-align: left; list-style: none; color: #333; font-size: 16px; text-decoration: none; } #service a:hover li { color: #f25807; } #footer-link { padding: 40px; height: 387.8px; margin-left: 102px; } #footer-link ul { list-style: none; } #footer-link ul li { margin: 8px 0 0 0; } #footer-link .top-title { margin: 0 0 25px 0; font-size: 15px; color: black; font-family: "黑体"; } #footer-link .link-area a { text-decoration: none; color: #757575; font-size: 13px; } #footer-link .link-area a:hover { color: #f25807; } /* 外部css：css.134920.xyz */ #footer-link .help { float: left; width: 160px; height: 307.8px; } #footer-link .sevice { float: left; width: 160px; height: 307.8px; } #footer-link .doorshop { float: left; width: 160px; height: 307.8px; } #footer-link .about { float: left; width: 160px; height: 307.8px; } #footer-link .lookus { float: left; width: 160px; height: 307.8px; } #footer-link .phonenum { float: left; width: 150px; height: 79.2px; border-left: 1px solid darkgray; padding-left: 60px; } #footer-link .phonenum .phonearea { width: 251px; height: 21.6px; font-size: 22px; line-height: 1; color: #ff6700; margin-bottom: 5px; } #footer-link .phonenum .worktime { width: 251px; height: 17.6px; margin: 0 0 5px 0; font-size: 12px; } #footer-link .phonenum .kfbuttom { width: 120px; height: 30px; border: 1px #f25807 solid; text-align: center; } #footer-link .phonenum .kfbuttom a { text-decoration: none; color: #f25807; font-size: 12px; } #footer-link .phonenum .kfbuttom:hover { background-color: #f25807; } #footer-link .phonenum .kfbuttom a:hover { color: white; } #footer-link .phonenum .kfbuttom a img { width: 18px; height: 18px; margin: 3px 2px 0 0; } #footer-area { height: 107.2px; padding: 10px; } #footer-area .img_mi-footer { float: left; margin: 0 0 22px 0; margin-left: 5px; padding: 10px; height: 107.2px; } .img_mi-footer img { height: 56px; width: 56px; } /* 外部css：css.134920.xyz */ #link-one { padding-left: 20px; height: 18.4px; font-size: 12px; } #link-one p { height: 18.4px; font-size: 12px; margin-top: 4px; } #link-one p a:hover { color: #ff6700; } #link-one .text-center p { height: 18.4px; font-size: 12px; margin-top: 0px; color: darkgray; } #link-one p a { text-decoration: none; color: black; } #link-one .text-center p a { text-decoration: none; color: darkgray; } #link-one .text-center p a:hover { color: #ff6700; } .imgfive { height: 28px; margin-top: 8px; } .imgfive img { width: 83.01px; height: 28px; } #theworld { margin: 5px auto; text-align: center; } #theworld img { width: 400px; height: 40px; } /*窗口绝对定位*/ #css_134920_xyz_homework_2023_11_11_style_cssbuttom { position: fixed; top: 220px; right: 0; width: 84px; height: 460px; background-color: #fff; text-align: center; } #css_134920_xyz_homework_2023_11_11_style_cssbuttom ul { list-style: none; } #css_134920_xyz_homework_2023_11_11_style_cssbuttom ul li { width: 84px; height: 92px; border: 1px #F0F0F0 solid; border-top: none; } #css_134920_xyz_homework_2023_11_11_style_cssbuttom ul li img { width: 40px; height: 40px; margin: 5px; } #css_134920_xyz_homework_2023_11_11_style_cssbuttom ul a { color: black; text-decoration: none; } #css_134920_xyz_homework_2023_11_11_style_cssbuttom ul a:hover { color: #ff6700; } /* ------------------------------- 外部css：css.134920.xyz ------------------------------- //Time：2023/11/11 ------------------------------- //Author：快乐的钟好烦 ------------------------------- //突破自己，急速前进 ------------------------------- HtmlFrom：https://blog.fanl.cn ------------------------------- */写的眼都花了，，，，... :@(哭泣)
声明：仅供参考，看不懂就多看看书实在不行直接交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/archives/280.html */ #css_134920_xyz_2251100259_20231029_6-1_6-1_css-bgtop { width: 620px; } #css_134920_xyz_2251100259_20231029_6-1_6-1_css-bgbtm { width: 620px; overflow: hidden; } /* 左侧单元属性 */ #www_fanwo_top_archives_280_html { float: left; width: 620px; padding: 0px 0px 0px 0px; } .post { background: url(www_fanwo_top/img05.jpg) repeat-y left top; } .post-bgtop { background: url(www_fanwo_top/img04.jpg) no-repeat left top; } .post-bgbtm { padding: 0px 30px 20px 30px; background: url(www_fanwo_top/img06.jpg) no-repeat left bottom; } .post .title { height: 44px; width: auto; margin: 0px; padding: 36px 0px 0px 28px; } .post .title .xuxian { background: url(www_fanwo_top/img11.jpg) repeat-x left bottom; width: auto; padding: 5px 0px 0px 10px; margin-right: 8ch; } .post .title a { letter-spacing: -2px; text-decoration: none; text-transform: lowercase; font-size: 36px; color: #424242; } .post .title a:hover { color: #065EFE; } .post .meta { margin-left: 2px; padding: 4px 30px 2px 0px; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 11px; color: #66665E; } .post .meta span { margin: 0px; } .post .meta a { text-decoration: none; } .post .entry { padding: 10px; font-size: 12px; } .post .entry p { text-indent: 2em; line-height: 1.5; } .post .comments { display: block; width: 120px; height: 18px; margin: 0px; padding: 3px 0px 0px 40px; background: #90BF35; border: 1px solid #5F817E; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; font-weight: bold; color: #FFFFFF; } /* 右侧单元属性 */ .www.fanl.cn{ margin: 50px; float: left; padding: 0; color: #191919; inline-size: 50px; width: 30px; height: 3.75rem; } #sidebar { float: right; width: 310px; font-family: Arial, Helvetica, sans-serif; } #sidebar ul { margin: 0; padding: 0; background: none; list-style: none; line-height: normal; } #sidebar li { background: url(www_fanwo_top/img09.jpg) repeat-y left top; } #sidebar li ul { margin: 0px 0px; padding: 0px 0px 20px 0px; background: url(www_fanwo_top/img10.jpg) no-repeat left bottom; } #sidebar li li { margin: -20px 30px 20px 30px; padding: 8px 0px 8px 10px; border-bottom: 1px solid #E0E0E0; background: url(www_fanwo_top/img12.jpg) no-repeat left 13px; } #sidebar li li a { font-weight: normal; } /*css From:css.134920.xyz */ /* 文章页：https://blog.fanl.cn/archives/280.html */ #sidebar li li a:hover { color: #065EFE; } #sidebar p { margin: 0; padding: 0px 14px; } #sidebar h2 { height: 50px; margin: 0px; padding: 30px 0px 13px 30px; background: url(www_fanwo_top/img08.jpg) no-repeat left top; letter-spacing: -1px; text-transform: lowercase; font-size: 24px; font-weight: normal; color: #424242; } #sidebar p { line-height: 200%; } #sidebar a { text-align: left; text-decoration: none; font-weight: bold; color: #666666; } .url { width: 310px; margin-top: 0%; } /* 底部版权属性 */ #css2251100259 { width: 920px; height: 100px; margin: 0 auto; padding: 0; } #css2251100259 p { margin: 0; color: #FFF; padding: 30px 0px 0px 0px; text-align: center; line-height: normal; font-size: 11px; }6-2 运行效果：6-2 HTML代码： 习题6-2 徒手攀岩，低空跳伞，高空飞跃 首页 联系 路线 关于 徒手攀岩 徒手攀岩（rockdiming with hands）：利用岩石上的裂缝、洞穴、突起等天然把攀登陡峭岩壁的运动。攀岩是一项锻炼综合素质的运动，不仅可以获得惊人的勇气，过人的力量、几号的柔韧性，更可以提高耐力和判断力，使人在激烈竞争、纷繁紊乱的都市生活中应付自如。在岩壁上攀爬时，生活简单得只剩下自己。 徒手攀岩就是不加辅助攀岩工具和保护措施的攀岩运动，因而具有极大的危险性，名列世界十大危险运动之列。但是，徒手攀岩正以其特有的魅力，突出的个性感染着人们，参与攀岩，会让人在悬崖峭壁的抗衡中学会坚强，在与大山的拥抱中感受宽容，在征服攀登路线后享受成功与胜利的喜悦。 在欧美、前苏联及亚洲的日本、韩国、攀岩运动已相当流行，当今世界攀岩水平数欧美热别是发过与美国最高，法国相对在人工岩壁上占优，美国在自然岩壁称强。在亚洲，日本、韩国水平较高，他们有些选手已达到世界水平。中国大陆、香港及台湾的水平大体相当，同属亚洲中流水平。ReadMore... 起源 攀岩运动起源于18世纪的欧洲，1970年成为一项独立的运动项目。徒手攀岩是指不依赖任何外在的辅助力量，只靠攀岩者的自生力量完成攀登过程。 在欧美、前苏联及亚洲的日本、韩国、攀岩运动已相当流行，当今世界攀岩水平数欧美热别是发过与美国最高，法国相对在人工岩壁上占优，美国在自然岩壁称强。在亚洲，日本、韩国水平较高，他们有些选手已达到世界水平。中国大陆、香港及台湾的水平大体相当，同属亚洲中流水平。 运动特点 徒手攀岩要求人们在各种高度及角度的岩壁上，连续完成转身、引体向上、腾挪甚至跳跃等惊险动作、集健身、娱乐、竞技于一身，是一项刺激而不失优美的极限运动，被全球的攀岩迷们称为“峭壁上的芭蕾” 虽然，近年来攀岩已经渐渐成为了一种大众化的户外极限运动，越来越多的人从攀岩运动中体验到了独特的乐趣，但是徒手攀岩对人的体能、胆量、身体协调性和柔韧性的要求极高，对于那些没有经历过系统的专业训练的 初学者来说无疑是危险重重。 Copyright © 2021 宇宙极限网 | 设计 海阔天空工作室 6-2 CSS代码:/*代码和人有个能跑就行啦~*/ /* 文章页：https://blog.fanl.cn/archives/280.html */ html { background: #323030; } /*css From:css.134920.xyz */ /* 文章页：https://blog.fanl.cn/archives/280.html */ body { margin: 0; padding: 0; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.5em; width: 100%; display: table; background: url(www_fanwo_top/templatemo_bg.jpg) top repeat-x #323030 ; } a:link, a:visited { color: #CCFF00; text-decoration: underline; } .www_fanwo_top{ max-width: 250px; margin: 250 250 250 250; min-width: 250px; height: 250px; } a:active, a:hover { color: #FF9900; text-decoration: none; } p { font-size: 12px; font-family: Tahoma, Geneva, sans-serif; color: #EEEEEE; text-align: justify; margin: 0 0 15px 0; } h1 { margin: 0 0 15px 0; font-size: 24px; font-family: "Times New Roman", Times, serif; font-weight: normal; color: #00CCFF; } h2 { margin: 0 0 20px 25px; font-size: 24px; font-family: "Times New Roman", Times, serif; font-weight: normal; color: #00CCFF; } #templatemo_container { width: 900px; margin: auto; } #templatemo_header { width: 900px; height: 220px; margin: 0; padding: 1px 0 0 0; } #templatemo_logo { float: left; background: url(www_fanwo_top/templatemo_logo.jpg); width: 270px; height: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: italic; color: #CCCCCC; margin: 105px 0 0 0; padding: 58px 0 0 90px; } #templatemo_menu { float: right; width: 430px; height: 120px; background: url(www_fanwo_top/templatemo_menu_bg.jpg); padding: 0; margin: 80px 0 0 0; } #templatemo_menu .templatemo_menu_item { float: left; width: 100px; height: 120px; background: url(www_fanwo_top/templatemo_menu_divider.png) right center no-repeat; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; } .templatemo_menu_home { float: left; width: 100px; height: 40px; padding: 80px 0 0 0; background: url(www_fanwo_top/templatemo_menu_home.png) no-repeat; background-position: center 10px; text-align: center; } .templatemo_menu_member { float: left; width: 100px; height: 40px; padding: 80px 0 0 0; background: url(www_fanwo_top/templatemo_menu_member.png) no-repeat; background-position: center 10px; text-align: center; } .templatemo_menu_about { float: left; width: 100px; height: 40px; padding: 80px 0 0 0; background: url(www_fanwo_top/templatemo_menu_about.png) no-repeat; background-position: center 10px; text-align: center; } .templatemo_menu_content { float: left; width: 100px; height: 40px; padding: 80px 0 0 0; background: url(www_fanwo_top/templatemo_menu_content.png) no-repeat; background-position: center 10px; text-align: center; } #templatemo_menu a:hover, #templatemo_menu .current { color: #F90; text-decoration: none; } /*css From:css.134920.xyz */ /* 文章页：https://blog.fanl.cn/archives/280.html */ #templatemo_menu a { color: #fff; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; text-decoration: none; } .www_fanwo_top { background: none; } .templatemo_one_col { width: 900px; margin: 0 0 15px 0; float: left; } .templatemo_one_col img { border: 5px solid #6f6f6c; float: right; margin: 0 0 10px 10px; } .templatemo_two_col { width: 440px; float: left; } .templatemo_two_col img { border: 5px solid #6f6f6c; float: left; margin: 0 10px 10px 0; } /* 第three个大图属性 */ .templatemo_three_col { width: 440px; float: left; margin: 15px 0 10px 15px; } .templatemo_three_col img { border: 5px solid #6f6f6c; float: left; margin-right: 10px; } .templatemo_right { float: right; width: 440px; } .templatemo_four_col { float: left; width: 217px; } .templatemo_h_line { background: url(www_fanwo_top/templatemo_h_line.png) center; width: 900px; height: 2px; margin: 0 0 15px 0; } .templatemo_v_line { float: left; background: url(www_fanwo_top/templatemo_v_line.png) no-repeat center; height: 135px; width: 10px; } #templatemo_css_fanwo_top { width: 100%; color: #fbfbfb; margin: 0; padding: 0 0 20px 0; font-size: 13px; text-align: center; } .templatemo_list { list-style: none; padding: 0 0 0 25px; } .templatemo_list li { color: #fbfbfb; font-size: 12px; font-family: Tahoma, Geneva, sans-serif; background: url(www_fanwo_top/templatemo_bullet.png) no-repeat; padding: 0 0 5px 22px; height: 18px; } .css_fanwo_top { margin-top: 550px; } .css_fanwo_top a { color: #ffff00; text-decoration: under; } .css_fanwo_top a:hover { color: #FFFF00; text-decoration: underline; } #templatemo_bottom { margin-top: 28px; float: left; background: url(www_fanwo_top/templatemo_bottom.jpg) bottom repeat-x; height: 18px; width: 100%; } .cleaner { clear: both; height: 0; margin: 0; padding: 0; } /*css From:css.134920.xyz */ /* 文章页：https://blog.fanl.cn/archives/280.html */css全外链，一些img和样式加载不出来就是网速不行有网情况下直接交index就可以实现全加载（已测试）:@(想一想) 参考别全copy，出事的话不关我的事哈
::(睡觉) 赶早写的按图还原图代码（index）： 盒子模型布局 header-top header_nav left 1 2 3 4 5 6 7 8 9 right footer