css background各种属性练习
程序员文章站
2022-05-27 09:34:03
...
文中素材出自尚硅谷李立超讲师,看完视频后自己实验记录下。偷懒没有仔细整理,其实用了好几个知识点一块写的。留存,同时感谢尚硅谷的分享!
<!--background属性应用 overflow属性 浮动 position属性-->
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!--<link rel="stylesheet" type="text/css" href="">-->
<style type="text/css">
body{
background:url('2.jpg') no-repeat center fixed;
/*背景图片 repeat:norepeat不延展 position:居中
attachment:fixed 背景图片固定:*/
}
.box{
width:200px;
height:800px;
float:left;
}
.main{
font:25px/35px '楷体';/*字体/行高*/
letter-spacing:2px;/*行间距*/
text-indent:2em;/*设置首行缩进*/
}
.box2{
float:right;
position:absolute;
right:0px;
top:0px;
position:fixed;
}
.main-right{
width:200px;
height:200px;
overflow:scroll;
}
a:link{
background-image:url('btn2.png') ;/*雪碧图三个图片默认会显示左上角的图片所以不设置position*/
width:93px;
height:29px;
float:right;/*浮动后脱离文档流*/
margin:250px 30px 0 0;
/*br占50px*/
}
a:hover{
background-position:-92px 0px;
}
a:active{
background-position:-184px 0px;
}
</style>
</head>
<body>
<div class="box">
<p class="main">
突然想谈谈人生,我们面对人生毫无反击之力。
人生价值就好比一条曲线,这条曲线是向上爬行还是向下跌落都取决与你是否认识到努力的重要性。如果不努力前行或安于现状,结果肯定是曲线向下行走直到跌落谷底而你却毫不自知。还要抱怨世道不公,怪别人给予的太少,怪机会不够多。<br/>
而实际情况却是,你不努力谁都帮不了你。有句话说的很好,不是因为你认识了某个人而牛逼,而是你牛逼了之后才认识了某个人。<br/>
怎么样努力使自己进步呢?盲目的努力只能是徒劳,努力是找准自己努力的方向,定下目标,奋力前行。<br/>
合理规划自己的时间,珍惜每一分每一秒。
对于时间大都有两种用法。<br/>
一种是消磨,感觉无事可做。没事消磨时间,刷刷视频,打打游戏。<br/>
另一种就是好好利用时间做一些有意义的事情,好比学学英语,阅读文章增长见识,抑或是抽空提升自己的专业技能。<br/>
短时间内两种人的人生不会有太大区别,可能消磨时间的人比好好利用时间的人过得更自在,更滋润。可能坚持时间长了,过了很多年之后才会有明显差距。我相信即使不久的将来两人过得差不多,在精神层面上消磨时间的人绝对比不上利用时间的人。
<br/>
每个人都在嘴边挂着一句:我没空。其实我想说的是,只要你想做,你肯定有空。
希望不要到那一步了才后悔自己当初走过的路。<br/>
对于工作你是必须要做,并且要做好的,因为有一家的人等着你去养。<br/>
总是感觉工作太累,下班后根本没有精力没有能力去做自己想做的能提升自己的事情。
告诉家人自己的压力,家里人说不要活的那么累,歇歇吧。不要学了!<br/>
可是我不想我的人生顺着这条直线一直走下去,走到能够看到的尽头。<br/>
我能够想象的到自己甘于平庸,碌碌无为二十年之后的自己。却没人能够理解我的苦心,难道是我想多了?<br/>
顾好当下自然是没错,谁都不想受苦,受穷。可是目光短浅,只注重当下容易迷失自己。
车到山前必有路,船到桥头自然直。<br/>
只想对自己说:千万不要放弃自己,好好学习,天天向上。机会是留给有准备的人的。
不要等机会来了,才明白自己已经没有能力去把握了。<br/>
希望能够有一份好的工作既能收入颇丰养家糊口,又能抽空提升自己的能力。
朋友们我也想送给你们一句: 种一棵树最好的时间是十年前,其次就是现在。想做什么就去做吧,不要等到以后后悔!
<br/>
共勉朋友们。
</p>
</div>
<div class="box2">
<p class=" main main-right">
突然想谈谈人生,我们面对人生毫无反击之力。
人生价值就好比一条曲线,这条曲线是向上爬行还是向下跌落都取决与你是否认识到努力的重要性。如果不努力前行或安于现状,结果肯定是曲线向下行走直到跌落谷底而你却毫不自知。还要抱怨世道不公,怪别人给予的太少,怪机会不够多。<br/>
而实际情况却是,你不努力谁都帮不了你。有句话说的很好,不是因为你认识了某个人而牛逼,而是你牛逼了之后才认识了某个人。<br/>
怎么样努力使自己进步呢?盲目的努力只能是徒劳,努力是找准自己努力的方向,定下目标,奋力前行。
合理规划自己的时间,珍惜每一分每一秒。
对于时间大都有两种用法。<br/>
一种是消磨,感觉无事可做。没事消磨时间,刷刷视频,打打游戏。
<br/>
另一种就是好好利用时间做一些有意义的事情,好比学学英语,阅读文章增长见识,抑或是抽空提升自己的专业技能。
<br/>
短时间内两种人的人生不会有太大区别,可能消磨时间的人比好好利用时间的人过得更自在,更滋润。可能坚持时间长了,过了很多年之后才会有明显差距。我相信即使不久的将来两人过得差不多,在精神层面上消磨时间的人绝对比不上利用时间的人。
<br/>
每个人都在嘴边挂着一句:我没空。其实我想说的是,只要你想做,你肯定有空。
希望不要到那一步了才后悔自己当初走过的路。
<br/>
对于工作你是必须要做,并且要做好的,因为有一家的人等着你去养。
总是感觉工作太累,下班后根本没有精力没有能力去做自己想做的能提升自己的事情。
告诉家人自己的压力,家里人说不要活的那么累,歇歇吧。不要学了!
<br/>
可是我不想我的人生顺着这条直线一直走下去,走到能够看到的尽头。
<br/>
我能够想象的到自己甘于平庸,碌碌无为二十年之后的自己。却没人能够理解我的苦心,难道是我想多了?
<br/>
顾好当下自然是没错,谁都不想受苦,受穷。可是目光短浅,只注重当下容易迷失自己。
<br/>
车到山前必有路,船到桥头自然直。
只想对自己说:千万不要放弃自己,好好学习,天天向上。机会是留给有准备的人的。
不要等机会来了,才明白自己已经没有能力去把握了。
<br/>
希望能够有一份好的工作既能收入颇丰养家糊口,又能抽空提升自己的能力。
<br/>
朋友们我也想送给你们一句: 种一棵树最好的时间是十年前,其次就是现在。想做什么就去做吧,不要等到以后后悔!
<br/>
</p>
<!--利用background标签position属性实现按钮功能-->
</div>
<a href="#"></a>
</body>
</html>
推荐阅读
-
在css3中background-clip属性与background-origin属性的用法介绍
-
CSS的background属性及CSS3的背景图片设置总结
-
CSS3中各种颜色属性的使用教程
-
css3中background新增的4个新的相关属性用法介绍
-
在css3中background-clip属性与background-origin属性的用法介绍
-
css设置全屏背景图,background-size 属性
-
CSS的background属性及CSS3的背景图片设置总结
-
CSS3中各种颜色属性的使用教程
-
CSS3属性background-size使用指南
-
css3中background新增的4个新的相关属性用法介绍