Educoder答案【实训脚本语言开发技术web（css)答案】

最新推荐文章于 2024-03-28 22:48:12 发布

尾迹双冒号

最新推荐文章于 2024-03-28 22:48:12 发布

阅读量1.4k

点赞数 1

分类专栏： # web前端文章标签： css 前端 r语言

本文链接：https://blog.csdn.net/weixin_51188461/article/details/121091545

版权

文章目录

css

2.1CSS从入门到精通——基础知识

第1关：初识CSS：丰富多彩的网页样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <style type="text/css">
      body {
     
        text-align: center;
      }

      h1 {
     
        /* ********** BEGIN ********** */
        text-align:center;
        font-size:40px;
        /************ END ********** */
        color: #62A8CB;
      }

      img {
     
        height: 250px;
      }

      p {
     
        /* ********** BEGIN ********** */
        color: grey;
        font-size:18px;
        /* ********** END ********** */
      }
    </style>
  </head>
  <body>
    <h1>CSS让网页样式更丰富</h1>
    <img src="https://www.educoder.net/attachments/download/189467">
    <p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p>
  </body>
</html>

第2关：CSS样式引入方式

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>O Captain! My Captain!</title>
     <!-- ********** BEGIN ********** -->
        
    <link rel="stylesheet" href="step2/CSS/style.css"/>

     <!-- ********** END ********** -->

    <style type="text/css">
      h1 {
     
        color:darkblue;
      }

      img {
     
        float: left;
        margin-right: 1em;
      }
    </style>
</head>

<body>
    <div>
        <!-- ********** BEGIN ********** -->
        
        <h1 style="color: cornflowerblue" >O Captain! My Captain!</h1>

        <!-- ********** END ********** -->
            
        <img src="https://www.educoder.net/attachments/download/170157" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
        <p >O Captain! my Captain! our fearful trip is done,
The ship has weather’d every rack, the prize we sought is won,
The port is near, the bells I hear, the people all exulting,
While follow eyes the <em>steady keel</em>, the vessel grim and daring;</p>
    
        <!-- ********** BEGIN ********** -->
    
        <p ><small font-size:10px;color:lightslategray >&copy; Walt Whitman</small></p>
            
        <!-- ********** END ********** -->
    </div>
</body>

</html>

2.2CSS入门到精通——表格样式

第1关：表格边框

<!DOCTYPE html>

<head>
    <meta charset="UTF-8" />
    <title>HTML – 简单表格</title>
    <style type="text/css">
    table {
     
        border-collapse: collapse;
    }

    th,
    td {
     
        padding: .5em .75em;
        border: 1px solid #000;
    }

    
    caption {
     
        font-weight: bold;
        margin-bottom: .5em;
    }

    

    tfoot {
     
        font-weight: bold;
    }
    </style>
</head>

<body>
    <table width="400">
        <!-- 表标题 -->
        <caption>通讯录</caption>
        <!-- 表头 -->
        <tr>
            <th scope="col">姓名</th>
            <th scope="col">电话</th>
            <th scope="col">备注</th>
        </tr>
        <tr>
            <td>李雯</td>
            <td>18012311234</td>
            <td>家人</td>
        </tr>
        <tr>
            <td>王谦</td>
            <td>17812311234</td>
            <td>同事</td>
        </tr>
        <tr>
            <td>周佳</td>
            <td>17413511234</td>
            <td>高中同学</td>
        </tr>
    </table>
</body>

</html>

第2关：表格颜色、文字与大小

<!DOCTYPE html>

<head>
    <meta charset="UTF-8" />
    <title>HTML – 简单表格</title>
    <style type="text/css">
    table {
     
        width: 98%;                     /*表格整体宽度*/
        border-collapse: collapse;      /*表格折叠边框*/
    }

    caption {
     
        height: 30px;;
        font-weight: bold;                /*表格标题文字加粗*/
    }

    th,
    td {
     
        height: 35px;                     /*表格高度*/
        border: 2px solid black;
    }

    th {
        
        text-align: center;                /*表格头部居中对齐*/
        background-color:lightblue;            /*表格头部背景颜色*/
        color:white;                         /*表格头部字体颜色*/
    }

    td {
     
        text-align: center;                   /*表格主体居中对齐*/
    }

    tfoot {
     
        font-weight: bold;               /*表格尾部文字加粗*/
    }
    </style>
</head>

