CSS层叠样式表练习

最新推荐文章于 2024-07-25 10:45:42 发布
最新推荐文章于 2024-07-25 10:45:42 发布
阅读量182 收藏
点赞数 2
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76207585/article/details/137172981
版权

1.

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>number_1</title>
    <style>
        .download {
            background-color: #e53e3e;
            border: none;
            color: white;
            padding: 10px 30px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 25px;
            border-radius: 10px;

        }

        .download:hover {
            background-color: #c53030;
        }

    </style>
</head>
<body>
<button class="download">
    <a href="#" target="_blank" class="download">立即下载</a>
</button>

</body>
</html>

效果：

2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_2</title>
    <style>
        body {
            background-color: #eee;
        }

        .struct {
            display: flex;
            padding: 50px;
            gap: 50px;
        }

        .card {
            width: 300px;
            text-align: left;
            background-color: #eee;
            border-radius: 5px;
        }

        .image {
            width: 300px;
        }

        .text {
            color: #7c7c7c;
            font-size: 14px;
        }
    </style>
</head>

<body>
<div class="struct">
    <div class="card">
        <img src="./img/1.jpg" alt="image" class="image">
        <h3>恰到好处的简单</h3>
        <p class="text">简单，在于外观，更在于体验。所以你一定会喜欢全新的Foxmail，它会给你简洁畅快的使用感受，而不需要过多的思考压力。恰到好处的简单，你一用便知。</p>
    </div>
    <div class="card">
        <img src="./img/1.jpg" alt="image" class="image">
        <h3>为性能重新打造</h3>
        <p class="text">我们视性能高于一切。你之所以选择 Foxmail，也一定是因为它够快，够稳定，值得信赖。现在全新的Foxmai 更是要挑战百万级的海量邮件存储，而且，它做到了。</p>
    </div>
    <div class="card">
        <img src="./img/1.jpg" alt="image" class="image">
        <h3>记事本功能</h3>
        <p class="text">使用Foxmail的记事本功能，你可以边工作边记录，轻松整理有用的信息。Foxmail会为你同步到网页、手机端的QQMail记事本，随时随地供你使用。</p>
    </div>
</div>

</body>
</html>

 效果：

3.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>number_3</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .menu {
            width: 1050px;
            height: 60px;
            background-color: #333333;
        }

        .menu li {
            width: 150px;
            height: 60px;
            float: left;
            font-size: 20px;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            background-color: #333333;
        }

        .menu  li  a {
            color: #cacaca;
            text-decoration: none;
        }

        .menu li:hover {
            background-color: black;
        }

        .menu ol li {
            background-color: #464646;
        }

        .menu li ol {
            display: none;
        }

        .menu > li:hover ol {
            display: block;
        }

        #title {
            font-size: 26px;
            color: aliceblue;
            font-family: 霞鹜文楷等宽;
            width: 300px;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li id="title">
            <b>百度游戏 | 乐玩</b>
        </li>
        <li>
            <a href="#">首页</a>
                <ol>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                    <li><a href="#">子菜单3</a></li>
                    <li><a href="#">子菜单4</a></li>
                </ol>
        </li>
        <li>
            <a href="#">商城</a>
            <ol>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
                <li><a href="#">子菜单4</a></li>
            </ol>
        </li>
        <li>
            <a href="#">页游</a>
            <ol>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
                <li><a href="#">子菜单4</a></li>
            </ol>
        </li>
        <li>
            <a href="#">排行榜</a>
            <ol>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
                <li><a href="#">子菜单4</a></li>
            </ol>
        </li>
        <li>
            <a href="#">繁星计划</a>
            <ol>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
                <li><a href="#">子菜单4</a></li>
            </ol>
        </li>
    </ul>
</body>
</html>

 <link rel="stylesheet" href="./css/reset.css">：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {
    padding: 0;
    margin: 0; 
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img, abbr {
    border: 0;
}
address, caption, cite, code, dfn, em, 
h1, h2, h3, h4, h5, h6, strong, th, var {
    font-weight: normal;
    font-style: normal;
}
ul, ol {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 1.0em;
}

a, ins {
    text-decoration: none;
}

效果:

 

4.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_4</title>
    <style>
        .struct {
            display: flex;
            background-color: #fff;
            padding: 50px;
        }

        .card {
            width: 400px;
            text-align: left;
            text-indent: 100px;
            background-color: #fff;
            flex-direction: column;

        }

        .divider {
            background-color: #ccc;
            width: 1px;
        }

        h2 {
            color: #333;
        }

        p {
            color: #555;
        }


        #link1 {
            padding-top: 130px;
        }

        #link2 {
            padding-top: 93px;
        }

        #link3 {
            padding-top: 19px;
        }

        .link a {
            border: 1px solid #8c61e1;
            text-decoration: none;
            padding: 10px 15px;
            color: #8c61e1;
            background-color: #ffffff;
            border-radius: 5px;
        }

        .mark {
            color: #8c61e1;
        }

    </style>
