静态网页-改图宝（附源码）

最新推荐文章于 2024-08-03 22:21:30 发布

姬阳阳

最新推荐文章于 2024-08-03 22:21:30 发布

阅读量1.2k

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_51757444/article/details/125078197

版权

本文介绍了如何创建静态网页改图宝，并提供了源码。包括HTML和CSS部分，展示了作者个人实现的效果与官网对比。

摘要由CSDN通过智能技术生成

静态网页------改图宝（赋源码）

这是人家官网的：

在这里插入图片描述

我做的是这样的：

在这里插入图片描述

总结

二级菜单有些问题，使用百分比后缩小网页时和一级菜单的一个边框对不齐，使用精准的像素后放大网页时对不齐
页脚用行块盒真的省事
这个练习做完就要学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>&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;在线修改图片尺寸</li>
                                <li>&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;图片加单行水印</li>
                                <li>&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;图片平铺加水印</li>
                                <li>&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;证件照换背景色</li>
                                <li>&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;修改图片分辨率</li>
                                <li>&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;图片格式转换</li>
                                <li>&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;旋转图片方向</li>
                            </ul>
                        </div>

                        <!-- 第二列 -->
                        <div class="list">
                            <ul>
                                <li>&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;PNG图片大小压缩</li>
                                <li>&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;图片转文字</li>
                                <li>&nbsp;&nbsp;&nbsp;&gt;