前端 页面样式设计

 （颜色选取网站Palettes | Flat UI Colors 🎨 280 handpicked colors ready for COPY & PASTE）

1、颜色的表示方式

        （1）、直接用颜色名（英文单词）来表示 red、blue、pink.......

div{
    width:200px；
    height:200px;
    background:red;
}

        （2）、用六位十六进制的数值表示颜色 #000000~ffffff（三原色混合原理，红光、绿光、蓝光，每两位代表一个颜色）

div{
    width:200px；
    height:200px;
    background:#ffffff;
}
    

        （3）、rgb（red，green，blue）0~255

div{
    width:200px；
    height:200px;
    background:rgb(255,0,0);
}

        （4）rgba（red，green，blue，alpha）a表示透明度0~1 (只针对背景部分，字体等其他元素是不透明的）

        （5）透明度 opacity 对于整个元素的透明度设置

        （6）渐变色linear-gradient（方向，颜色，颜色）

        （7）透明色transparent

div{
    width:200px；
    height:200px;
    background:rgba(255,0,0,0.5);
    /*linear-gradient:(30deg,red，transparent)*/
    /*opacity:0,5;*/
}

2、和字体相关的样式

        （1）字体颜色 color

div{
    width:200px;
    height:200px;
    color:red;
}

        （2）font 复合属性

                font-size设置字体大小

                font-weight设置字体粗细

                font-style设置字体的风格normal正常italic斜体

                text-decoration设置文字是否有下划线 none是不修饰 、underline加下划线、line-through中划线、overline上划线

                text-align设置规定文本的水平对齐方式 right右边 left左边 center 居中

                line-height设置行高，当行高和设置的元素一样高时可以达到垂直居中

div{
    width:200px;
    height:200px;
    color:red;
    font-size:20px;
    font-weight:500;
    font-style:normal;
    text-decoration:none;
    text-align:center;
    line-height:200px;
}

3、经常用的背景样式

        （1）background-color设置背景颜色

        （2）background-image设置背景图片url指定图片地址

        （3）background-repeat设置背景图片是否平铺no-repeat为不平铺

                repeat为平铺

                repeat-x为x轴平铺

                repeat-y为y轴平铺

        （4）background-size设置背景图片大小，cover把所在容器铺满

        （5）background-position:设置背景图片位置 center居中

        （6）background-attachment控制背景图片是否随浏览器的滚动而滚动 ,background-attachment：fixed设置不随浏览器的滚动而滚动

div{
    width:200px
    height:200px;
    background-color:red;
    background-image:url("img/1.jpg");
    background-repeat:no-repeat;
    background-size:300px;
    background-position:center;
    background-attachment:fixed;
}

4、列表相关的样式

        list-style：none；去掉列表样式

div{
    width:200px
    height:200px;
    list-style:none;
}

5、和边框相关的样式

        (1) border-radius 圆角边框值越大弧度越大

                border-top-left-radius单独对角设置

                或者直接给四个角赋值从上开始顺时针，没有的话找对称

        (2)box-shadow 阴影设置

div{
    width:200px;
    height:200px;
    border-radius:30px 20px 10px;
    box-shadow:2px 6px 5px blue;
}

6、和图片相关的样式

        object-fit:cover; 保持图片不变形

img{
     width:200px;
    height:200px;
    object-fit:cover;
}

7、定位

.father{
    width:600px;
    height:1000px;
    background:pink;
}
.top{
    width:200px;
    height:100px;
    background:yellow;
}
.buttom{
    width:200px;
    height:100px;
    background:plum;
}
.middle{
    width:200px;
    height:100px;
    background:green;
    /*pssition:fixed;
    left:200px;
    top:500px;*/
    /*pssition:relative;
    left:20px;
    top:50px;*/
    pssition:absolute;
    left:20px;
    top:50px;
}

        (1)定位position用于设置定位模式 其值如下

        ①static 代表静态模式 常态模式

        ②fixed 代表固定模式，不随浏览器的移动而移动,释放自己原来的空间可以根据上下左右调位置，参考物是整个浏览器

        ③relative 代表相对模式 ,随浏览器的移动而移动,保留自己原来的空间,上下左右调位置,参考物是自己原来的位置

        ④absolute 代表绝对模式随浏览器的移动而移动,释放自己原来的空间可以根据上下左右调位置，参考物是整个浏览器.

        ⑤结合模式 父级使用relative,子集使用absolute,子级元素随浏览器的移动而移动,释放自己的空间参考物是父级元素

        ⑥定位层级 如果三个子集叠在一起,先出现的在最下面,后出现的在最上面,

可以设置定位层级,z-index: 值最大的在最上边