css属性和小例子练习

Posted 2021-04-09 前端小白学习

背景

    背景颜色：background-color

        background-color: red; 

    背景图片：background-image

        background-image: url(img/pic.png);

     背景图比盒子模型大的时候,从图片的左上角显示,盒子有多大就显示图片的区域，背景图比盒子模型小的时候:图片在横向和纵向平铺

    背景平铺样式：background-repeat

            默认平铺：background-repeat: repeat;

            不平铺：background-repeat: no-repeat;

            x轴平铺：background-repeat: repeat-x;

            y轴平铺：background-repeat: repeat-y;

    背景图片的起始位置：background-position：x y；

        px值：background-position: 10px 10px;

        百分比：background-position: 0% 0%;

        关键词：background-position: top left;

        关键词有top、left、bottom、right、center

        当x大于0的时候,是向右侧移动,小于0的往左

        当y大于0的时候,向下,小于0的是向上

    是否固定或者随着页面的其余部分滚动：background-attachment: fixed;

        background-attachment: fixed;

        背景图会随着页面其余部分滚动而移动：scroll

        页面其余部分滚动时，背景图不动：fixed

        继承父元素的background-attachment 属性的设置：inherit

    background：颜色 图片 重叠 位置 固定浏览器背景的简写

    background: red url(img/pic.png) no-repeat 10px 10px fixed;

代码展示

.box{ width: 600px; height: 2000px; /* background-color: red; background-image: url(img/pic.png); background-repeat: no-repeat; background-position: 10px 10px; background-attachment: fixed; */ /*background: red url(img/pic.png) no-repeat 10px 10px fixed;*/ background:url(img/pic.png) no-repeat 10px 10px fixed;}/* html代码*/<div class="box"></div>

页面效果

自己尝试下，这里盒子设置的2000px很高，浏览器会出现滚动条，向下浏览时，图片依然在浏览器的左上角，因为设置了fixed，也可以除掉看看效果哦

精灵图（雪碧图）

精灵图就是将很多的小图标存放到一张图片上面,减少对服务器的请求次数,从而减轻服务的压力

然后使用背景图片，根据图标在图片的位置定位到这个图标，设置大小

这里提供一个雪碧图

我们使用上面的雪碧图来尝试一下

代码展示

.box{ width: 20px; height: 20px; border:1px solid red; background-image: url(img/toolbars.png); background-position: 0px 0px; /* 这里的位置是图标在图片中的位置的负值，负值是因为你需要将图片向左移动才可以移动到你到的位置，可以自己尝试下正值的时候会怎么样*/} /* html代码 */<div class="box"></div>

页面效果

雪碧图的制作需要是要到ps，这里由于电脑没有安装ps，暂不做讲解，后面会补充上来，告诉大家一下是如何操作的

  添加图层:

    ps顶部工具栏--图层-新建图层---点击该图层,alt+delete(insert键下面的),将该图层拖到原来的图层下面

  需要自己做精灵图:

    (1)新建画布:ctrl+n(修改单位px),背景内容选择透明色

    (2)点击小图片,用移动工具点击小图标,拖到新的画布里面

    (3)保存为png

不理解没关系，会的可以尝试，教学视频放在群里，可以去查看学习

使用我们学过的内容制作一个导航栏

实现下图效果，鼠标悬停的时候要将当前鼠标悬停的这个的导航变成第一个首页的效果

代码展示

*{ margin: 0; padding: 0;}ul,li{ list-style: none;}.nav{ font-size: 0;}.nav li{ display: inline-block; /*background-color: grey;*/ font-size:16px; height: 34px; line-height: 34px; padding: 0 12px; margin-right: 22px; font-family: "微软雅黑";}.nav .cur{ border-bottom:4px solid #dd2525;}.nav li a{ text-decoration: none; color: #131313;}.nav .cur a{ color: #dd2525;}.nav li:hover{ border-bottom:4px solid #dd2525;}.nav li:hover a{ color: #dd2525;}/* html代码*/<ul class="nav"> <li class="cur"><a href="###">首页</a></li> <li><a href="###">同安集团2</a></li> <li><a href="###">同安集团3</a></li> <li><a href="###">同安集</a></li> <li><a href="###">同安集团5</a></li> <li><a href="###">同安集团6</a></li> <li><a href="###">同安集团7</a></li> <li><a href="###">同安集团8</a></li></ul>

效果如上图

良好的目录结构

文件夹要区分好，html的文件直接写在当前文件，css文件都放到css文件夹里，js文件放到js文件夹里，图片放到img文件夹中

样式尽量使用外链来写样式

练习小作业

完成小米官网中手机的这一部分，侧边栏不用做

这里做一些提示，可以看到图中内容是在页面居中的，我们称他为版心，也就是正文的内容，需要将相对于浏览器视口居中

版心使如何实现呢

代码展示

*{ margin:0; padding: 0;}/*版心样式*/.wrapper{  width: 1200px; margin: 0 auto;}.box{ height: 50px; background-color: grey;}.phone{ background-color: orange; height: 100px;}.bottom{ background-color: grey; height: 100px;}/* html代码*/<div class="wrapper box"></div><div class="phone wrapper"></div><div class="bottom wrapper"></div>

我们要先了解到版心的宽度是多少，这里我们假设使1200px，我们需要使他居中，margin的有一个属性值叫auto，也就是让我们的块自适应到居中的位置，这里设置margin：0 auto；margin的组合还记得吧，上下的margin值为0，左右自适应。

一些元素（标签）具有相同的样式效果时，我们可以给他们设置同一个类名，把相同的样式属性设置到这个类名，减少代码，不必要写很多一样的代码，节省时间。

页面效果图

动手尝试一下吧

感谢你的阅读，你们的学习是我继续讲解的动力，加油！