* 背景属性值
属性值 属性值 描述
background-color d单侧颜色法,RGB,十六进制 s设置元素的背景颜色
background-image url(“wy.png”) 给一个元素设置一个或多个背景图像
background-position top,left,center,百分比,px 为每一个背景图片设置初始位置
background-repreat repeat-x repeat-y
* background-image设置背景图片 <!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <title>Title</title> <style> .bg{ width: 400px; height: 400px;
border:1px solid blue; background-image:url("wy.jpg") } </style> </head> <body>
<div class="bg"></div> </body> </html>
*
background-repeat背景图像

* 属性值:
数值值 描述
repeat 默认值。表示背景图水平和垂直方向都平铺
no-repeat 表示背景图水平和处置方向都不平铺
repeat-x 表示背景图只有水平方向上平铺
repeat-y 表示背景图只有垂直方向上平铺
点击领取免费资料及课程 <https://jq.qq.com/?_wv=1027&k=5s2wUxY>
.bg{ width: 1000px; height: 1000px; border:1px solid blue;
background-image:url("sj6.jpg"); background-repeat:repeat-x;/*沿着轴方向平铺*/ }
*
bacground-position背景图定位

*
语法:
background-position:x y; background-position:position position
*
取值
关键字取值: top ,right,bottom,left,center 长度值取值: px,em 百分比: 50%
*
示例
background-position:0 0; /*左上角显示*/ background-position:top right; /*背景图像在右上角*/
background-position:top center; /*背景图像上方居中显示*/ background-position:center
center;/*背景图像居中显示*/
* 设置长度单位:

background-position:50px 100px;
* 设置为负值: background-position:-20px -30px;
<>2.雪碧图

* CSS雪碧图技术:即CSS
Sprite,也有人叫它CSS精灵图,是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

点击领取免费资料及课程 <https://jq.qq.com/?_wv=1027&k=5s2wUxY>

* 优点:
* 有效的减少HTTP请求数量
* 加速内容
* 雪碧图的实现原理
* 它通过css的背景属性的backrground-position的来控制雪碧图的显示。
* 控制一个层,可显示的区域范围大消息,通过一个窗口,进行背景图的移动。
<>3.border-radius

* 传统的圆角生成方案,必须使用多张图片作为背景图案。css3的出现,使得我们再也不必浪费时间去制作这些图片,并且还有其他多个优点:
* 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。
* 提高网页性能。由于不必再发出多条的HTTP请求,网页的载入速度将变快
* 增加视觉可靠性。(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况。 <!DOCTYPE
html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<style> .bor-radius{ width: 400px; height: 400px; border-radius:20px;
background-color: red; } </style> </head> <body> <div class="bor-radius"></div>
</body> </html>
*
显示效果如下:



*
单角设置:

*
border-top-left-radius

*
border-top-right-radius

*
border-bottom-right-radius

*
border-bottom-left-radius

*
示例:
border-bottom-left-radius:


*
border-radius效果实现一个无边框圆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Title</title> <style> .cicle{ width: 200px; height: 200px;
background-color: red; border-radius:50%; } </style> </head> <body> <div
class="cicle"></div> </body> </html>
*
制作一半的圆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Title</title> <style> .cicle{ width: 200px; height: 100px;
background-color: red; border-top-left-radius: 100px; border-top-right-radius:
100px; } </style> </head> <body> <div class="cicle"></div> </body> </html>

点击领取免费资料及课程 <https://jq.qq.com/?_wv=1027&k=5s2wUxY>

<>4.盒子阴影

*
通过box-shadow属性设置元素的阴影

*
语法:
box-shadow: h-shadow v-shadow blur color inset;
值 描述
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。 .bg{ width: 400px; height: 400px; border:1px
solid blue; background-image:url("sj6.jpg"); background-repeat:no-repeat;
background-position:50px 100px; box-shadow:5px 5px 20px red; }
<>6.网页中规范和错误问题

* css命名规范:
点击领取免费资料及课程 <https://jq.qq.com/?_wv=1027&k=5s2wUxY>

*
项目目录规范:



*
确定错误位置

* 假如错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。这样我们可以更精准的找到错误点,进行排错。
*
是否重设了默认的样式?

* 制作网页时,我们要清除掉默认的元素的padding和margin,使得我们更易去计算盒模型的大小。

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信