</head>
<body>

<div class="struct">
    <div class="card">
        <h2>Bootstrap v3</h2>
        <p><span class="mark"><b>✔</b></span> 支持IE8+浏览器</p>
        <p><span class="mark"><b>✖</b></span> 依赖jQuery</p>
        <div class="link" id="link1">
            <a href="#">Bootstrap v3 中文文档</a>
        </div>
    </div>
    <div class="divider"></div>
    <div class="card">
        <h2>Bootstrap v4</h2>
        <p><span class="mark"><b>✔</b></span> 支持IE10+浏览器</p>
        <p><span class="mark"><b>✔</b></span> 支持Flexbox布局</p>
        <p><span class="mark"><b>✔</b></span> 不依赖jQuery</p>
        <div class="link" id="link2">
            <a href="#">Bootstrap v4 中文文档</a>
        </div>
    </div>
    <div class="divider"></div>
    <div class="card">
        <h2>Bootstrap v5</h2>
        <p><span class="mark"><b>✔</b></span> 支持Flexbox布局</p>
        <p><span class="mark"><b>✔</b></span> 支持Grid布局</p>
        <p><span class="mark"><b>✔</b></span> 支持CSS自定义属性</p>
        <p><span class="mark"><b>✔</b></span> 不依赖jQuery</p>
        <p><span class="mark"><b>✖</b></span> 不支持IE浏览器</p>
        <div class="link" id="link3">
            <a href="#">Bootstrap v5 中文文档</a>
        </div>
    </div>
</div>

</body>
</html>

 效果：

5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_5</title>
    <style>
        .card {
            width: 300px;
            height: 400px;
            margin: 100px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px #b0b0b0;
        }

        img {
            width: 100%;
            display: block;
        }

        .text {
            padding: 20px;
            text-align: center;
        }

        .link {
            color: #007BFF;
            text-decoration: none;
            font-weight: bold;
        }

    </style>
</head>
<body>
<div class="card">
    <div>
        <img src="./img/2.jpg" alt="img">
    </div>
    <div class="text">
        <p><a href="#" class="link">React</a></p>
        <p>React 起源于 Facebook 的内部项目,是一个用于构建用户界面的 JavaScript库。</p>
    </div>
</div>
</body>
</html>

效果：

6.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_6</title>
    <style>
        .page {
            display: flex;
            list-style-type: none;
        }

        .page li {
            border: 1px solid #ddd;
            text-align: center;
        }

        .page a {
            text-decoration: none;
            color: black;
            display: block;
            padding: 8px 16px;
        }

        a:hover {
            background-color: #007bff;
            color: white;
            border: 1px solid #007bff;
        }

        a:active {
            background-color: #007bff;
            color: #6b6b6b;
            border: 1px solid #007bff;
        }

    </style>
</head>
<body>

<ul class="page">
    <li><a href="#">&lt;&lt;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&gt;&gt;</a></li>
</ul>

</body>
</html>

效果：

