静态网页-改图宝（附源码）
2024-05-26 16:54:57
静态网页------改图宝（赋源码）
这是人家官网的：
我做的是这样的：
总结
二级菜单有些问题，使用百分比后缩小网页时和一级菜单的一个边框对不齐，使用精准的像素后放大网页时对不齐
页脚用行块盒真的省事
这个练习做完就要学CSS3，哦耶，能更好看了
源码
Github：改图宝
HTML:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>改图宝 - 在线修改图片大小尺寸工具</title><link rel="stylesheet" href="./CSS/reset.css"><link rel="stylesheet" href="./CSS/index.css">
</head><body><header class="nav"><!-- logo图片 --><div class="logo"><img src="./img/logo.svg" alt="图片加载失败"><h2 style="display: none;">改图包</h2></div><!-- 导航（菜单） --><nav class="menu fudiv"><ul class="menu-ul fudiv"><li class="item itemSdy">全部功能<!-- 二级菜单 --><div class="sdyMenu"><div class="list"><ul><li> > 在线修改图片尺寸</li><li> > 图片加单行水印</li><li> > 图片平铺加水印</li><li> > 证件照换背景色</li><li> > 修改图片分辨率</li><li> > 图片格式转换</li><li> > 旋转图片方向</li></ul></div><!-- 第二列 --><div class="list"><ul><li> > PNG图片大小压缩</li><li> > 图片转文字</li><li> > 在线生成印章</li><li> > 查看照片EXIF信息</li><li> > PDF文件转图片</li><li> > PDF文件转Word</li><li> > 图片转黑白灰度</li></ul></div><!-- 第三列 --><div class="list"><ul><li> > 在线生成二维码</li><li> > 二维码在线识别</li><li> > 在线生成条形码</li><li> > 人相照片在线磨皮</li><li> > 图片像素尺寸换算</li><li> > 改图宝工具大全</li><li> > 照片尺寸大全</li></ul></div><!-- 第四列 --><div class="list"><ul><li> > 专业版网站</li><li> > PPT设计服务</li><li> > 照片查询删除工具</li><li> > 改图知识库</li><li> > 联系我们</li></ul></div></div></li><li class="item itemCurrent">在线修改图片</li><li class="item">图片加水印</li><li class="item">证件照切换背景颜色</li><li class="item">修改分辨率</li><li class="item">图片格式转换</li><li class="item">旋转图片</li><li class="item">压缩PNG图片</li><li class="item">图片转文字</li><li class="item">查看EXIF</li></ul></nav><!-- 登录以及语言设置 --><div class="nav-right"><div class="language fudiv"><a href="#">语言</a></div><div class="Log fudiv"><a href="#">用户登录</a></div></div></header><div class="content"><div class="title-h2"><h2>快速、简单的在线图片修改工具 - 改图宝</h2></div><!-- 输入文件 --><div class="enterImg"><form action="#" method="post"><button class="opt" type="submit" disabled>请选择要修改的图片</button></form></div><!-- 表述功能 --><div class="describe"><p>可以在线修改图片像素及尺寸、裁剪、压缩文件大小及处理各类考试网上报名照片及证件照<a href="#">怎么使用</a><a href="#">常见问题</a></p><p>我们提供了一寸、二寸、公务员、会计、社保等考试报名照、证件照片尺寸及自定义大小和尺寸在线修改服务<a href="#">联系我们</a></p><p>图片文件大小如超过10M请使用图片编辑软件(如PS)修图, 上传的图片30分钟内会自动删除</p></div><!-- 广告部分 --><div class="adv"><div class="advertise"><h3 style="display: none;">广告</h3></div><!-- 广告右上角锚链接 --><div class="Anchor"><a href="#"></a></div></div></div><footer><div class="footTop"><ul class="fudiv"><li>印章</li><li>水印</li><li>二维码</li><li>格式转换</li><li>分辨率</li><li>条形码</li><li>代做PPT</li><li>像素尺寸转换</li><li>证件照</li><li>网站地图</li><li>联系我们</li><li>关于我们</li><li>隐私条款</li></ul></div><div class="footBottom"><div class="item"><p>2011-2022</p></div><div class="item"><a href="#">Gaitubao.com</a><p>All rights reserved.</p></div><div class="item"><a href="#">粤ICP备16110699号</a></div></div></footer>
</body></html>
CSS
body {background-color: #efefef;min-width: 1436px;max-width: 1536px;min-height: 337px;
}.fudiv::after {content: "";display: block;clear: both;
}.nav {height: 63px;box-sizing: border-box;background-color: white;padding: 0 70px;line-height: 63px;border: 1px solid #ddd;position: relative;
}.nav .logo {width: 104px;height: 32px;float: left;padding: 10px 0;
}.nav .menu {width: 960px;height: 62px;margin: 0 auto;
}.nav .menu .menu-ul .item,
.nav .nav-right .language a,
.nav .nav-right .Log a {height: 63px;padding: 0 10px;float: left;color: #333;font-size: 13px;font-family: -apple-system, Segoe UI, SegoeUI, Microsoft YaHei,Microsoft JhengHei, PingFang SC, Helvetica Neue, Helvetica, Arial,sans-serif;box-sizing: border-box;cursor: pointer;
}.nav .menu .menu-ul .item:nth-child(1) {margin: 0;border-left: 2px solid #eee;border-right: 2px solid #eee;padding: 0 25px;
}.nav .menu .menu-ul .item:hover,
.nav .nav-right .language:hover,
.nav .nav-right .Log:hover {border-bottom: 4px solid red;
}.nav .nav-right {position: absolute;right: 70px;top: 0px;
}.nav .nav-right .language,
.nav .nav-right .Log {float: left;padding: 0 5px;margin-left: 5px;height: 63px;line-height: 63px;box-sizing: border-box;
}.nav .menu .menu-ul .itemSdy:hover .sdyMenu {display: block;
}/* 二级菜单 */
.nav .menu .menu-ul .item .sdyMenu {display: none;position: absolute;background-color: white;width: 100%;left: 0;top: 63px;
}.nav .menu .menu-ul .item .sdyMenu .list {float: left;padding: 10px 0;line-height: 2.5em;width: 220px;margin-right: 5px;
}.nav .menu .menu-ul .item .sdyMenu .list ul li:hover {background-color: rgba(239, 239, 239);
}.nav .menu .menu-ul .item .sdyMenu .list:nth-child(1) {margin-left: 18.6%;margin-left: 285px;border-left: 2px solid #eee;box-sizing: border-box;
}.nav .menu .menu-ul .item .sdyMenu .list:nth-child(4) {margin: 0;box-sizing: border-box;border-right: 2px solid #eee;height: 248px;
}/* 内容主体 */
.content {margin: 40px auto;width: 1380px;text-align: center;
}.content .title-h2 {margin-bottom: 50px;
}.content .title-h2 h2 {font-size: 20px;line-height: 1.2;font-weight: 500;
}.content .enterImg {margin-bottom: 65px;
}.content .enterImg .opt {border: 1px solid #28a745;background-color: #28a745;color: white;width: 202px;height: 45px;line-height: 1.5;font-weight: 400;font-family: inherit;border-radius: 4px;
}.content .enterImg .opt:hover {color: #fff;background-color: #218838;border-color: #1e7e34;cursor: pointer;
}.content .describe {margin-bottom: 30px;color: #333;font-size: 0.875rem;
}.content .describe p {margin-bottom: 14px;
}.content .describe p a {color: #337ab7;text-decoration: underline;
}.content .describe p a:hover {color: #23527c;
}.content .adv {position: relative;width: 420px;height: 300px;margin: 0 auto;
}.content .adv .advertise {background: url("../img/advertise.png");width: 420px;height: 300px;margin: 0 auto;position: relative;
}.content .adv .Anchor {width: 120px;height: 20px;position: absolute;top: 0;right: 0;cursor: pointer;
}.content .adv .Anchor:hover {background: url("../img/advertise-hover.png") no-repeat;background-size: 100px 20px;position: absolute;top: 0;right: -20px;z-index: 1;
}.content .adv .advertise::after {content: "";position: absolute;width: 340px;height: 50px;background-color: rgba(239, 239, 239, 0);bottom: 0;left: 40px;cursor: pointer;
}footer {width: 100%;height: 100px;box-sizing: border-box;border-top: 1px solid #ddd;margin-top: 100px;
}footer .footTop {text-align: center;
}footer .footTop ul {cursor: pointer;margin-top: 30px;
}footer .footTop li {display: inline-block;margin-right: 20px;color: #666;font-size: 13px;font-weight: 400px;font-family: -apple-system, Segoe UI, SegoeUI, Microsoft YaHei,Microsoft JhengHei, PingFang SC, Helvetica Neue, Helvetica, Arial,sans-serif;
}footer .footTop li:hover {text-decoration: underline;color: #333;
}footer .footTop li:nth-child(13) {margin: 0;
}footer .footBottom {margin-top: 20px;text-align: center;
}footer .footBottom .item {display: inline-block;font-size: 12px;color: #999;
}footer .footBottom .item p {display: inline-block;cursor: default;
}footer .footBottom .item a {font-size: 12px;color: #999;margin: 0 4px;
}footer .footBottom .item a:hover {text-decoration: underline;
}分享到此为止，
静态网页-改图宝（附源码）相关推荐
- Android一行代码实现网络加载GIF闪图（附源码）
最近项目有个需求是要从网络加载GIF闪图, 但是Android原生的ImageView并不支持Gif... 于是从网上看了些Dome, 发现总是有些这样那样的问题, 譬如: ☹ 没有缓存,还要自己写一 ...
- python爬取网页版QQ空间，生成词云图、柱状图、折线图（附源码）
python爬取网页版QQ空间,生成词云图.柱状图.折线图 最近python课程学完了,琢磨着用python点什么东西,经过一番搜索,盯上了QQ空间,拿走不谢,欢迎点赞收藏,记得github给个sta ...
- （毕设2）esp8266+dht11+mysql+flask+echarts单片机温湿度数据采集网页实时可视化（附源码）
目录 前言 单片机端 服务器端 网页端 成果展示 源码下载 前言 作者:齐鲁师范学院18云计算孙浩 QQ:2535640842 开发环境:Linux,Arduino ide, PyCharm 2020 ...
- WinForm立体饼状图实现(附源码示例) 之配餐系统的开发
本文所要将的是在"配餐系统"开发中 立体饼状图效果的实现,直接贴出代码和附上示例,相信需要的朋友可以很容易使用!项目中的效果图,如下: 实现 应用的是 System.Drawing ...
- 这下终于可以方便地发表测试型网页代码了（附源码下载）
前言 色彩斑斓的"马" 虽然利用插入代码功能可以很华丽的插入色彩斑斓的代码,但是就html(Xhtml)代码.js代码.css代码而言,我更喜欢想蓝色理想论坛中的那种:有个文本框, ...
- HTML/JSP/CSS网页编写实例，附源码
最近在刚接触web前端,学习网页编写,虽然网上案例很多但是实战起来还是问题很多,经过不懈努力终于完成了一个简单的web页面,在此记录一下,分享源码大家共同学习. 最终效果如下: 如上图所示整个页面有5 ...
- Cesium专栏-气象卫星云图动图（附源码下载）
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
- Qt Quick 图像处理实例之美图秀秀 附源码下载
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在< ...
- ⚡还敢宕机，佛祖教你做人（11副图+内附源码+效果展示）⚡
文章目录 佛祖 皮卡丘 悟空 魔人 电脑 键盘 西方龙 喷火龙 小老鼠 骷髅头 顶 一条命令让linux拥有11副门神,保佑机器永不宕机. 每次远程连接都会出现门神镇机哦 vim /etc/motd ...
最新文章
- 详解synchronized锁的各种用法及注意事项
- 乐安全 支持x86_国产EDA又进一步！芯华章发布全新仿真技术：x86、ARM等架构通吃...
- ResNet最强改进版来了！ResNeSt：Split-Attention Networks
- 搜索运营有哪些玩法，你知道吗？
- C++ Primer 第十六章 模板与范型编程
- linux-vim设置环境
- Windows安装Redis 详细教程——《Redis入门》
- 怎样在javascript中直接设置好打印方式为横向或纵向(測試未果)
- 31 天重构学习笔记9. 提取接口
- 【D3.V3.js系列教程】--（十五）SVG基本图形绘制
- linux虚拟机安装samba服务,在虚拟机Redhat Linux下安装Samba服务器分享
- Java 使用反射 Class.forName() 报错java.lang.ClassNotFoundException 的解决办法
- db2 sqlcode
- 模拟量输入输出配置及数值的规范化
- 人工智能 —— 计算智能概述
- Codeforces C. A Mist of Florescence
- Redis——Redis入门和一些笔记
- 第四届橙瓜网络文学奖网文之王，烽火戏诸侯舍我其谁？
- vue-cli3，虾皮java开发面经
- 物联网实战指南 分享