新闻网页案例
分析一个网页，先从外往内，从上往下挨个书写，先分析结构，再分析样式
<style>
.box{
width: 800px;
height: 800px;
/* background-color: steelblue; */
margin: auto;
}
h1{
text-align: center;
}
.infe{
text-align: center;
}
.time{
color: #808080;
}
.sina{
color: rgb(121, 71, 71);
font-weight: 700;
}
.link{
/* 取消下划线 */
text-decoration: none;
}
p{
text-indent: 2em;
}
</style>
<body>
<div class="box">
<h1>2022年广州行</h1>
<div class="infe">
<span class="time">2021年9月27日19:48</span>
<span class="sina"> 作者</span>
<a href="#" class="link">认真学习的宋小姐</a>
</div>
<hr>
<p>时代少年团（Teens in Times、TNT）是由时代峰峻推出的中国内地男子演唱组合，由马嘉祺、丁程鑫、宋亚轩、刘耀文、张真源、严浩翔、贺峻霖七人组成</p>
<p>2019年11月23日，举行出道暨新歌首唱会，时代少年团组合正式出道 [2] ；12月6日，获2020爱奇艺尖叫之夜年度潜力组合称号；12月8日，获TMEA腾讯音乐娱乐盛典年度新声代团体称号 [3] ；12月31日，出席2020湖南卫视跨年演唱会 [4] 。2020年7月19日，出席第27届东方风云榜 [5] ，并获最佳新锐组合称号 [32] ；12月10日，为电影《晴雅集》演唱的同名主题曲上线 [16] ；12月20日，获腾讯视频星光大赏年度大势组合称号 [33] ；12月28日，发行的单曲《2035是这young》上线 [31] ；12月31日，出席东方卫视跨年盛典 [34] 。2021年2月5日，参加录制的综艺《接招吧！前辈》播出 [39] ；2月11日，登上2021年中央广播电视总台春节联欢晚会的舞台，表演歌曲《奔跑的青春》 [26-27] ；2月28日，获2020新浪微博之夜微博年度人气团体称号</p>
<p>2019年8月25日，真人秀节目《台风少年蜕变之战》落幕，马嘉祺、丁程鑫、宋亚轩、刘耀文、张真源、严浩翔、贺峻霖七人正式成团 [6] ；10月11日，由七人组成的团体正式公布团名为“时代少年团”，英文名为“Teens in Times”，缩写为“TNT”，寓意着组合未来将火力全开，势不可挡 [1] ；11月11日，参加2019双十一狂欢夜，演唱《霍元甲》 [7] ；11月22日，发行单曲《全校通报》 [8] ；11月23日，组合举行出道暨新歌首唱会 [2] ，宣布正式出道；同日，发行单曲《无尽的冒险》；12月6日，出席2020爱奇艺尖叫之夜 [9] ，并获年度潜力组合称号；12月8日，出席TMEA腾讯音乐娱乐盛典，并获年度新声代团体称号 [3] ；12月31日，参加2020湖南卫视跨年演唱会，演唱歌曲《无尽的冒险》</p>
<p>2020年1月7日，发行单曲《梦游记》；1月9日，组合全员参加录制的综艺节目《少年梦游记》在爱奇艺播出；4月3日，发行单曲《爆米花》；7月1日，全团入驻明星接力直播《爱豆周五见》，担任直播嘉宾 [10] ；7月19日，出席第27届东方风云榜，并获最佳新锐组合称号 [32] ；8月14日，推出组合音乐计划《舞·象·之·年》第二篇章《象》的先行曲《姐姐真漂亮》；8月31日，发行音乐计划《舞·象·之·年》第二篇章《象》的主打曲《相遇》；11月7日，发行单曲专辑《少年江湖》，收录了《剑雨江湖》和《少年美》两首歌曲 [11] ；11月，参加录制的综艺《跨次元新星》播出 [36] ；11月28日，举行“按时长大”一周年线上演唱会 [12] ；12月1日，推出《舞·象·之·年》第三辑《之》 [13] ；12月5日，参加综艺《演员请就位第二季》决赛的录制 [17] ；12月6日，参加QQ音乐扑通心动表彰大会，获得“扑通心动年度人气偶像团体”的表彰 [41] ；12月10日，为电影《晴雅集》演唱的同名主题曲上线 [16] ；12月20日，出席腾讯视频星光大赏，获年度大势组合称号 [33] ；12月28日，发行的单曲《2035是这young》上线 [31] ；12月31日，出席2021东方卫视跨年盛典 [34] 。</p>
</div>
</body>
效果图：
小炸卡片案例
<style>
/* 可以通过给body标签设置背景颜色完成设置浏览器背景颜色 */
body{
background-color: #f5f5f5;
}
.box{
width: 600px;
height: 500px;
background-color:#fff;
margin: auto;
text-align: center;
}
.pic{
width: 500px;
}
.product{
height:60px;
font-size: 30px;
}
.info{
height: 50px;
font-size: 20px;
color: #cccccc;
}
.price{
color: #ffa500;
}
</style>
<body>
<!-- 分析一个网页，先从外往内，从上往下挨个书写
先分析结构，在分析样式 -->
<div class="box">
<img src="./1.webp" alt="" class="pic">
<div class="product">时代少年团</div>
<div class="info">小炸们</div>
<div class="price">宝藏男孩</div>
</div>
</body>
效果图·：
940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
