day05

最新推荐文章于 2025-05-11 13:30:19 发布

今天的代码敲了吗

最新推荐文章于 2025-05-11 13:30:19 发布

阅读量145

点赞数

分类专栏：前端学习文章标签： html css

本文链接：https://blog.youkuaiyun.com/g877835148/article/details/131403708

版权

前端学习专栏收录该内容

13 篇文章

订阅专栏

1.文本样式

1.1

	关键字	用法
设置文字颜色	color	color: red;
设置文字大小	font-size	font-size: 30px;
设置文字粗细	font-weight	font-weight: bold;
设置文字样式	font-style	font-style: normal;
设置文字字体	font-family	font-family: “楷体”;
字体综合属性	font	font: italic 700 38px “楷体”;
字体对齐	text-align	text-align: center;
字体缩进	text-indent	text-indent: 2em;
字体装饰效果	text-decoration	text-decoration: none;
文本水平位置	text-align	text-align: center;
设置行高	line-height	line-height: 300px;
设置文本阴影	text-shadow	text-shadow: 1px 1px 0px rgb(243, 65, 255);

1.2

超链接取消下划线

text-decoration: none;

}

1.3

引入外部css

link rel=“stylesheet” href=“test01.css”

2.练习代码

2.1

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .aaa{

        /* 字体颜色属性
            rgb描述颜色(0-255) */
        color: red;
        width: 300px;
        height: 300px;
        background-color: rgb(104, 111, 228);
        /* rgba a 表示透明度 0-1 */

        color: rgba(0, 0, 0, 0.5);
        font-size: 30px;  
        
        
        /* text-indent: 2em; */

        /* 文本的水平位置  后边跟方位名词 */
        text-align: center;
        /* 设置行高 */
        /* 文本框默认在行的中间显示
            可以设置行高和容器的高度一致
                实现单行文本的垂直居中 */
        line-height: 300px;
    }
    .bbb{

        color: rgb(0, 255, 0);
        font-size: 38px;
        /* 文字阴影  
        第一个值表示文字阴影 左右的位置
        第二个值表示文字阴影 上下的位置
        第三个值表示文字阴影 模糊的程度（没有负值）
        第四个值表示阴影的颜色*/
        text-shadow: 1px 1px 0px rgb(243, 65, 255),3px 3px 0px rgb(0, 0, 0);
       
        /* 首行缩进  2em就是两个字符s*/
        text-indent: 2em;

        /* 文本样式 */
        /* 删除线 */
        text-decoration: line-through;
        /* 下划线 */
        text-decoration: underline;
        /* 上划线 */
        text-decoration: overline;


    }

    del{
        text-decoration: none;
    }

    /* <!-- 超链接取消下划线 -->
     */
     a{
        text-decoration: none;
     }
</style>
<body>
    <!-- 颜色的取值 三原色 -->
    <div class="aaa">
        出身寒微
    </div>

    <div class="bbb">
        <p>出身寒微不是耻辱 能屈能伸方为丈夫
            出身寒微不是耻辱 能屈能伸方为丈夫
            出身寒微不是耻辱 能屈能伸方为丈夫</p>
        <p>出身寒微不是耻辱 能屈能伸方为丈夫
            出身寒微不是耻辱 能屈能伸方为丈夫
            出身寒微不是耻辱 能屈能伸方为丈夫
            出身寒微不是耻辱 能屈能伸方为丈夫
            出身寒微不是耻辱 能屈能伸方为丈夫</p>
    </div>

    <del>删除线标签</del>

    <ins>下划线标签</ins>
    <u>000</u>

    
    <a href="#">000000000</a>
</body>
</html>

2.2

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>西游记</title>
    <style>
        h1 {
            text-align: center;

            color: #ECDA01;
            font-family: "华文行楷";
            font-size: 35px;
        }

        .xiyou {

            text-align: center;
        }

        h2 {
            font-family: "华文行楷";
        }

        span {
            font-family: "隶书";
            /* text-indent: 20em; */
            font-size: 25px;

        }

        a {
            font-family: "隶书";
            font-size: 30px;

        }

        p {
            font-family: "隶书";
            font-size: 25px;
        }

        .GD {
            text-align: center;
        }

        .CT {
            float: right;
        }
    </style>
