装载机：微博文章卡片-CSDN博客

本文链接：https://blog.csdn.net/2401_86036532/article/details/143774363

前言

我们将模拟一个典型的博客文章卡片。这个卡片将展示文章的封面图片、标题、简介、作者头像和发布日期。通过这个项目，我们不仅能够复习和应用之前学到的知识，还能提升在页面设计和布局方面的能力。

学习目标

主要完成学习目标：

了解并使用HTML5中的新标签，如<div>、<img>、<p>和<span>
学习和应用CSS3中的各种样式属性，如背景色、边框、圆角、阴影等，美化页面布局

结构分析

任务1：整体布局

写一个整体的盒子，将这个盒子放在页面的合适位置，对这个大盒子写相应的css样式

<style>
.bigBox{
    position: relative;          //给大盒子相对定位（父相子绝）
    left: 38%;                 //因为要让效果图随页面大小改动而动，所以给到百分比形式，而不是px
    top: 150px;
    width: 400px;
    height:500px;
    background-color: white;
    border-radius: 20px;             //给大盒子四个角设置圆角
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);   //给到大盒子一个椭圆的阴影
}
    </style>
<body>
    <div class="bigBox">
        
    </div>
</body>

效果展示

任务2：将元素逐个定位

在整个样式中分为两部分，一.图片部分、二.文字段落部分

任务2.1 图片部分

将图片部分装在一个小盒子里，会让文字段落部分定位更容易些

<style>
.box1,.box1 img{
    width: 400px;
    height: 260px;
    border-top-left-radius: 20px;   
border-top-right-radius: 20px;
//给图片上边两个角相应的圆角大小
}
</style>
</head>
<body>
    <div class="bigBox">
        <div class="box1">
            <img src="./笔记本.jpg" alt="">
        </div>
    </div>
</body>

效果展示

任务2.2文字段落部分

将文字段落部分做好划分，使用绝对定位让每个元素在相应的位置上

<style>
.p1{
position: absolute;      //给第一个段落p1绝对定位（父相子绝）
//进行定位
top: 280px;
    left: 40px;
    font-size: larger;        //调整字体大小
    font-weight: 700;       //调整字体粗细
}
.p2{
position: absolute;     //给第一个段落p2绝对定位（父相子绝）
    top: 325px;
    left: 40px;
    width: 350px;        //限制段落的宽度
    color: gray;          //给定字体颜色
}
.personPhoto{
position: absolute;      //给人物头像进行绝对定位（父相子绝）
    left: 30px;
    top: 405px;
    width: 60px;
    height: 60px;
}
.span1{                   //给人物头像旁边的人名进行绝对定位（父相子绝）
    position: absolute;
    top: 410px;
    left:96px;
    font-size: 16px;
    font-weight: 560;
}
.span2{              //给人物头像旁边的日期进行绝对定位（父相子绝）
    position: absolute;
    top:437px ;
    left: 96px;
    color: gray;
    font-size: 13px;
}
    </style>
</head>
<body>
    <div class="bigBox">
        <p class="p1">Lorem ipsum dolor sit amet</p>
        <p class="p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis</p>
        <img src="./人像(1).png" alt="" class="personPhoto">
        <span class="span1">John Doe</span>
        <span class="span2">Oct 08, 2020</span>
    </div>
</body>

效果展示

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>装载机</title>
    <!-- <link rel="stylesheet" href="./装载机.css"> -->
    <style>
    body{
    background-color: #ecf0f1;       //为页面设置背景颜色
}
.bigBox{
    position: relative;
    left: 38%;
    top: 150px;
    width: 400px;
    height:500px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
}
.box1,.box1 img{
    width: 400px;
    height: 260px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.p1{
    position: absolute;
    font-size: larger;
    font-weight: 700;
    top: 280px;
    left: 40px;
}
.p2{
    position: absolute;
    top: 325px;
    left: 40px;
    width: 350px;
    color: gray;
}
.personPhoto{
    position: absolute;
    left: 30px;
    top: 405px;
    width: 60px;
    height: 60px;
}
.span1{
    position: absolute;
    top: 410px;
    left:96px;
    font-size: 16px;
    font-weight: 560;
}
.span2{
    position: absolute;
    top:437px ;
    left: 96px;
    color: gray;
    font-size: 13px;
}

    </style>
</head>
<body>
    <div class="bigBox">
        <div class="box1">
            <img src="./笔记本.jpg" alt="">
        </div>
        <p class="p1">Lorem ipsum dolor sit amet</p>
        <p class="p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis</p>
        <img src="./人像(1).png" alt="" class="personPhoto">
        <span class="span1">John Doe</span>
        <span class="span2">Oct 08, 2020</span>
    </div>
</body>
</html>