Day_3 #4

Open
opened 2026-09-11 18:22:53 +08:00 by pjc · 9 comments
Owner
No description provided.

外部样式表生效(改 style.css 页面就变)
标签/类/id 三种选择器都用到了
能说出 .类名 和 #id 的区别

不过有个问题,为什么中间换了一些东西后链接没了,我搞了半天还是不行。

<html lang="zh"> <head> </head>

我叫川

我是web部的新成员(也许)。我是成都超人的好伙伴--重庆gay。我爱我星穹铁道。我是好多东西的🐶。我爱二次元

这是我完成的第一个网页(才怪)

我的秘密

小喵不给看了

</html> body { background-color: #962f2f; }

h1 {
color: #2ce595;
}

#title {
font-size: 100px;
text-align: center;
}

.highlight {
background-color: rgb(16, 177, 91);
}

外部样式表生效(改 style.css 页面就变) 标签/类/id 三种选择器都用到了 能说出 .类名 和 #id 的区别 不过有个问题,为什么中间换了一些东西后链接没了,我搞了半天还是不行。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>关于我</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 id="title">我叫川</h1> <div> <p class="highlight">我是web部的新成员(也许)。我是成都超人的好伙伴--重庆gay。我爱我星穹铁道。我是好多东西的🐶。我爱二次元</p> <p>这是我完成的第一个网页(才怪)</p> </div> <a href="https://examcrafts.com/" target="_blank">我的秘密</a> <p>小喵不给看了</p> </body> </html> body { background-color: #962f2f; } h1 { color: #2ce595; } #title { font-size: 100px; text-align: center; } .highlight { background-color: rgb(16, 177, 91); }
  • 外部样式表生效(改 style.css 页面就变)
  • 标签/类/id 三种选择器都用到了
  • 能说出 .类名 和 #id 的区别

style.css:

body {
  background-color: #f0f0f0;
  /*background-color: #f0f8ff;*/
}

h1 {
  color: #2c3e50;
}

.highlight {
  background-color: lightgreen;
  /*background-color: yellow;*/
}

#title {
  font-size: 40px;
  text-align: center;
}

styled.html:

<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>关于我</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1 id="title">我是chenlan114514</h1>

    <p><span class="highlight">我是pjc的头号粉丝</span></p>

    <div>
      <p>There are something fun:</p>
      <a href="https://www.sanguosha.cn/" target="_blank">点我跳转</a><br />
      <span>这句话稍后要变色</span>
    </div>

    <p>下面是一张图片:</p>
    <img src="me.png" alt="photo" width="300" />
  </body>
