CSS速成

/*设置整个body里面*/
body {
    background-color: #f4f4f4;
    color: #555555;

    font-family: Arial, Helvetica, sans-serif; /*修改字体*/
    font-size: 16px;      /*字体大小*/
    font-weight: normal;  /*字重*/
    /* 简写，效果同上三行 */
    /* font: normal 16px Arial, Helvetica, sans-serif */

    line-height: 1.5em;     /*行间距*/
}


/* 按钮 */
button {
    background-color: #444444;
    color: royalblue;
    padding: 10px 15px;  /* 内边距：上下10像素，左右5像素 */
}
/* 鼠标移到按钮上的状态 */
button:hover {
    background-color: red;
}
/* 点击按钮后状态 */
button:active {
    background-color: #fff;
}


/* 对超链接设置 */
a {
    text-decoration: none;
    color: #555555;
}
/*鼠标移到按钮上的状态*/
a:hover {
    color: cyan;
}
/*点击按钮后状态*/
a:visited {
    color: red;
}


/*设置box1类里面*/
.box1 {
    background-color: antiquewhite; /* 背景色 */
    color: blue;  /* 字体颜色 */

    border: 5px blue solid; /* 5像素的蓝色边框 */

    border-right: 5px red solid;       /* 单独设置5像素红色直线右边框 */
    border-left: 8px blue solid; 
    border-top: 10px green dotted;     /* 单独设置10像素绿色点线上边框 */
    border-bottom: 5px fuchsia double; /* 单独设置5像素粉色双层线下边框 */

    /*  也可以单独只设置某侧边框的某项属性（这里如果这么设置会覆盖前面的效果）
    border-bottom-width: 8px;
    border-bottom-style: dashed;
    */

    padding-top: 10px;    /* 修改盒子模型中的padding内边距，可以打开浏览器的开发者工具查看 */
    padding-bottom: 10px; 
    padding-left: 10px;
    padding-right: 10px;

    margin-top: 20px; /* 盒子向下移20个像素 */
}

.clearfix {
    clear: both;
}

/*修改box1中的h1标题*/
.box1 h1 {
    font-family: 'Times New Roman', Times, serif;  /*字体*/
    font-weight: 800;    /*字重*/
    font-style: italic;  /*字体风格：意大利斜体*/
    text-decoration: underline; /*下划线*/
    text-transform: uppercase;  /*全大写*/
    letter-spacing: 0.2cm;  /*字母间距*/
    word-spacing: 0.4cm;    /*词间距*/
}

.box2 {
    border: 5px dotted #cccccc; /*5像素边框*/
    border-radius: 25px; /*圆角*/
    padding: 20px; /*内边距*/
    margin: 20px 60px 20px 15px;  /* 外边距-上右下左(顺时针) */

    /* 位置偏移
    position: relative;   //position: absolute;
    top: 30px;
    left: 30px;
    
    */

}

.box2 h1 {
    text-align: center;
}

.container{
    width: 80%;     /* 宽度80% */
    margin: auto;   /* 居中 */
}

.list li {
    list-style-image: url('../image/check.png'); /* 链接一个图片 */
    /* list-style-type: square;  自带的方块 */
}

.block {
    float: left; /*三个float*/
    width: 33.3%;
    border: 1px solid #ccc; /*加边框，但是会超出*/
    box-sizing: border-box;   /*有边框的box*/
}

#main-block {     /* #是通过id识取；.是通过类识取 */
    float: left;
    width: 70%;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#sidebar {
    float: left;
    width: 30%;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* 选择even偶数位应用，奇数用odd */
.list2 li:nth-child(even) {
    background-color: green;
}
/* 选择第一个作用 */
.list2 li:first-child {
    background-color: red;
}
/* 选择第五个作用 */
.list2 li:nth-child(3) {
    color: aqua;
}

.position-box {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    position: relative;   /* 让下面两个h1,h2位置偏移以box为参考 */
}

.position-box h1 {
    position: absolute;
    top: 50px;
}

.position-box h2 {
    position: absolute;
    right: 30px;
}

#fixed {
    position: fixed;  /*固定在页面右下角*/
    right: 0;
    bottom: 100px;
}