CSS综合案例

最新推荐文章于 2024-06-19 15:19:49 发布

认真学习的宋小姐

最新推荐文章于 2024-06-19 15:19:49 发布

阅读量299

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/qq_51946936/article/details/120516247

版权

笔记专栏收录该内容

30 篇文章 2 订阅

订阅专栏

新闻网页案例

分析一个网页，先从外往内，从上往下挨个书写，先分析结构，再分析样式

 <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>

效果图·：
在这里插入图片描述