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;

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