<body>
    <table width="400">
        <caption>运动会跑步成绩</caption>
        <thead>
         <!-- 表格头部 -->
            <tr>
                <th scope="col">长度</th>
                <th scope="col">李雯</th>
                <th scope="col">王谦</th>
                <th scope="col">周佳</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <th scope="row">100米</th>
                <td>14s</td>
                <td>16s</td>
                <td>13s</td>
            </tr>
            <tr>
                <th scope="row">200米</th>
                <td>26s</td>
                <td>23s</td>
                <td>25s</td>
            </tr>
            <tr>
                <th scope="row">400米</th>
                <td>70s</td>
                <td>73s</td>
                <td>69s</td>
            </tr>
        </tbody>
        <tfoot>
            <!-- 表格尾部 -->
            <tr>
                <th scope="row">总用时</th>
                <td>110s</td>
                <td>112s</td>
                <td>107s</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

2.3CSS从入门到精通——背景样式

第1关：背景颜色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="step1/CSS/style.css">
</head>

<body>
    <h1>CSS让网页样式更丰富</h1>
    <p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p>
</body>

</html>

第2关：背景图片

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="step2/CSS/style.css">
</head>

<body>
    <div>
      <h1>CSS让网页样式更丰富</h1>
      <p>这是一个段落</p>
    </div>
</body>

</html>

第3关：背景定位与背景关联

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="step3/CSS/style.css">
</head>

<body>
    <div>
        <h1>CSS让网页样式更丰富</h1>
        <p>这是一个段落</p>
    </div>
</body>

</html>

2.4CSS从入门到精通——文本与字体样式

第1关：字体颜色、类型与大小

body {
    /*背景渐变*/
    background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #7ECABA, #E2FCCB);
    /* 标准的语法 */
    font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    /*居中页面*/
    width: 45em;
    margin: 0 auto;
}

h1,
h2 {
    /* ********** BEGIN ***********/
   font-family:PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    /* ********** END ***********/
}

h1 {
    /* ********** BEGIN ***********/
    font-size: 2.1875em;

    /* ********** END ************/
}

h2 {
    background-color: #eaebef;
    /* ********** BEGIN ***********/
    font-size: 1.7500em;
    color:#7d717c;
    /* ********** END ************/
}

h3 {
    background-color: white;
    /* ********** BEGIN ***********/
    font-size: 1.2500em;
    color: green;
    /* ********** END ************/
    padding-left: 10px;
}

hr {
    height: 1px;
    border: none;
    border-top: 2px dashed #88b2d2;
}

footer {
    margin: 10px auto;
}

/* CONTENT
----------------------------------- */

.architect {
    background-color: #fff;
    padding: 1.5em 1.75em;
}

/* :::: Intro ::::: */

.intro {
    background-color: #888888;
    /* ********** BEGIN ***********/
    color: #fefefe;
    /* ********** END ************/
    padding: 1px 1.875em .7em;
}

.intro .subhead {
    /* ********** BEGIN ***********/
    font-size: 1.125em;
    /* ********** END ************/
}

.intro p {
    font-size: 1.0625em;
}

/* :::: chapter Descriptions ::::: */

.chapter p {
    font-size: .9375em;
}

img {
    border-radius: 8px;
}

/* :::: Links :::: */

a:link {
    color: #e10000;
}

a:visited {
    color: #b44f4f;
}

a:hover {
    color: #f00;
}

.intro a {
    color: #fdb09d;
}

.intro a:hover {
    color: #fec4b6;
}

第2关：字体粗细与风格

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>九寨沟简介</title>
	<link rel="stylesheet" href="step8/CSS/style.css"> 
</head>
<body>
<article class="architect">
	<div class="intro">
		<h1>九寨沟简介</h1>
		<p class="subhead">五岳归来不看山,九寨归来不看水</p>
		<p><a href="#">九寨沟</a>位于四川省西北部岷山山脉南段的阿坝藏族羌族自治州九寨沟县漳扎镇境内，地处岷山南段弓杆岭的东北侧。距离成都市400多千米，系长江水系嘉陵江上游白水江源头的一条大支沟。 九寨沟自然保护区地势南高北低，山谷深切，高差悬殊。北缘九寨沟口海拔仅2000米，中部峰岭均在4000米以上，南缘达4500米以上，主沟长30多公里。</p>
		<p>九寨沟是世界自然遗产、国家重点风景名胜区、国家AAAAA级旅游景区、国家级自然保护区、国家地质公园、世界生物圈保护区网络，也是中国第一个以保护自然风景为主要目的的自然保护区。</p>

最低0.47元/天解锁文章

尾迹双冒号

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
Educoder答案【实训脚本语言开发技术web（css)答案】

文章目录css2.1CSS从入门到精通——基础知识2.2CSS入门到精通——表格样式2.3CSS从入门到精通——背景样式2.4CSS从入门到精通——文本与字体样式2.5CSS从入门到精通——基础选择器2.6CSS3转换2.7使用 HTML/CSS 实现 Educoder 顶部导航栏css2.1CSS从入门到精通——基础知识第1关：初识CSS：丰富多彩的网页样式<!DOCTYPE html><html> <head> <meta charset=
复制链接

扫一扫