</head>

<body>
    <h1>西游记</h1>
    <div class="xiyou">
        <img src="../day01/西游记.jpg">
    </div>

    <!-- 
        浏览器处理文字 和图片 行内元素 行内块元素

     -->
    <h2>
        <font size="6">西游记简介</font>
    </h2>
    <span>&nbsp;&nbsp;&nbsp;&nbsp;《西游记》是中国古代第一部浪漫主义章回体长篇神魔小说。现存明刊百回本《西游记》均无作者署名，清代学者吴玉搢等首先提出《西游记》作者是明代吴承恩。</span>
    <br>
    <span>&nbsp;&nbsp;&nbsp;&nbsp;全书主要描写了孙悟空出世及大闹天宫后，遇见了唐僧、猪八戒、沙僧和白龙马，西行取经，一路上历经艰险、妖怪魔法高强，经历了九九八十一难，终于到达西天见到如来佛祖，最终五圣成真的故事。该小说以“玄奘取经”这一历史事件为蓝本，通过作者的艺术加工，深刻地描绘了明代社会现实。</span>
    <br>
    <span>&nbsp;&nbsp;&nbsp;&nbsp;《西游记》是中国神魔小说的经典之作，达到了古代长篇浪漫主义小说的巅峰，与《三国演义》《水浒传》《红楼梦》并称为中国古典四大名著。《西游记》自问世以来在民间广为流传，各式各样的版本层出不穷。明代刊本有六种，清代刊本、抄本也有七种，典籍所记已佚版本十三种。鸦片战争以后，大量中国古典文学作品被译为西文，《西游记》渐渐传入欧美，被译为英、法、德、意、西、手语、世（世界语）、斯（斯瓦西里语）、俄、捷、罗、波、日、朝、越等语言。
    </span>
    <br>
    <h2><a href="#" class="mulu">点击打开目录</a></h2>

    <h2>
        <font size="6">内容简介</font>
    </h2>
    <img src="../day01/西游记插图.jpg" class="CT">

    <p>&nbsp;&nbsp;&nbsp;&nbsp;&#9679第一回</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;东胜神洲傲来国海中有花果山，山项上一仙石孕育出一石猴。石猴在所居涧水源头寻到名为“水帘洞”的石洞，被群猴拥戴为王。又过三五百年，石猴忽为人生无常，不得久寿而悲啼。根据一老猴指点，石猴经南赡训洲到西牛贺洲，上灵台方寸山，入斜月三星洞，拜见须菩提祖师，被收为徒，起名曰孙悟空。
    </p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&#9679第二回</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;悟空从祖师学得长生之道、七十二般变化及“筋斗云”。一日，悟空受众人挑唆，变为松树，引起祖师不快，被逐出洞。回到花果山，与占山妖魔厮斗取胜，带回被掳的众猴与物品。</p>

    <p>&nbsp;&nbsp;&nbsp;&nbsp;&#9679第三回</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;悟空使摄法将傲来国库馆里兵器搬进山中，操演群猴。山中妖、兽纷纷拜悟空为尊。悟空向龙王讨得重一万三千五百斤的。在幽冥界勾掉猴属在生死簿上的姓名。龙王和阎王表奏玉帝，请伏妖猴。玉帝派太白金星赴花果山招安悟空。
    </p>

    <p>&nbsp;&nbsp;&nbsp;&nbsp;&#9679第四回</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;悟空被授以“弼马温”之官，他得知此官为末等职，回花果山。玉帝命托塔李天王与其子哪吒太子擒悟空。被悟空打败。金星再次招来悟空。玉帝命造齐天大圣府，让悟空居住。</p>

    <p>&nbsp;&nbsp;&nbsp;&nbsp;&#9679第五回</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;悟空管理蟠桃园，吃尽园中大桃。又赴瑶池，喝光仙酒；吃尽葫芦内的'金丹。逃回花果山。玉帝令托塔天王率天兵去捉拿悟空。悟空打退了众天神。</p>

    <h2 class="GD"><a href="#">点击查看更多</a></h2>







</body>

</html>