CSS案例1

CSS案例1

 尝试做一个网页新闻，框架比较简陋，只学了css基础，下面是效果。

需要注意的方面/遇到的问题：

1.居中分为标签居中和内容居中

标签居中：margin: 0 auto;

内容居中：text-align: center;                遇到文本、span/a标签/input/img标签给父级设置

2.本次案例常用到类选择器    class属性

.类名

.picture{

    weight: 234px;

    height: 300px;

    background-color:white;

    margin: 0 auto;

    text-align: center;

}

 

.picture{
    weight: 234px;
    height: 300px;
    background-color:white;
    margin: 0 auto;
    text-align: center;
}
img{
    width: 440px;
    text-align: center;
}
.title{
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    text-align: center;
}
.xijie{
    font-size: 35px;
    line-height: 50px;
    color: palevioletred;
}
.zuihou{
    font-size: 16px;
    color: #ccc;

 <div class="picture">
        <img src="./ciwei.jpg" alt="">
        <div class="title">可爱的刺猬</div>
        <div class="xijie">粉色的屁屁</div>
        <div class="zuihou">点我呀</div>
    </div>