软件工程日报（软工随笔）

今天完成了使用css,js和dom实现一个页面的基础设计：

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的博客</title> <link rel="stylesheet" href="myblock.css"> <style> /* 按钮样式 */ #mode-switch { padding: 8px 16px; border: none; background-color: white; color: #333; cursor: pointer; } 
    body.dark-mode #progress-container {
        background-color: #555;
    }

    body.dark-mode nav {
        background-color: #222;
    }

    /* 错误提示样式 */
    .error {
        color: red;
        font-size: 12px;
        margin-top: 5px;
    }
</style>
</head> <body class="light-mode"> <div id="progress-container"> <div id="progress-bar"></div> </div> <header> <nav> <h1>个人博客</h1> <div class="nav-links"> <a href="#about">个人介绍</a> <a href="#skills">我的技能</a> <a href="#schedule">时间安排</a> <a href="#contact">联系方式</a> <button id="mode-switch">切换到黑夜模式</button> </div> </nav> </header> <div class="container"> <section id="about"> <h1>自我介绍</h1> <p>05年社恐男大，土生土长河北人，不善言辞，没什么才艺，每天去整点零食是生活的动力，喜欢看动漫小说漫画，写过小说</p> </section> <section id="skills"> <h2>技能储备</h2> <div class="skills-grid"> <div class="skill-card"> <h3>烹饪大师</h3> <p>擅长各类家常菜制作</p> </div> <div class="skill-card"> <h3>前端开发</h3> <p>掌握HTML/CSS基础</p> </div> <div class="skill-card"> <h3>Java编程</h3> <p>基础语法与算法实现</p> </div> </div> </section> <section id="schedule"> <h2>日常节奏</h2> <div class="schedule"> <div class="time-slot"> <span class="time">7:00</span> <span>起床</span> </div> <div class="time-slot"> <span class="time">8:00</span> <span>上课</span> </div> <div class="time-slot"> <span class="time">12:00</span> <span>吃饭</span> </div> <div class="time-slot"> <span class="time">2:00</span> <span>上课</span> </div> <div class="time-slot"> <span class="time">17:25</span> <span>吃饭</span> </div> <div class="time-slot"> <span class="time">22:00</span> <span>上床睡觉</span> </div> </div> </section> <section id="contact"> <h2>联系通道</h2> <form class="contact - form" onsubmit="return validateForm()"> <input type="text" placeholder="姓名" required> <span class="error" id="name - error"></span> <input type="email" placeholder="邮箱" required> <span class="error" id="email - error"></span> <textarea rows="4" placeholder="想说的话..." required></textarea> <span class="error" id="message - error"></span> <button type="submit">发送消息</button> </form> </section> </div> <script src="javascript.js"></script> </body>
posted @ 2025-03-18 23:03  一只虎鲸  阅读(16)  评论(0)    收藏  举报