Python前端-2-css练习

梁正雄2026-03-13 23:19

CSS练习题

  1. 编写 CSS 选择器并实现样式，要求：
    • 选中所有 class="btn" 且 type="submit" 的按钮元素；
    • 给该按钮设置蓝色背景（#007bff）、白色文字、10px 上下内边距、20px 左右内边距、无边框。
  2. 编写 CSS 选择器并实现样式，要求：
    • 选中 id="nav" 下所有直接子元素 li；
    • 给这些 li 设置横向排列（inline-block）、8px 上下内边距、12px 左右内边距、鼠标悬浮时背景色为 #f5f5f5。
  3. 编写 CSS 选择器并实现样式，要求：
    • 选中所有 href 以 https 开头且 target="_blank" 的 <a> 标签；
    • 给这些链接设置绿色文字、加粗、右侧添加小图标（可简化为右内边距 15px 模拟）。
  4. 编写 CSS 选择器并实现样式，要求：
    • 选中 h2 后面所有同级的 <p> 标签；
    • 给这些 p 标签设置斜体、灰色文字（#999）、首行缩进 1em。
  5. 编写 CSS 选择器并实现样式，要求：
    • 仅选中 class="highlight" 的 <p> 标签（其他标签加该类名不生效）；
    • 给该标签设置浅黄背景（#fff3cd）、左侧 3px 黄色边框（#ffc107）、左侧内边距 10px。
  6. 编写 CSS 代码实现一个水平居中的盒子，要求：
    • 盒子宽度 400px、高度 200px、浅灰色背景（#f5f5f5）、1px 灰色边框（#ccc）；
    • 盒子在页面中水平居中，上下外边距 30px。
  7. 利用 border 实现一个向下的红色小三角，要求：
    • 三角大小由 10px 边框宽度决定；
    • 仅显示向下的红色三角，其余方向边框为透明。
  8. 编写 CSS 代码实现一个自适应高度的按钮，要求：
    • 无固定高度，上下内边距 10px、左右 20px；
    • 蓝色背景（#007bff）、白色文字、无边框、鼠标悬浮显示小手光标；
    • 文字垂直居中（无需额外设置高度）。
  9. 编写 CSS 代码解决父子元素 margin 塌陷问题，要求：
    • 父元素宽度 300px、浅灰色背景，子元素宽度 100px、高度 100px、蓝色背景；
    • 子元素设置 20px 顶部外边距，且该外边距仅作用于父元素内部（不穿透父元素）。
  10. 编写 CSS 代码实现一个响应式盒子，要求：
    • 盒子宽度为父元素的 80%，最大宽度 600px、最小宽度 300px；
    • 最大高度 500px，超出部分显示滚动条；
    • 内边距 20px、1px 实线边框（#ccc）。
  11. 编写 CSS 代码设置网页正文 <p> 标签样式，要求：
    • 字体大小 16px、行高 1.8（提升可读性）；
    • 首行缩进 2em、文字颜色 #666；
    • 字母间距 0.5px。
  12. 编写 CSS 代码实现一个处理长文本的盒子，要求：
    • 盒子宽度 200px、1px 灰色边框；
    • 内部长英文单词自动换行（避免溢出）；
    • 保留源码中的空格和换行，同时超出盒子宽度时自动换行。
  13. 编写 CSS 代码实现单行文本溢出显示省略号，要求：
    • 盒子宽度 200px、1px 灰色边框；
    • 文本不换行，溢出部分隐藏并显示省略号；
    • 文字大小 14px、左右内边距 5px。
  14. 使用 font 复合属性编写 CSS 代码，要求：
    • 设置元素字体为加粗、斜体、小型大写字母、18px、微软雅黑；
    • 文字颜色为深蓝色（#336699），行高 2em。
  15. 编写 CSS 代码实现文字居中效果，要求：
    • 盒子宽度 300px、高度 100px、1px 灰色边框；
    • 文字在盒子内水平 + 垂直居中；
    • 文字大小 16px、加粗、黑色文字（#333）。
  16. 编写 CSS 代码重置浏览器默认样式，要求：
    • 清除所有元素的默认外边距和内边距；
    • 全局设置 box-sizing: border-box（让 padding/border 包含在宽高内）；
    • 所有 <a> 标签默认无下划线，鼠标悬浮时显示下划线。
  17. 编写 CSS 代码实现一个表单输入框样式，要求：
    • 仅选中禁用的 type="text" 输入框；
    • 输入框宽度 300px、内边距 8px、浅灰色背景（#f0f0f0）；
    • 边框为 1px 红色（#dc3545）、鼠标光标为禁用样式。
  18. 编写 CSS 代码实现一个列表样式，要求：
    • 选中 class="list" 的元素下所有 <li> 标签；
    • 列表项底部添加 1px 虚线边框（#eee）、上下内边距 10px；
    • 鼠标悬浮在列表项上时，背景色变为 #f8f9fa、文字颜色变为 #007bff。
  19. 编写 CSS 代码实现一个标题样式，要求：
    • 使用群组选择器选中 h1、h2、.title 三个选择器的元素；
    • 统一设置字体不加粗、深灰色文字（#333）、底部外边距 10px；
    • 居中对齐、文字装饰为上划线（overline）。
  20. 编写 CSS 代码实现一个链接样式，要求：
    • 选中所有 href 包含 "pdf" 的 <a> 标签；
    • 链接文字为橙色（#e76f51）、加粗、左侧内边距 20px（模拟图标位置）；
    • 点击链接后（visited）文字变为深橙色（#c85000）。