_Sethos
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css层叠样式表速成详尽版（中文版）
05-24
《CSS层叠样式表速成详尽版》是专为初学者和有一定基础的学习者设计的一份中文资源，旨在帮助读者快速掌握CSS的核心概念、语法和应用技巧。在这个压缩包中，包含的主要文件名为“CSS_handbook_v1.10.exe”，这可能是...
css 层叠样式表实例
10-16
CSS（层叠样式表）是网页设计中不可或缺的一部分，它用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。通过CSS，我们可以控制元素的颜色、字体、布局、动画等视觉效果，使得网页更加美观和交互性强...
CSS——关于继承性和层叠性的练习
mintsolace的博客
09-14 611
1. <style type="text/css"> #haha .heiheihei p{ color:red; } div div #xixi p{ color:blue; } div.hahaha div.heiheihei div.xixixi p{
CSS层叠样式表
surx123456的博客
01-25 1897
目标：CSS，CSS基础选择器，设置字体样式，文本样式，CSS三种引入方式，使用Chorme调试工具调试样式CSS是层叠样式表（Cascading Style Sheets）简称,有时会称为CSS样式表或级联样式表，CSS也是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS规则由两个主要的部分构成：选择器以及一条或多条声明。格式例如p{
4.CSS层叠样式表一
sss_white的博客
08-14 793
CSS层叠样式表 目标 能够说出什么是CSS 能够使用CSS基础选择器 能够设置字体样式 能够设置文本样式 能够说出CSS的三种引入方式 能够使用Chrome调试工具调试样式 1、CSS简介 CSS：美化网页，布局页面 1.HTML的局限性 HTML主要做结构，显示网页元素内容 2.CSS-网页的美化 层叠样式表（Cascading Style Sheets）简称CSS，有时称CSS样式表、级联样式表 CSS是一种标记语言 CSS用于设置HTML页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高
css层叠样式表
是草莓味的啊
02-18 1761
一.简介 css层叠样式表在主页制作时可有效地对页面的布局、字体、颜色、背景和其它效果实现精确的控制。 二.注释 /**/ 三.css属性 背景，字体，文本，列表 四.css样式引入的方法 1.行内引入(不利于重用和扩展,是html和css的混排编写,不利于页面维护) <h1 style="color: red; font-size: 20px;font-family: '楷体';...
CSS层叠样式表一
qq_58782226的博客
01-15 318
1、CSS简介 1.1 CSS网页美容师 SCC是层叠样式表(Cascading)的简称，有时我们也会称之为CSS样式表或级联样式表 SCC也是一种标记语言。主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式。 ​ 1.2 CSS语法规范 CSS规则由两个主要的部分构成：选择器和一条或多条声明 h1 { color: red;} 选择器 {属性： 值；} 选择器是用于指定CSS央视的HTML标签，花括号内是对该对象的具体样式 属性和属性值以“键值对的形式出现" 属性是对指定的
CSS(层叠样式表)
2301_79978723的博客
11-25 66
用相对路径来找到文件。
【web前端初级课程】第二章 CSS层叠样式表
祺祺祺有此理的博客
03-14 412
【wed初级课程】第二章 CSS层叠样式表
引入css(层叠样式表)文件的三种方法
SSS4362的博客
06-23 539
引入css(层叠样式表)文件的三种方法
Day02CSS层叠样式表
Syntactic_tang的博客
12-29 1361
CSS层叠样式表 回顾 1、HTML概述 Hyper Text Markup Language 超文本标记语言 作用:创建网页文档，包含文字、图片、链接、音频、视频等。 2、HTML的常用基本标签 结构标签: html head title meta body 排版标签: <br/> <p></p> <hr/> 注释<!--...
5日精通css层叠样式表
04-07
《5日精通CSS层叠样式表》是一门深入学习CSS技术的课程，旨在帮助学习者在短时间内掌握CSS的核心概念和实际应用。CSS（Cascading Style Sheets）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的...
5日精通CSS层叠样式表
11-12
《5日精通CSS层叠样式表》是一门深入学习CSS技术的课程，旨在帮助学习者在短时间内快速掌握CSS的核心概念和应用技巧。CSS（Cascading Style Sheets）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式...
精通CSS层叠样式表
12-19
总的来说，"5日精通CSS层叠样式表"教程将引导你从基础到进阶，全面掌握CSS的各个方面，通过实际案例和练习，加深对CSS的理解，并能够灵活运用到实际项目中。无论你是准备从事前端开发，还是提升现有技能，这都是一个...
flex：1
最新发布
m0_47999208的博客
07-25 285
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 378
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
CSS相关记录
oThrowsException的博客
07-24 746
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
HOW - CSS 定义颜色值
weixin_58540586的博客
07-22 1246
使用 CSS 提供的预定义颜色名。示例：color: red;/* 红色 *//* 蓝色 *//* 浅灰色 */综合利用这些颜色定义方式，可以根据项目需求选择最合适的颜色表示方法。/* 十六进制颜色 *//* RGB 颜色 *//* HSL 颜色 *//* 预定义颜色名 *//* 透明的 RGBA 颜色 *//* LCH 颜色 *//* Lab 颜色 *//* HWB 颜色 *//* CSS4 颜色模块 */
全面指南：CSS层叠样式表技术详解与实例
CSS层叠样式表技术参考手册是一份详尽的指南，专为Web开发人员设计，它汇集了W3C网站上的大量实用教程和文档，旨在帮助读者深入理解和掌握CSS（Cascading Style Sheets）这一前端开发的核心技术。该手册分为多个章节...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值