从0开始学web-day6

最新推荐文章于 2024-07-20 23:15:07 发布

oxygen_ls

最新推荐文章于 2024-07-20 23:15:07 发布

阅读量515

点赞数 1

分类专栏：前端 # css 文章标签： web学习从零开始学前端

本文链接：https://blog.csdn.net/oxygen_ls/article/details/122609517

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

1.复习
day5复习
2.边框属性
边框属性boder是一个复合属性
border：颜色粗细线型
border-color 颜色
border-width 粗细
border-style 线型 none 没有 solid实线 dashed虚线 dotted点状线 double双实线
可以单独设置某一方向 border-left、top、right、bottom
利用边框制作三角形

3.浮动属性
float属性：值 none默认值 left right
作用：让竖着的东西横过来
效果：左浮动是正序右浮动是倒序（因为浮动的元素后边一个紧跟着前边一个去显示）
浮动的元素如果没有设置宽高，浮动之后就是内容的宽高，如果设置了就是我们设置的宽高
如果浮动元素的总宽度超过了父元素的总宽度会自动换行显示
符向右边的元素会顺序颠倒，解决方法是设置左浮动，然后给他们添加一个父元素，这个父元素右浮动
浮动的元素高度必须一致，不一致会导致某个区域空白
浮动的元素会脱离正常的文档流，导致后边的上来,但是浮动的元素会占据自身的空间，
解决方式：给下面的元素添加clear：left、right、both、none（默认值）或者给浮动的元素添加父元素，给父元素添加高度
浮动的元素会脱离正常的文档流，导致后边上来，会导致一种文字环 dar绕的效果
浮动的贴边：浮动的元素后边一个紧跟着前面一个去显示

4.背景属性
背景属性 background是一个复合属性
background-color背景颜色
background-image：url（路径）背景图片
背景图片如果比元素的宽度高度大，则只显示元素宽度高度那么大的背景图片的区域，默认是从这张图片的左上角开始截取
背景图片如果比元素的宽度高度小，则会水平垂直平铺，直到铺满整个元素的区域
background-repeat背景的平铺方式默认repeat 重复 no-repeat不平铺 repeat-x水平平铺 repeat-y垂直平铺
background-position：值1 值2 背景图片的位置
值1代表水平
值2代表垂直
可以使用具体的方向单词，left center right top center bottom 如果水平垂直方向都是居中的可以缩写成一个center
可以使用具体的数值10px 20px 可以设置百分比10%
可以设置负值正值向右向下负值向左向上
background-position-x、y
background-attachment背景是否固定 scroll默认滚动 fixed固定

5.背景固定小鹿效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清空浏览器默认设置 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 设置div */
        div {
            width: 100%;
            height: 1000px;
            overflow: hidden;
        }
        /* 背景图片固定 */
        .top1 {
            background:  url(./img/bg1.png) center fixed;
        }
        .top2 {
            background: url(./img/bg2.png) center fixed;
        }
        .top3 {
            background:  url(./img/bg3.png) center fixed;
        }
        p {
            /* 文字离上面有一定距离 */
            margin-top: 300px;
            height: 200px;
            /* 文字背景半透明 */
            background: rgba(255, 2555, 255, 0.5);
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中 */
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="top1"><p>这世间青山灼灼星光杳杳，春风翩翩晚风渐渐，也抵不过你眉目间的星辰点点</p></div>
    <div class="top2"><p>你是朝露，是晚星，是我一切欢喜，我舔舐你的眼睛，未饮酒，已酩酊。</p></div>
    <div class="top3"><p>你是我的乍见之欢，你是我的眼神所向，你是我的温柔的归宿，你是我的嘴角扬起的理由。</p></div>
</body>
</html>

6.网页中的图片
网页中支持的图片格式jpg png svg gif
网页中的图片有两种方式可以加载：插入图片用img 一种背景图片background
jpg普通图片
png支持背景透明
gif支持背景透明动画
svg放到缩小不失真矢量图背景透明
插入的图片与背景图片的区别
背景图片上可以添加文字或图片，插入图片不可以
插入图片可以右击另存为，背景图片不可以

7.logo的优化
logo的优化
1.font-size: 0;
2.text-indent: -9999999999px
3.padding-top: 50px; height:0 overflow:hidden
4.文字颜色透明

8.精灵图
精灵图雪碧图
将一些有规则的小图标整合在一张图片上，利用背景图片去实现不同的图片加载 background-position
精灵图的分类
垂直精灵图：要求高度固定
水平精灵图：要求宽度固定
定点精灵图：要求高度宽度固定
好处：
减少向服务器的请求次数，减少网络带宽占用，提高页面加载速度
减少图片体积，提高页面加载速度
注意：不是所有图片都可以整合，必须是作为背景图片出现的才能整合
整合后的图片不要过大，最好不要超过100kb
整合的时候注意使用方向问题，整合的时候注意留有空间