</html>
}
- [x] 外部样式表生效(改 style.css 页面就变) - [x] 标签/类/id 三种选择器都用到了 - [x] 能说出 `.类名` 和 `#id` 的区别 **style.css:** ```css body { background-color: #f0f0f0; /*background-color: #f0f8ff;*/ } h1 { color: #2c3e50; } .highlight { background-color: lightgreen; /*background-color: yellow;*/ } #title { font-size: 40px; text-align: center; } ``` **styled.html:** ```html <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>关于我</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1 id="title">我是chenlan114514</h1> <p><span class="highlight">我是pjc的头号粉丝</span></p> <div> <p>There are something fun:</p> <a href="https://www.sanguosha.cn/" target="_blank">点我跳转</a><br /> <span>这句话稍后要变色</span> </div> <p>下面是一张图片:</p> <img src="me.png" alt="photo" width="300" /> </body> </html> }
屏幕截图 2026-09-15 194822.png
<img width="1170" alt="屏幕截图 2026-09-15 194822.png" src="attachments/f94829a7-f2cf-4e3c-92e2-528cfa61e68d">

完成

body
{
    background-color: antiquewhite;
}

h1
{
    color: #321fae;
    text-align: center;
}

.highlight
{
    background-color: gold;
}

#title
{
    font-size:3em;
    text-align: center;
}
<!DOCTYPE html>
<html lang="zh"></html>
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
</head>
<html>
    <h1>
        读我档
    </h1>
    <div id="title">
        大标题
    </div>
    <div style="text-align: left;">
         <p>
        {<br>
        <span class="highlight">"name"</span>:"洪圣洋",<br>
            <span class="highlight">"age"</span>:"19",<br><span class="highlight">"identity"</span>:"不是二次元,只是看过动画片,东方成分多些"<br>
        }
        </p>
        <a href="127.0.0.1" target="_blank">一个好人</a>
    </div>
    <div style="text-align: center;">
        <img src="data:image/png;base64,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">
    </div>
   
</html>
完成 ```css body { background-color: antiquewhite; } h1 { color: #321fae; text-align: center; } .highlight { background-color: gold; } #title { font-size:3em; text-align: center; } ``` ```html <!DOCTYPE html> <html lang="zh"></html> <head> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> </head> <html> <h1> 读我档 </h1> <div id="title"> 大标题 </div> <div style="text-align: left;"> <p> {<br> <span class="highlight">"name"</span>:"洪圣洋",<br> <span class="highlight">"age"</span>:"19",<br><span class="highlight">"identity"</span>:"不是二次元,只是看过动画片,东方成分多些"<br> } </p> <a href="127.0.0.1" target="_blank">一个好人</a> </div> <div style="text-align: center;"> <img src="data:image/png;base64,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"> </div> </html> ```

外部样式表生效(改 style.css 页面就变)
标签/类/id 三种选择器都用到了
能说出 .类名 和 #id 的区别

外部样式表生效(改 style.css 页面就变) 标签/类/id 三种选择器都用到了 能说出 .类名 和 #id 的区别

image.pngimage.pngimage.png

![image.png](/attachments/7b2d52db-c210-4abe-b734-11e13231e54a)![image.png](/attachments/74a4dd47-4750-443f-83df-70b7048db01f)![image.png](/attachments/3e65f3df-723c-4fa1-9677-c01f2f72d3de)
<html lang="zh"> <head> </head>

我是徐志恒

我是web部的新成员maybe

我喜欢开发研究一些新东西。

还有

我喜欢玩minecraft

此附上一张图片


一张minecraft游戏图片
</div>
<span >点此了解更多:<a href="https://www.bilibili.com/video/BV1GJ411x7h7/?spm_id_from=333.337.search-card.all.click&vd_source=8e309bfbb11a4790fd0b12bfa95744fd" target="_blank">B站视频</a></span>
</html>

body{
background-color: #73ae52;
}
h1{
color: #fbf1d7;
}
.highlight{
background-color: yellow;
}
#title{
font-size: 40px;
}

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>关于我</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>我是徐志恒</h1> <div> <p>我是web部的新成员maybe</p> <p>我喜欢开发研究一些新东西。</p> </div> <div> <p id="title">还有</p> <h4 class="highlight">我喜欢玩minecraft</h4> <p>此附上一张图片</p> <br> <img src="minecraft terrafirma.png" alt="一张minecraft游戏图片" title="校mc群峦重生服务器 右上是我" width="500"> </div> <span >点此了解更多:<a href="https://www.bilibili.com/video/BV1GJ411x7h7/?spm_id_from=333.337.search-card.all.click&vd_source=8e309bfbb11a4790fd0b12bfa95744fd" target="_blank">B站视频</a></span> </body> </html> body{ background-color: #73ae52; } h1{ color: #fbf1d7; } .highlight{ background-color: yellow; } #title{ font-size: 40px; }

已全部完成

已全部完成

外部样式表生效(改 style.css 页面就变)
标签/类/id 三种选择器都用到了
能说出 .类名 和 #id 的区别

外部样式表生效(改 style.css 页面就变) 标签/类/id 三种选择器都用到了 能说出 .类名 和 #id 的区别
Sign in to join this conversation.