前端学习笔记（一）--css控制背景与css精灵、css浮动技术

最新推荐文章于 2022-07-17 19:33:14 发布

携星河赠你

最新推荐文章于 2022-07-17 19:33:14 发布

阅读量535

点赞数

分类专栏：破阵子·Web 文章标签：前端 HTML CSS

本文链接：https://blog.csdn.net/Xiaotongbiji/article/details/79652524

版权

本文详细介绍了CSS如何控制背景，包括背景图片定位、依附方式以及CSS精灵技术，同时深入讲解了CSS浮动布局，如文档流、浮动布局和定位布局，通过实例代码演示了常见布局效果，帮助理解并掌握这些前端基础技术。

摘要由CSDN通过智能技术生成

一、css控制背景

背景图片，默认情况下是平铺的，并且在左上角；、

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>css控制背景与css精灵</title>
  <style type="text/css">
  body,div{margin:0;padding:0;}
  body{padding:100px;}
  #tok{width:700px;
  height:700px;
  background-color:gold;
  background-image:url(images/timg.jpg);
  }
  </style>
 </head>
 <body>
  <div id="tok">div 默认是个块元素，很霸道，独占一行</div>
 </body>
</html>

 background-repeat:no-repeat;
  background-position:center center;

（2）、除了上述用几个单词进行定位外，还可以直接用数值来定位；

/*background-position:center center;*/
  background-position:100px 200px;

（3）、设置图片是否随框移动或者固定（默认是滚动的）

图片的依附方式：固定的含义：将图片固定在屏幕（可视区域）的某个位置；用background-attachment属性实现；

/*background-position:center center;*/
  /*background-position:100px 200px;*/
   background-attachment:fixed;

兼容性：IE6只有HTML和body两个元素，支持这个属性值；

（4）、接下来介绍一种让你显得专业一点的技巧：

翻转效果：其实思路就是准备两张大小相同、内容不同的图片，正常情况下显示一张，鼠标经过的时候显示另一张。如下所示：

：link 伪类，表示一种状态

a{
		  width:88px;
		  height:44px;
		  display:block;
		 /* background:#ECECED;*/
		background:url(images/link.png) no-repeat;
  }
   a:hover{

 <body>
  <a href="#"></a>
  <a href="#" id="btn"></a>
 </body>

最低0.47元/天解锁文章

携星河赠你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记（一）--css控制背景与css精灵、css浮动技术

一、css控制背景背景图片，默认情况下是平铺的，并且在左上角；、&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt;
复制链接

扫一扫

专栏目录