Zyyo

Just for fun

文章

24

标签

25

评论

18492

数据统计

成立

430天

文章

24篇

评论

18492条

标签

25个

最近文章

开始尝试自己开发主题。

⚠️本文发布于 954 天前,内容可能已过时,请注意甄别信息的准确性。

看到了一位大佬的主题很好看,甚是喜欢,是人家自己开发的,真的很羡慕。
吾柯
我决定自己也开始尝试尝试,边学习和边创作的过程,我前端三剑客基本没啥基础,我也只是个高中生,对这些东西已有的认识,都是我对主题修改中学来的,但还是是慢慢来吧,这可能是个漫长的过程,如果我不放弃的话,甚至要数年,可能我会中途放弃。

我特别喜欢大佬的样式,我向大佬询问了,如果大佬同意,我就继续学习开发,如果不行,那我就会有较大的改动,改的至少认不出来是模仿的。

同一个页面大佬写的代码我都看不懂,而自己写的代码又太弱智了。

昨晚一夜没睡,忙活出来这半个页面。

只有静态页面,什么都没有实现呢。

zt.jpg

求大家别嘲笑,我的能力就这样,虽然代码写的很弱智,但是是我辛辛苦苦查资料,查百度出来的

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css">

    <title>主题</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f2f3f5;
        }
        
        .app {
            display: flex;
             flex-direction: column;
            overflow: hidden;
            max-width: 500px;
            margin: 10px auto;
        }
        
        @media (max-width: 767px) {
            .app {
                width: 100vw;
                height: 100vh;
                margin: 0px auto;
            }
        }
        
        .head {
            display: flex;
            flex-direction: column;
            position: relative;
            height: 400px;
            width: 100%;
        }
        
        .banner {
            position: relative;
            background-size: cover;
            background-position: center;
            background-image: url(http://p1.qhimg.com/bdm/1024_768_85/t01e66d486b8e826270.jpg);
            height: 280px;
            width: 100%;
        }
        
        .banner-icon {
            width: 100%;
            height: 50px;
            position: absolute;
            top: 18px;
        }
        
        .icon1 {
            position: absolute;
            right: 10px;
        }
        
        .icon2 {
            position: absolute;
            right: 55px;
        }
        
        .author-bar {
            position: relative;
            background-color: #ffffff;
            height: 120px;
            width: 100%;
        }
        
        .author-logo {
            width: 80px;
            height: 80px;
            background-size: cover;
            background-position: center;
            background-image: url(https://p.blog.blog.zyyo.net/a.jpg);
            border-radius: 5px;
            position: absolute;
            right: 25px;
            top: -50px;
        }
        
        .author-text {
            position: absolute;
            top: 45px;
            width: 100%;
        }
        
        .author-title {
            font-size: 1.3rem;
            font-weight: 600;
            position: absolute;
            right: 45px;
        }
        
        .author-say {
            font-size: 0.8rem;
            font-weight: 400;
            margin-top: 20px;
        }
        
        .tab{
            display: flex;
            flex-direction: column;;
            margin-top: 20px;
            position: relative;
            height: 35px;
            width: 100%;
            background-color: #ffffff;
             padding:20px 0px ;
        }
        
        .tab1 {
            display: flex;
            flex-direction: space-between;
            position: relative;
            height: 100%;
            width:100%;
        }
        .option{
         color:#ffffff;
           display: flex;
            justify-content: center;
            align-items: center;
             border-radius: 18px;
            height: 100%;
            width:80px;
            background-color: #00BFFF;
            margin-left: 20px;
        }
        .option1{
        background-color:#007FFF;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="head">


            <div class="banner">
                <div class="banner-icon">
                    <div class="icon1"><i style="font-size:25px;color: #ffffff;" class=" fas fa-user-circle"></i></div>
                    <div class="icon2"> <i style="font-size:25px;color: #ffffff;" class="fas fa-sliders-h"></i></i>
                    </div>
                </div>
            </div>



            <div class="author-bar">
                <div class="author-logo"></div>
                <div class="author-text">
                    <div class="author-title">夏天</div>
                    <div class="author-say"></div>
                </div>
            </div>

        </div>
        <div class="tab">
            <div class="tab1">
            <div class="option option1">首页</div>
            <div class="option">关于</div>
            <div class="option">留言</div>
            </div>
        </div>
    </div>
</body>


</html>

开始尝试自己开发主题。

发布于

July 27, 2023

分类

记录点滴

版权协议

MIT

#Typecho
评论
正在回复评论:moskva-news-469 的评论 取消
😀
已有 4156 条评论
    moskva-news-469 2025-12-25 回复

    Новости Москвы https://moskva-news.com и Московской области: политика, экономика, общество, происшествия, транспорт, ЖКХ и погода. Оперативные репортажи, комментарии экспертов, официальные заявления и фото. Главное за день — быстро, точно, без лишнего.

      Waltersuina 2026-02-07 回复
      @moskva-news-469

      полотенцесушитель лесенка купить полотенцесушитель

      CarlosVax 2026-02-05 回复
      @moskva-news-469

      дизайн ванной в квартире дизайн проект двухкомнатной квартиры

      WilliamCal 2026-02-04 回复
      @moskva-news-469

      дизайн коттеджа гостиная дизайн коттеджа заказать проект

      NelsonMub 2026-02-02 回复
      @moskva-news-469

      Популярный даркнет кракен магазин предлагает тысячи товаров от проверенных продавцов

    lratvakan-184 2025-12-25 回复

    Мировые новости https://lratvakan.com сегодня: свежая информация из разных стран, важные заявления, международная политика, рынки и тренды. Оперативные обновления, проверенные источники и понятные обзоры событий каждого дня.

      Waltersuina 2026-02-07 回复
      @lratvakan-184

      полотенцесушитель размеры полотенцесушитель сталь купить

    strojdvor-663 2025-12-25 回复

    Портал о строительстве https://strojdvor.ru ремонте и инженерных системах: от фундамента до отделки и коммуникаций. Пошаговые инструкции, сравнение материалов, расчёты, советы экспертов и типовые ошибки. Помогаем сделать надёжно и без переплат.

      @strojdvor-663

      Do you love gambling? crypto gambling sites allow you to play online using Bitcoin and altcoins. Enjoy fast deposits, instant payouts, privacy, slots, and live dealer games on reliable, crypto-friendly platforms.

      CarlosVax 2026-02-05 回复
      @strojdvor-663

      дизайн гостиной в квартире дизайн проект двухкомнатной квартиры

      WilliamCal 2026-02-04 回复
      @strojdvor-663

      дизайн гостиной в частном доме дизайн коттеджа

      @strojdvor-663

      заклепки вытяжные 8 заклепка алюм вытяжная

    soft-sng-259 2025-12-24 回复

    Бесплатные программы https://soft-sng.ru для компьютера: офис, браузер, антивирус, архиватор, PDF, плееры, монтаж видео и фото, утилиты для системы. Скачивание с официальных сайтов, краткие обзоры, плюсы/минусы и аналоги. Подбор по Windows/macOS/Linux, подборки и инструкции.

      @soft-sng-259

      заклепка вытяжная 7337 заклепки вытяжные стандартные

    farbwood-250 2025-12-24 回复

    FarbWood https://farbwood.by команда, включающая конструкторов, менеджеров и мастеров строительных специальностей. Каждый член нашего коллектива имеет за плечами собственный солидный опыт работы в своей сфере от 9 лет. Объединив общие знания и навыки, мы постарались создать компанию, которая сможет предоставить качественные услуги частным и корпоративным заказчикам.

    Edwardgor 2025-12-24 回复

    Сдаешь экзамен? решение тусур готовим к экзаменам по билету и практике, объясняем сложные темы, даём подборку задач и решений, тренируем устный ответ. Проверим конспекты, поможем оформить лабы и отчёты.

    askbrainy-665 2025-12-24 回复

    Experience Brainy https://askbrainy.com the free & open-source AI assistant. Get real-time web search, deep research, and voice message support directly on Telegram and the web. No subscriptions, just powerful answers.

    Robertobycle 2025-12-24 回复

    Latest publications: https://redclara.net/news/pgs/?casinos-without-verification-trust.html

感谢支持!

微信二维码

请使用微信扫描二维码打赏。

支付宝二维码

请使用支付宝扫描二维码打赏。