小学期前端三件套学习（更新中）

标签	用途
	页眉
	导航栏
	文档独立区块
	独立文章内容
	页脚

元素内的

子元素（仅限直接子级，不包含孙子级或更深层级）

邻接兄弟选择器

邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随

元素之后的元素

示例
![[Pasted image 20250624172112.png]]

<style>
    body {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    h1 + p {
        font-weight: bold;
        background-color: #333;
        color: #fff;
        padding: 0.5em;
    }
style>
<article>
  <h1>你的格言是什么？h1>
  <p>人生本是旷野，而不是轨道。p>
  <div>你的梦想是什么？div>
  <p>找到梦想并努力实现它。p>
article>

通用兄弟选择器

p ~ img

将上面的选择稍作修改 ==>
![[Pasted image 20250624172746.png]]

3.6 后代选择器


article  p {
}


`article p`	所有内的	所有后代（子级、孙子级等）
`article > p`	仅的直接子级	仅直接子级

选择器进阶

字符串匹配选择器

`[attr^=value]`	`li[class^="box-"]`	开头有 value
`[attr$=value]`	`li[class$="-box"]`	结尾有 value
`[attr*=value]`	`li[class*="box"]`	有 value 就行
例子

DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>selectortitle>
    <style>
        p[class*="love"] {
            color: red;
            font-weight: bold;
            font-size: larger;
        }
        p[id$="hell"] {
	        color: green;
        }
    style>
head>
<body>
    <p class="I-love-you">I-love-youp>
    <p class="you-love-me">You-love-mep>
    <p id="fuck the hell">fuck the hell p>
body>
html>

伪类

伪类是选择器的一种，它用于选择处于特定状态的元素
伪类就是开头为冒号的关键字。例如，:hover 就是一个伪类。

示例

<style>

    article p:first-child {

        font-size: larger;

        font-weight: 500;
    }
style>
<article>
    <p>
        你已经是个成熟的大人了，知道你需要学会什么吗？
    p>
    <p>
        学会沉默。
    p>
article>

这样就可以对第一个 p 的内容进行美化

### 用户行为伪类

动态伪类，表现得就像是一个类在用户和元素交互的时候加到了元素上一样

:hover——上面提到过，只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。
:focus——只会在用户使用键盘控制，选定元素的时候激活。

a:link,
a:visited {
  color: rebeccapurple;
  font-weight: bold;
}

a:hover {
  color: hotpink;
}

"">悬停在我上方

伪元素

伪元素以类似方式表现。不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。
伪元素开头为双冒号 ::。比如，::before 就是一个伪元素的示例

article p::first-line {
  font-size: 120%;
  font-weight: bold;
  color: brown;
}

![[Pasted image 20250624151956.png]]

4. 常用样式属性实例

4.1 文本样式

.title {
  color: #333;                    /* 文字颜色 - 深灰色 */
  font-size: 24px;                /* 字号 - 24像素 */
  font-weight: 700;               /* 加粗 - 700相当于bold */
  font-family: 'Helvetica Neue', Arial, sans-serif; /* 字体栈 */
  text-align: center;             /* 水平居中 */
  text-decoration: underline wavy #ff5722; /* 波浪下划线，橙色 */
  text-transform: uppercase;      /* 文本大写 */
  letter-spacing: 1px;            /* 字母间距 */
  line-height: 1.6;               /* 行高1.6倍 */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 文字阴影 */
  word-spacing: 2px;              /* 单词间距 */
}

4.2 盒模型实例

.box {
  /* 尺寸 */
  width: 200px;                  /* 内容宽度 */
  height: 100px;                /* 内容高度 */
  min-width: 150px;              /* 最小宽度 */
  max-width: 90vw;              /* 最大宽度为视窗90% */
  
  /* 盒模型 */
  box-sizing: border-box;       /* 更合理的盒模型计算方式 */
  padding: 20px;                /* 内边距 */
  border: 2px solid #f44336;   /* 边框 */
  margin: 10px auto;           /* 外边距 + 水平居中 */
  
  /* 背景 */
  background-color: #f5f5f5;    /* 背景色 */
  background-image: linear-gradient(to bottom, #fff, #eee); /* 渐变背景 */
  
  /* 视觉效果 */
  border-radius: 8px;           /* 圆角 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1), 
              inset 0 1px 0 rgba(255,255,255,0.5); /* 外阴影+内阴影 */
  opacity: 0.95;               /* 透明度 */
  
  /* 变换 */
  transform: rotate(0.5deg);   /* 轻微旋转 */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 平滑过渡 */
}

4.3 实际布局实例



"container">
  "card">
    卡片标题
    卡片内容...

4.4实际布局增强版



"container">
  "card">
    "card-header">
      高级卡片标题
    
    "card-body">
      这是一个增强版的卡片组件，包含渐变标题、悬浮效果和灵活的布局。
      
        响应式网格布局
        CSS变量控制间距
        平滑的悬停动画
      
    
    "card-footer">
      
    
  
  
  "card">
    "card-header" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
      第二张卡片
    
    "card-body">
      展示如何使用不同的渐变背景，同时保持卡片结构一致。

5. 实例练习：简单导航栏

DOCTYPE html>
<html>
<head>
  <style>
    /* 导航栏样式 */
    .navbar {
      background-color: #333;
      overflow: hidden;
    }
    
    /* 导航链接样式 */
    .navbar a {
      float: left;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    /* 鼠标悬停效果 */
    .navbar a:hover {
      background-color: #ddd;
      color: black;
    }
  style>
head>
<body>

<div class="navbar">
  <a href="#home">首页a>
  <a href="#news">新闻a>
  <a href="#contact">联系a>
  <a href="#about">关于a>
div>

body>
html>

阶段二作业1

![[Pasted image 20250624165057.png]]

AI 仿照效果 (v0 by vercel)
![[Pasted image 20250624165119.png]]

我的仿照效果

![[Pasted image 20250624165158.png]]

阶段二作业2

![[Pasted image 20250624173519.png]]
源码示例

home2.html

DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>踏青title>

    <link rel="stylesheet" href="home2.css">

head>

<body>

    <div class="container">

        <header class="header">

            <h1 class="main-title">放飞身心，踏青徒步h1>

            <p class="subtitle">—————————第一届职工踏青徒步活动p>

        header>

        <span class="fenge"><hr>span>

        <section>

            <h2 class="second-title title-class">各位公司同仁：h2>

            <p class="content-text">春暖花开时节，春意盎然的自然风光，行政文化中心将在<mark>4月4日mark>举办第一届职工踏青徒步活动，让大家在忙碌的工作中放松身心，感受大自然的魅力，增进同事间的友谊，营造积极向上的工作氛围，希望大家踊跃参与。

            p>p>

        section>

  

        <div class="main-content">

            <div class="left-section">

                <div class="hero-image">

                    <img src="https://bpic.588ku.com/illus_water_img/20/11/06/c01d5b68799af6272cc142db94e380f2.jpg" alt="踏青图"/>

                div>

            div>

  

            <div class="right-section">

                <div class="info-section">

                    <h3 class="info-title title-class">1.活动安排h3>

                    <ul class="info-list content-class">

                        <li><mark>13:00mark>集合文明楼。li>

                        <li><mark>13:30mark>出发前往目的地徒步。li>

                        <li><mark>16:30mark>返回终点，自由活动。li>

                    ul>

                div>

                <div class="info-section">

                    <h3 class="info-title title-class">2.活动须知h3>

                    <ul class="info-list content-class">

                        <li>参加人员请提前做好防护工作，带好防护工具等必需品，全程注意安全。li>

                        <li>已报名的同事请人员及时到达，准时，秩序井然。li>

                        <li>请参加人员工作服，统一着装，展现良好形象，营造和谐氛围。li>

                    ul>

                div>

            div>

        div>

        <footer class="footer">

            <p>行政支部中心<br>2024年3月20日p>

        footer>

    div>

  

body>

html>

home2.css

  

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

  

        body {

            font-family: "Microsoft YaHei", "SimSun", sans-serif;

            background-color: #f5f5f5;

            padding: 20px;

            color: rgb(0, 109, 128);

        }

  

        .container {

            max-width: 900px;

            margin: 0 auto;

            background: white;

            border: 2px solid #333;

            padding: 30px;

        }

  

        .header {

            text-align: center;

            margin-bottom: 30px;

        }

  

        .main-title {

            font-size: 28px;

            color: rgb(0, 109, 128);

            font-weight: bold;

            margin-bottom: 10px;

            letter-spacing: 2px;

        }

  

        .subtitle {

            font-size: 14px;

            color: rgb(0, 109, 128);

            border-bottom: 1px solid #ddd;

            padding-bottom: 15px;

        }

  

        .section-title {

            font-size: 16px;

            color: rgb(0, 109, 128);

            font-weight: bold;

            margin: 25px 0 15px 0;

        }

  

        .content-text {

            line-height: 1.8;

            color: rgb(0, 109, 128);

            font-size: 14px;

            margin-bottom: 20px;

            text-align: justify;

        }

  

        .main-content {

            display: flex;

            gap: 40px;

            align-items: flex-start;

        }

  

        .left-section {

            flex: 1;

            margin-right: 10px;

        }

  

        .hero-image {

            width: 100%;

            height: 280px;

            background: linear-gradient(135deg, #87CEEB 0%, #98FB98 50%, #87CEEB 100%);

            border-radius: 8px;

            position: relative;

            overflow: hidden;

            display: flex;

            align-items: center;

            justify-content: center;

        }

  

        .hero-text {

            font-size: 48px;

            font-weight: bold;

            color: #2F4F4F;

            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

            letter-spacing: 3px;

        }

  

        .hero-image::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: url('data:image/svg+xml,') repeat-x;

            background-size: 200px 100px;

        }

  

        .right-section {

            flex: 1;

        }

  

        .info-section {

            margin-bottom: 25px;

        }

  

        .info-title {

            font-size: 16px;

            color: rgb(0, 109, 128);

            font-weight: bold;

            margin-bottom: 10px;

        }

  

        .info-list {

            list-style: none;

        }

  

        .info-list li {

            margin-bottom: 8px;

            padding-left: 15px;

            position: relative;

            font-size: 14px;

            line-height: 1.6;

            color: #333;

        }

  

        .info-list li::before {

            content: "●";

            color: rgb(0, 109, 128);

            position: absolute;

            left: 0;    

        }

  

        .footer {

            text-align: right;

            margin-top: 30px;

            font-size: 12px;

            color: rgb(0, 109, 128);

            font-weight: bold   ;

        }

  

        @media (max-width: 768px) {

            .main-content {

                flex-direction: column;

            }

            .container {

                padding: 20px;

            }

            .main-title {

                font-size: 24px;

            }

            .hero-text {

                font-size: 36px;

            }

        }

阶段二作业3

![[Pasted image 20250628110224.png]]
仿写效果
![[Pasted image 20250628110259.png]]
源码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: aliceblue;
            padding: 30px;
        }

        .form-container {
            max-width: 800px;
            background-color: white;
            margin: 0 auto;
            border: 1px solid gray;
            padding: 20px;
        }

        .form-title {
            font-size: 25px;
            font-weight: 500;
        }
        .form-subtitle {
            font-size: 15px;
        }

        .form-group{
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .form-label {
            width: 110px;
            margin-left: 30px;
            margin-right: 5px;
            text-align: right;
        }
        
        .mark1 {
            color: rgb(204, 27, 27);
        }
        
        .form-input {
            flex: 1;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 8px;
            flex:none;
        }
        .form-input1 {
            width: 100px;
            flex: 1;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 8px;
        }


        .yixiang-input {
            width: 240px;
            height: 30px;
        }

        .content {
            margin-top:30px;
        }

        .submit {
            margin-top: 20px;
            margin-left: 150px;
        }

        .larger-input {
            width: 500px;
            height: 200px;  /* 设置高度 */
            padding-top: 10px;  /* 调整内边距使文字垂直居中 */
            padding-bottom: 10px;
            resize: vertical;  /* 允许垂直调整大小 */
        }

        .input-with-ico {  
            position: relative;
            width: 300px;
}

        .input-with-ico input {
            width: 100%;
            padding-left: 35px; /* 留出图标空间 */
            background-repeat: no-repeat;
            background-position: 10px center;
            background-size: 16px 16px; /* 控制图标大小 */
}
    style>
head>
<body>
    <div class="form-container">
        <div class="form-title">
            下面就开始在线报名吧<span class="form-subtitle">（含下面填写基本信息的都是报名的重要依据，请认真填写）span>
        div>

        <div class="content">
            <div class="form-group">
                <div class="form-label">姓名<span class="mark1">*span>div>
                <div class="input-with-ico">
                    <span class="ico">span>
                    <input type="text" class="form-input1" placeholder="报名的重要依据，请认真填写" style="background-image: url('3.png')";>
                div>
            div>

            <div class="form-group">
                <div class="form-label">手机号码<span class="mark1">*span>div>
                <div class="input-with-ico">
                    <span class="ico">span>
                    <input type="text" class="form-input1" placeholder="请输入联系电话" style="background-image: url('4.png')">
                div>
            div>

            <div class="form-group">
                <div class="form-label">性别<span class="mark1">*span>div>
                <div>
                    <span class="ico">span>
                    <input type="radio" class="form-input" name="gender" value="male">男
                    <input type="radio" class="form-input" name="gender" value="female">女
                div>
            div>

            <div class="form-group">
                <div class="form-label">邮箱<span class="mark1">*span>div>
                <div class="input-with-ico">
                    <span class="ico">span>
                    <input type="text" class="form-input" placeholder="请输入联系邮箱"style="background-image: url('5.png')">
                div>
            div>

            <div class="form-group">
                    <div class="form-label">意向课程<span class="mark1">*span>div>
                    <div>
                        <span class="ico">span>
                        <select name="courses" class="yixiang-input">
                            <option value="平面设计">平面设计option>
                            <option value="web渗透">web渗透option>
                        select>
                    div>
                div>
            div>

            <div class="form-group">
                <div class="form-label">了解传智渠道<span class="mark1">*span>div>
                <div>
                    <span class="ico">span>
                    <input type="checkbox" class="form-input" >百度
                    <input type="checkbox" class="form-input" >论坛
                    <input type="checkbox" class="form-input" >朋友推荐
                    <input type="checkbox" class="form-input" >csdn网站
                    <input type="checkbox" class="form-input" >视频教程
                    <input type="checkbox" class="form-input" >其他
                div>
            div>

            <div class="form-group">
                    <div class="form-label">留言<span class="mark1">*span>div>
                    <div>
                        <span class="ico">span>
                        <div class="liuyan">
                            <textarea class="larger-input" placeholder="请描述你有没有设计基础，以及为什么选择学习网页平面设计" rows="5">textarea>
                        div>
                    div>
            div>

            <div class="form-group submit">
                <input type="submit" value="提交">
            div>
        div>
    div>
body>
html>

盒子模型

盒模型的基本架构
![[Pasted image 20250627134950.png]]
所有HTML元素都可视为矩形盒子，由四部分组成：

组成部分	说明	可设置属性
Content	内容区域（文本/图像）	`width`, `height`
Padding	内边距（内容与边框的间隔）	`padding`-top/right/bottom/left
Border	边框（围绕内容和内边距）	`border-width/style/color`
Margin	外边距（盒子与其他元素的间隔）	`margin`-top/right/bottom/left

标准盒子

标准盒子模型是CSS的默认盒模型，其核心特点是：元素的width和height仅表示内容区域（content）的尺寸，实际占位空间需要额外计算内边距（padding）和边框（border）。

示例
![[Pasted image 20250627141854.png]]

DOCTYPE html>

<html lang="en">


<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Box1title>
    

    <style>
        /* 通用选择器：重置所有元素的默认边距和内边距 */
        * {
            margin: 0;   /* 清除默认外边距 */
            padding: 0;  /* 清除默认内边距 */
        }
        
        /* 页面主体样式 */
        body {
            font-family: 'Courier New', Courier, monospace; /* 使用等宽字体 */
            padding: 20px;  /* 页面内边距 */
            background-color: antiquewhite;  /* 页面背景色 */
        }

        /* 主容器样式 */
        .container {
            width: 300px;  /* 固定宽度 */
            margin: 30px auto;  /* 上下边距30px，水平居中 */
            background-color: aquamarine;  /* 容器背景色 */
            box-shadow: 0 0 10px rgba(0,0,0,0.1);  /* 添加轻微阴影效果 */
            padding: 20px;  /* 容器内边距 */
            text-align: center;  /* 容器内文本水平居中 */
        }

        /* 标准盒子模型演示元素 */
        .standered-box {
            width: 200px;  /* 内容区域宽度 */
            height: 100px;  /* 内容区域高度 */
            padding: 20px;  /* 内边距（会在标准模型下增加元素总尺寸） */
            border: 1px solid #bac588;  /* 1像素实线边框 */
            margin: 30px auto;  /* 外边距30px，水平居中 */
            background-color: #f1c40f;  /* 背景色 */
            color: #4c1753;  /* 文字颜色 */
            text-align: center;  /* 文本水平居中 */
            line-height: 100px;  /* 行高等于容器高度，实现单行文本垂直居中 */
        }
    style>
head>

<body>
    
    <div class="container">
        
        <h2>
            标准盒子模型效果展示
        h2>
        
        <div class="standered-box">内容区域div>
        
    div>

body>
html>

替代盒子

与标准盒子模型不同，替代盒子模型（border-box）是更符合直觉的盒模型，也是现代开发中的首选方案。它的核心特点是：元素的width和height属性直接定义可视区域的总尺寸（包含内容、内边距和边框）。

![[Pasted image 20250627142401.png]]

DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>border-box盒模型演示title>

    <style>

        /* 全局启用border-box */

        * {

            box-sizing: border-box;  /* 关键声明 */

            margin: 0;

            padding: 0;

        }

  

        .demo-box {

            width: 500px;  /* 总宽度固定为200px */

            height: 500px; /* 总高度固定为100px */

            padding: 20px; /* 内边距会向内压缩内容区域 */

            border: 2px solid #4f7a96; /* 边框同样向内压缩 */

            margin: 30px auto;

            background-color: #f1c40f;

            /* 文字居中方案 */

            text-align: center;

            line-height: 400px; /* 动态计算行高 */

        }

    style>

head>

<body>

    <div class="demo-box">

        两者盒子模型区别就是实际尺寸的计算<br>

    div>

body>

html>

挑战和示例

![[Pasted image 20250627143030.png]]

  

<style>

    body {

        font : 1.2em / 1.5 sans-serif;

    }

  

    .box {

        border: 5px solid rebeccapurple;

        background-color: lightgray;

        padding: 40px;

        margin: 40px;

        width: 300px;

        height: 150px;

    }

style>

<div class="box">I use the standard box model.div>

<div class="box alternate">I use the alternate box model.div>

现在通过修改 alternate 属性的样式来改变盒子的大小
前者为默认盒子模型，大小为所有值的总和
现在在 alternate 中设置替代盒子模型，设置宽度为 400px

400px > 300px + 40 px + 40px

![[Pasted image 20250627143242.png]]

所以宽度明显增加

float 浮动

flex 布局

实例集

介绍文档

[参考网站][https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page]
![[Pasted image 20250624141215.png]]

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jane Doe - Web Developertitle>
    <style>
        body {
            font-family: 'Courier New', Courier, monospace;
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            background: #f9f9f9;
        }

        .content {
            max-width: 800px; /* 限制内容最大宽度 */
            width: 100%;
            padding: 40px 20px; /* 上下 40px，左右 20px */
            text-align: center; /* 文本居中 */
        }

        #name {
            color: rgb(255, 94, 0);
            font-size: 50px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .job-title {
            color: purple;
            font-size: 25px;
            border-bottom: 2px solid orange;
            display: inline-block; /* 让下划线宽度适应文字 */
            margin-bottom: 20px;
        }

        p {
            text-align: left; /* 段落左对齐 */
            line-height: 1.6;
            margin-bottom: 20px;
        }

        ul {
            text-align: left; /* 列表左对齐 */
            list-style-type: none;
            padding: 0;
        }

        li {
            margin-bottom: 10px;
        }

        a:link,
        a:visited {
            color: olive;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
            text-decoration-color: hotpink;
        }
    style>
head>
<body>
    <div class="content">
        <h1 id="name">Jane Doeh1>
        <div class="job-title">Web Developerdiv>
        <p>
            Far far away, behind the word mountains, far from the countries Vokalia and
            Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
            right at the coast of the Semantics, a large language ocean.
        p>
        <p>
            A small river named Duden flows by their place and supplies it with the
            necessary regelialia. It is a paradisematic country, in which roasted parts of
            sentences fly into your mouth.
        p>
        <h2>Contact informationh2>
        <ul>
            <li>Email: <a href="mailto:[email protected]">[email protected]a>li>
            <li>Web: <a href="http://example.com">http://example.coma>li>
            <li>Tel: 123 45678li>
        ul>
    div>
body>
html>

知识点

border-bottom 是 CSS 中用于设置元素底部边框的简写属性。它允许您一次性定义底部边框的多个特性

border-bottom: [width] [style] [color];

a:link, a:visited { color: olive; } 将这两种状态的链接文本颜色统一设置为 橄榄色（olive）

a:hover { text-decoration: underline hotpink; } 设置悬停时的下划线和颜色

1. display: flex; 的作用

将元素变为 Flex 容器，其直接子元素自动成为 Flex 项目（Flex Items）。
子元素的布局不再遵循默认的文档流，而是按 Flexbox 规则排列。
默认行为：
- 子元素水平排列（flex-direction: row）。
- 子元素高度拉伸至容器高度（align-items: stretch）。
- 子元素宽度由内容决定（不自动占满容器）。

2. justify-content: center; 的作用

控制子元素在 主轴（main axis） 上的对齐方式。
默认主轴为水平方向（flex-direction: row），因此 justify-content: center; 会让子元素 水平居中。
如果主轴方向改为垂直（flex-direction: column），则会让子元素 垂直居中。

margin & padding

margin 和 padding 是 CSS 中控制元素间距的核心属性
margin 元素外部， padding 元素内部

margin

margin: 值;                 /* 四个方向相同 */
margin: 上下 左右;          /* 上下相同，左右相同 */
margin: 上 右 下 左;        /* 顺时针方向（上→右→下→左） */

水平居中元素

.container {
    width: 80%;
    margin: 0 auto; /* 左右自动计算，实现水平居中 */
}

padding

padding: 值;               /* 四个方向相同 */
padding: 上下 左右;        /* 上下相同，左右相同 */
padding: 上 右 下 左;      /* 顺时针方向（上→右→下→左） */

调整视觉间距

.card {
    padding: 20px; /* 内容与卡片边框留白 */
    border: 1px solid #ddd;
}

==>

卡片

![[Pasted image 20250624144908.png]]

/* 全局样式重置 - 消除浏览器默认样式差异 */
* {
    margin: 0; /* 清除所有元素的外边距 */
    padding: 0; /* 清除所有元素的内边距 */
    box-sizing: border-box; /* 使用border-box盒模型计算方式 */
}

/* 页面主体样式 */
body {
    background: #f5f5f5; /* 设置页面背景色为浅灰色 */
    font-family: Arial, sans-serif; /* 设置默认字体 */
    min-height: 100vh; /* 确保body至少占满整个视口高度 */
    display: flex; /* 启用flex布局 */
    justify-content: center; /* 水平居中子元素 */
    align-items: center; /* 垂直居中子元素 */
    padding: 20px; /* 添加内边距防止内容贴边 */
}
	
/* 主容器样式 */
.container {
    width: 100%; /* 宽度100%适应父容器 */
    max-width: 800px; /* 限制最大宽度为800px */
    padding: 20px; /* 添加内边距 */
}

/* 卡片组件样式 */
.card {
    padding: 30px; /* 卡片内边距 */
    background: white; /* 卡片背景色为白色 */
    border-radius: 8px; /* 卡片圆角 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 卡片阴影效果 */
    text-align: center; /* 文本居中 */
    max-width: 500px; /* 限制卡片最大宽度 */
    margin: 0 auto; /* 水平居中 */
}

/* 卡片标题样式 */
.card-title h1 {
    font-size: 1.8rem; /* 标题字体大小 */
    color: #333; /* 标题文字颜色 */
    margin-bottom: 15px; /* 标题底部外边距 */
}

/* 卡片内容样式 */
.card-content {
    color: #666; /* 内容文字颜色 */
    font-size: 1.1rem; /* 内容字体大小 */
    line-height: 1.6; /* 行高设置 */
}

DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Cardstitle> 
    <link rel="stylesheet" href="1.css"> 
head>
<body>
    
    <div class="container">
        
        <div class="card">
            
            <div class="card-title">
                <h1>技能卡h1> 
            div>
            
            <div class="card-content">
                拥有100秒预知能力 
            div>
        div>
    div>
body>
html>

导航栏制作

水平居中导航栏

    <style>
        .menu {
            display: flex;
            justify-content: center;
            gap: 20px;
            padding: 100px 0;
        }
    style>
head>
<body>
    <nav class="menu">
        <a href="#">首页a>
        <a href="#">关于a>
        <a href="#">联系a>
    nav>

小学期前端三件套学习（更新中）

第一阶段

HTML 基础结构

常用内容标签

文本类标签

媒体类标签

下拉框

列表标签

超链接与锚点

表格

表单与表单控件

输入框

单选/多选

提交按钮

语义化标签

表单分组标签

和

表单验证属性

html5 新增输入类型

注意事项

第一阶段成果示例

蓝色星球综合示例

第二阶段

1. CSS 基本结构实例

实例解析：

2. 三种引入方式实例

2.1 内联样式（直接写在HTML标签内）

这个标题会居中显示为绿色

2.3 外部样式表（最推荐的方式）

3. 基础选择器实例

3.1 元素选择器

3.2 类选择器（最常用）

3.3 ID选择器

3.4 标签属性选择器

3.5 运算符

子代关系选择器