Day 3My code!doctype html html langzh-CN head meta charsetUTF-8 / title欢度国庆/title style /* TODO: */ body{ text-align: center; } .box1{ font-size: 16px; font-family: Minecrosoft YaHei; font-style: normal; font-weight: bold; line-height: 26px; } .box2{ font:bold normal 16px Minecrosoft YaHei; line-height: 26px; } .c1{ color: red; } .c2{ color: rgba(180, 0, 0, 0.6) } .c3{ color: #cc220080; } .c4{ color: hsla(8,100%,45%,0.7); } a:link{ color: black; text-decoration: none; } a:hover{ color: red; text-decoration: underline; } [alt国旗]{ vertical-align: middle; width: 50px; height: 20px; } span{ color: red; } /style /head body h3 classtitle欢度国庆/h3 div classbox1 p classc1锦绣中华盛世华诞举国同庆共祝祖国繁荣昌盛。/p /div div classbox2 p classc2 山河万里红旗飘扬 a href#了解国庆由来/a 我们共同祝福伟大祖国。 /p /div p classc3生在红旗下长在春风里目光所至皆为华夏。/p p classc4愿山河无恙国泰民安岁岁年年家国永安。/p p classc5 !-- TODO: -- img src./红旗.jpg alt国旗 / span红旗图片与文字垂直居中对齐/span /p /body /htmlkey!doctype html html langzh-CN head meta charsetUTF-8 / title欢度国庆/title style .title { text-align: center; } /* box1 分开书写所有字体属性 */ .box1 { font-family: Microsoft Yahei; font-size: 16px; font-style: normal; font-weight: bold; line-height: 26px; text-align: center; } /* box2 font复合属性简写 */ .box2 { font: normal bold 16px/26px Microsoft Yahei; text-align: center; } /* 4种颜色写法 */ .c1 { color: red; /* 颜色名 */ } .c2 { color: rgba(180, 0, 0, 0.6); } .c3 { color: #cc220080; text-align: center; line-height: 26px; } .c4 { color: hsla(8, 100%, 45%, 0.7); text-align: center; line-height: 26px; } .c5 { color: hsl(8, 100%, 45%); text-align: center; line-height: 26px; } a { text-decoration: none; color: #000; } a:hover { color: red; text-decoration: underline; } /* vertical-align 图片文字垂直居中 */ img { vertical-align: middle; height: 20px; width: 50px; } /style /head body h3 classtitle欢度国庆/h3 div classbox1 p classc1锦绣中华盛世华诞举国同庆共祝祖国繁荣昌盛。/p /div div classbox2 p classc2 山河万里红旗飘扬 a href#了解国庆由来/a 我们共同祝福伟大祖国。 /p /div p classc3生在红旗下长在春风里目光所至皆为华夏。/p p classc4愿山河无恙国泰民安岁岁年年家国永安。/p p classc5 img src/红旗.jpg alt国旗 / 红旗图片与文字垂直居中对齐 /p /body /html