CSS——美化网站的魔法棒

CSS（层叠样式表）负责控制网页的外观和布局，它允许开发者设置字体大小、颜色、背景图片等属性，从而实现美观的设计效果。

基本样式

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}
h1 {
    color: blue;
}

在这段代码中,“body”选择器应用于整个文档的主体部分，而“h1”选择器则专门作用于所有的H1级标题，通过调整这些属性的值，我们可以轻松地改变页面的整体风格。

布局技巧

除了外观设计外,CSS还可以帮助我们实现复杂的页面布局：

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}
.row {
    display: flex;
    justify-content: space-between;
}
.column {
    width: 32%;
}

在这个例子中,“flexbox”是一种流行的布局技术，它可以简化多列或多行的排列方式。“display: flex;”指令将容器转换为一个弹性盒对象，使得其中的子元素能够像弹性一样自动伸缩以适应容器的宽度。

图片来源于网络，如有侵权联系删除

JavaScript——赋予网站活力的精灵

JavaScript是一门脚本语言,主要用于增强用户体验和行为交互，它可以在不刷新页面的情况下动态更新DOM树，从而实现实时响应的效果。

响应式设计

window.addEventListener('resize', function() {
    if (window.innerWidth <= 600) {
        document.body.style.backgroundColor = '#ff0000';
    } else {
        document.body.style.backgroundColor = '#00ff00';
    }
});

这段代码监听了窗口大小的变化事件（resize），当屏幕宽度小于或等于600像素时，它会将背景色设置为红色；否则，将其改为绿色，这样的设计使得网站在不同设备上都能保持良好的显示效果。

表单验证

function validateForm() {
    var name = document.forms["myForm"]["name"].value;
    if (name == "") {
        alert("姓名不能为空！");
        return false;
    }
    var email = document.forms["myForm"]["email"].value;
    if (!email.match(/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)) {
        alert("邮箱格式错误！");
        return false;
    }
    // 其他验证逻辑...
}

在这个函数中,我们对用户的输入进行了基本的检查，如果姓名字段为空或者电子邮件地址不符合标准格式，则会弹出相应的提示框并阻止表单提交。

服务器端编程——幕后英雄

除了前端技术外,后端开发同样至关重要，服务器端程序负责处理客户端请求、存储数据以及执行业务逻辑等功能。

数据库操作

import sqlite3
conn = sqlite3.connect('example.db')
cursor = conn.cursor()
# 创建表格
cursor.execute('''CREATE TABLE IF NOT EXISTS users (
                    id INTEGER PRIMARY KEY AUTOINCREMENT,
                    username TEXT NOT NULL UNIQUE,
                    password TEXT NOT NULL);''')
#