CSS练习答案

  1. 练习1

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>习1</title>
    <style>
        .btn[type=submit] {
            background-color: #007bff;
            color: #ffffff;
            padding: 10px 20px;
            border: none;
        }
    </style>
</head>
<body>
    <button class="btn" type="submit">提交</button>
</body>
</html>

  2. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习2</title>
    <style>
        #nav > li {
            display: inline-block;
            padding: 8px 12px;
            cursor: pointer;
            height: 20px;
            width: 100px;
            text-align: center;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <ul id="nav">
        <li>ul下的li-1</li>
        <li>ul下的li-2</li>
    </ul>
</body>
</html>

  3. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习3</title>
    <style>
        a[href^="https"][target="_blank"] {
            color: rgb(243, 219, 191);
            font-weight: bold;
            font-size: 19px;
            padding-right: 15px;
            border: 1px solid rgb(243, 219, 191);
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

  4. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习4</title>
    <style>
        h3~p {
            font-style: italic;
            font-variant: 1em;
            color: #999;
            text-indent: 1em;
        }
    </style>
</head>
<body>
    <h3>同级p</h3>
    <p>h3下的第一个</p>
    <p>h3下的第二个</p>
    <p>h3下的第三个</p>
    <p>h3下的第四个</p>
</body>
</html>

  5. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习5</title>
    <style>
        .container{
            width: 500px;
            height: 500px;
            background: #ecd9d921;
            border: 1px solid #000000;
        }
        p[class=highlight] {
            height: 100px;
            width: 100px;
            background-color: #fff3cd;
            border-left: #ffc107;
            padding-left: 10px;
            border: 1px solid #fff3cd;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="highlight">行p1</p>
        <p class="h2">行p2</p>
        <p class="highlight">行p3</p>
    </div>
</body> 
</html>

  6. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习6</title>
    <style>
        .box {
            width: 400px;
            height: 200px;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            margin: 30px auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

  7. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习7</title>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border-width: 30px;
            border-style: solid;
            border-color: red transparent transparent  transparent;
            margin: 30px 30px;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

  8. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            padding: 10px 20px;
            background-color: #007bff;
            color: #ffffff;
            border-style: none;
            cursor: pointer;
            text-align: center;
        }
    </style>
</head>
<body>
    <button type="submit"">提交</button>
</body>
</html>

  9. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[class=f1] {
            /* height: 100px; */
            width: 300px;
            background-color: aquamarine;
            overflow: hidden;
            /* padding-top: 1px; */
        }
        div[class=f2] {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="f1">
        <div class="f2"></div>
    </div>
</body>
</html>

  10. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            height: 500px;
            width: 800px;
            border: 1px solid #ccc;
        }
        .box2 {
            width: 80%;
            max-width: 600px;
            min-height: 300px;
            padding: 20px;
            overflow: auto;
            border: 1px solid #ccc;

        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

  11. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-size: 16px;
            line-height: 1.8;
            text-indent: 2em;
            color: #666;
            word-spacing: 0.5px;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <p>第二行,第二行,第二行,第二行</p>
</body>
</html>

  12. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .longbox {
            height: 100px;
            width: 200px;
            border: 1px solid gray;
            overflow-wrap: break-word;
        }
    </style>
</head>
<body>
    <div class="longbox">12312313123asdlkfjalsflasjfljasldfjlasjdflajsdlfjasldfjlajsdfljasdlfjlasjflajsdfljlasjfdl</div>
</body>
</html>

  13. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            border: 1px solid gray;
            /* word-break:break-all; */
            font-size: 14px;
            padding: 0 5px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>adflkksjdfljasldfjalsjdflajsdfljasldkfj</div>
</body>
</html>

  14. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            font: bold italic small-caps 18px "微软雅黑";
            color: #336699;
            line-height: 2em;
        }
    </style>
</head>
<body>
    <div>aksdjhfjasdfkjsj 你好啊 dkfsdaksdjhfjasdfkjsjdkfsdfasdfasdaksdjhfjasdfkjsjdkfsdfasdfasdfasdfasd</div>
</body>
</html>

  15. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            height: 100px;
            width: 300px;
            border: 1px solid gray;
            padding: 10px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="box1">sdfjalksdjflaksdlfjlkjsdf</div>
</body>
</html>

  16. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {margin: 0; padding: 0; box-sizing: border-box;}
        a {text-decoration: none;}
        a:hover{ text-decoration:underline}
    </style>
</head>
<body>
    <h3>test</h3>
    <a href="www.baidu.com">百度</a>
    <a href="www.baidu.com">百度1</a>
    <a href="www.baidu.com">百度2</a>
    <a href="www.baidu.com">百度3</a>
</body>
</html>

  17. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[type=text]:disabled {
            width: 300px;
            padding: 8px;
            background: #f0f0f0;
            border: 1px solid #df3545;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <input type="text" disabled placeholder="禁用的框"> 
</body>
</html>

  18. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list li {
            border-bottom: 1px dashed #eee;
            padding: 10px 0;
        }
        .list li:hover {
            background-color: #f8f9fa;
            color: #007bff;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
    </ul>
</body>
</html>

  19. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 , h2 , .title {
            font-weight: normal;
            color: #ff8181;
            margin-bottom: 10px;
            text-align: center;
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3 class="title">标题3</h3>
</body>
</html>

  20. 练习

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a[href*="pdf"] {
            color: #e76f51;
            font-weight: bolder;
            padding-left: 20px;
            cursor: pointer;
            text-decoration: none;
        }
        a:hover{ color: #c85000;}
    </style>
</head>
<body>
    <a href="http://pdf.com">pdf</a>
    <a href="http://www.baidu.com/xx.pdf">xx.pdf</a>
</body>
</html>

flex练习

  • 示例 一：水平垂直居中

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box {
            width: 100px;
            height: 100px;
            background: #42b983;
            color: white;
            text-align: center;
            line-height: 100px;

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">居中盒子</div>
    </div>
</body>
</html>

    核心逻辑 ：justify-content 控制主轴（水平）对齐，align-items 控制交叉轴（垂直）对齐，两行代码实现完美居中。

  • 示例 二：自适应布局（左侧固定，右侧自适应）

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Flex 自适应布局</title>
    <style>
        .layout {
            display: flex;
            width: 100%;
            height: 400px;
        }
        .left {
            width: 200px; /* 左侧固定宽度 */
            background: #f0f0f0;
            padding: 10px;
        }
        .right {
            flex: 1; /* 右侧占满剩余空间 */
            background: #e0e0e0;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="layout">
        <div class="left">侧边栏（固定200px）</div>
        <div class="right">主内容区（自适应剩余宽度）</div>
    </div>
</body>
</html>

  • 示例 3：流式布局（自动换行）

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Flex 流式布局（自动换行）</title>
    <style>
        .card-container {
            display: flex;
            width: 600px;
            border: 1px solid #ccc;
            padding: 10px;
            /* 核心：超出换行 */
            flex-wrap: wrap;
            /* 换行后对齐 */
            align-content: flex-start;
            gap: 10px; /* 间距（替代 margin） */
        }
        .card {
            width: 180px;
            height: 100px;
            background: #9966cc;
            color: white;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="card-container">
        <div class="card">卡片1</div>
        <div class="card">卡片2</div>
        <div class="card">卡片3</div>
        <div class="card">卡片4</div>
        <div class="card">卡片5</div>
    </div>
</body>
</html>

Grid 网格布局示例

  • 示例 1：均等网格（九宫格）

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Grid 九宫格</title>
    <style>
        .grid-9 {
            display: grid;
            width: 300px;
            /* 3列，每列均分 */
            grid-template-columns: repeat(3, 1fr);
            /* 3行，每行均分 */
            grid-template-rows: repeat(3, 100px);
            gap: 5px; /* 单元格间距 */
        }
        .grid-item {
            background: #42b983;
            color: white;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="grid-9">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>
</html>

  • 示例 2：复杂布局（图文混排）

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Grid 复杂图文布局</title>
    <style>
        .complex-grid {
            display: grid;
            width: 800px;
            height: 400px;
            /* 4列：150px + 2fr + 1fr + 150px */
            grid-template-columns: 150px 2fr 1fr 150px;
            /* 3行：100px + 2fr + 80px */
            grid-template-rows: 100px 2fr 80px;
            gap: 10px;
        }
        .item1 {
            grid-column: 1 / 3; /* 跨1-3列 */
            grid-row: 1 / 2;    /* 跨1-2行 */
            background: #f08080;
        }
        .item2 {
            grid-column: 3 / 5; /* 跨3-5列 */
            grid-row: 1 / 3;    /* 跨1-3行 */
            background: #87ceeb;
        }
        .item3 {
            grid-column: 1 / 3; /* 跨1-3列 */
            grid-row: 2 / 4;    /* 跨2-4行 */
            background: #f0e68c;
        }
        .item4 {
            grid-column: 3 / 5; /* 跨3-5列 */
            grid-row: 3 / 4;    /* 跨3-4行 */
            background: #98fb98;
        }
    </style>
</head>
<body>
    <div class="complex-grid">
        <div class="item1">标题区</div>
        <div class="item2">侧边图片</div>
        <div class="item3">正文内容</div>
        <div class="item4">底部操作</div>
    </div>
</body>
</html>

  • 示例 3：响应式网格（适配不同屏幕）

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Grid 响应式网格</title>
    <style>
        .responsive-grid {
            display: grid;
            width: 100%;
            gap: 10px;
            /* 核心：自动填充，最小200px，最大1fr */
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        }
        .grid-card {
            height: 150px;
            background: #9966cc;
            color: white;
            text-align: center;
            line-height: 150px;
        }
    </style>
</head>
<body>
    <div class="responsive-grid">
        <div class="grid-card">卡片1</div>
        <div class="grid-card">卡片2</div>
        <div class="grid-card">卡片3</div>
        <div class="grid-card">卡片4</div>
        <div class="grid-card">卡片5</div>
    </div>
</body>
</html>
相关推荐
清汤饺子1 小时前
用 Cursor 半年了，效率还是没提升？是因为你没用对这 7 个功能
前端·后端·cursor
蓝莓味的口香糖2 小时前
【vue3】组件的批量全局注册
前端·javascript·vue.js
wefly20172 小时前
开发者效率神器！jsontop.cn一站式工具集，覆盖开发全流程高频需求
前端·后端·python·django·flask·前端开发工具·后端开发工具
6+h2 小时前
【java】基本数据类型与包装类：拆箱装箱机制
java·开发语言·python
独泪了无痕2 小时前
自动导入 AutoImport：告别手动引入依赖，优化Vue3开发体验
前端·vue.js·typescript
GDAL2 小时前
MANIFEST.in简介
linux·服务器·前端·python
XPoet3 小时前
AI 编程工程化：Command——给你的 AI 员工编一套操作手册
前端·后端·ai编程
MoRanzhi12033 小时前
pillow 图像合成、透明叠加与蒙版处理
python·计算机视觉·pillow·图片处理·图像合成·透明叠加·多图层叠加
双叶8363 小时前
（Python）Python爬虫入门教程：从零开始学习网页抓取（爬虫教学）（Python教学）
后端·爬虫·python·学习
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南05OpenClaw 飞书机器人不回复消息？3 小时踩坑总结06OpenClaw macOS 完整安装与本地模型配置教程（实战版）07得物前端部门，没了08Window 10部署openclaw报错node.exe : npm error code 12809OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录10OpenClaw 接入 QQ Bot 完整实践指南