在线代码编辑器-开发工具-核心编程

首页
零基础教程
分类浏览
编程
- Sentinel
- Go语言
- C语言
- 汇编语言
- Android
- Java工具库
- Spring Cloud Alibaba
- Spring Cloud
- Spring Data
- Spring Boot
- Spring Batch
- JSP/Servlet
- Hadoop
- Dubbo
- J2Cache
- Hibernate
- OpenJPA
- MyBatis
- ShardingSphere
- Freemarker
- Thymeleaf
- Activiti
- POI
- JMail
- Log4j
- LogBack
- Dom4j
- XML
- RxJava
- JasperReport
- JUnit
- JMock
- Apache Commons
- HttpComponents
- CGLib
- WebSocket
- ESAPI
- 设计模式
前端
- CSS/CSS3
- HTML5
- JavaScript
- JQuery
- DHTMLX
- 浏览器
- HTML
- 前端小知识
- Vue.js
- NodeJS
- ECharts
- Less
- UmiJS
- React
- Ant Design
- Bootstrap
- uni-app
- JS-XLSX
数据库
- SQL
- PL/SQL
- MySQL
- Oracle
- Redis
- SQLite
- MongoDB
- Zookeeper
- H2
服务器
- Podman
- Prometheus
- Tomcat
- JBoss
- RocketMQ
- Docker
- Nginx
- RabbitMQ
其他
- 程序员
- Maven
- SVN
- Git
- UML
- Windows
- 办公软件
- Axure
- Jenkins
- HTTP
- macOS
Java
Spring
Linux
AI
代码片段
Get小技能
面试题
开发工具

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的专属导航页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #f5f5f5;
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;
        }
        .nav-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .nav-group {
            margin-bottom: 25px;
        }
        .nav-group h2 {
            color: #555;
            margin-bottom: 15px;
            font-size: 18px;
            border-left: 4px solid #2f96ff;
            padding-left: 10px;
        }
        .nav-links {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        .nav-links li a {
            display: inline-block;
            padding: 8px 16px;
            background-color: #2f96ff;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
        }
        .nav-links li a:hover {
            background-color: #1e88e5;
        }
    </style>
</head>
<body>
    <div class="nav-container">
        <h1>我的常用导航</h1>

<div class="nav-group">
            <h2>搜索引擎</h2>
            <ul class="nav-links">
                <li><a href="https://www.baidu.com" rel="noopener" target="_blank">百度</a></li>
                <li><a href="https://www.google.com" rel="noopener" target="_blank">谷歌</a></li>
                <li><a href="https://cn.bing.com" rel="noopener" target="_blank">必应</a></li>
            </ul>
        </div>

<div class="nav-group">
            <h2>编程相关</h2>
            <ul class="nav-links">
                <li><a href="https://www.github.com" rel="noopener" target="_blank">GitHub</a></li>
                <li><a href="https://developer.mozilla.org/zh-CN" rel="noopener" target="_blank">MDN 文档</a></li>
                <li><a href="https://leetcode.cn" rel="noopener" target="_blank">力扣</a></li>
                <li><a href="https://stackoverflow.com" rel="noopener" target="_blank">Stack Overflow</a></li>
            </ul>
        </div>

<div class="nav-group">
            <h2>日常办公</h2>
            <ul class="nav-links">
                <li><a href="https://mail.qq.com" rel="noopener" target="_blank">QQ 邮箱</a></li>
                <li><a href="https://docs.qq.com" rel="noopener" target="_blank">腾讯文档</a></li>
                <li><a href="https://www.zhihu.com" rel="noopener" target="_blank">知乎</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

在线代码编辑器

代码编辑区自动执行

预览效果

字符数: 0

提示: 输入完整的HTML代码，包括<!DOCTYPE>和<html>标签

关于

本网站专注于 Java、数据库（MySQL、Oracle）、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章，助力技术传播与交流。无论是技术新手渴望入门，还是资深开发者寻求进阶，这里都能为您提供深度见解与实用经验，让复杂编码变得轻松易懂，携手共赴技术提升新高度。如有侵权，请来信告知：hxstrive@outlook.com

链接

其他应用

开源镜像网站

公众号

在线代码编辑器

代码编辑区 自动执行

预览效果

选择模板

选择库和版本

库

版本

文件

代码编辑区自动执行