标签：11 repeat height width background images h5 margin
背景色 background-color
dashed实线
透明度
文字不透明
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
/*背景色 rgb() rgba() 透明不影响内容 a透明度 */
background-color: rgba(255,0,0,.5); /*0.5其中0可以省略*/
border: 10px dashed blue;
}
</style>
<div class="box">hjhjh</div>
文字透明
1 <style>
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 .box{
7 width: 200px;
8 height: 200px;
9 background-color: rgb(255,0,0);
10 opacity: 0.5; /*让整个盒子包括文字内容都会起作用*/
11 border: 10px dashed blue;
12 }
13
14 </style>
简易导航栏
导航一般使用列表制作
1 <style>
2 * {
3 margin: 0;
4 padding: 0;
5 }
6
7 ul {
8 list-style: none;
9 }
10
11 .nav {
12 width: 960px;
13 height: 40px;
14 margin: 100px auto;
15 }
16
17 .nav ul {
18 overflow: hidden;
19 /*溢出隐藏*/
20 }
21
22 .nav ul li {
23 float: left;
24 width: 120px;
25 height: 40px;
26 font-size: 18px;
27 font-family: "Microsoft Yahei";
28 line-height: 40px;
29 text-align: center;
30 }
31
32 .nav ul li a {
33 display: block;
34 /*改为块状元素*/
35 background-color: #ccc;
36 color: #666;
37 text-decoration: none;
38 /*规定添加到文本的修饰，下划线、上划线、删除线等，此处为空*/
39 }
40
41 .nav ul li a:hover {
42 background-color: yellowgreen;
43 color: #fff;
44 font-weight: bold;
45 /*字体粗细：粗体*/
46 }
47 </style>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
background-image背景图片
1 <style>
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 .box{
7 width: 400px;
8 height: 500px;
9 padding: 10px;
10 background-color: #ccc;
11 /*背景图 默认会从左上角显示 会水平或者垂直平铺 padding区域有背景图*/
12 background-image: url(images/in_12.jpg);
13 /* background: #ccc url(images/in_12.png); */
14 border: 10px dashed blue;
15 }
16
17 </style>
<div class="box"></div>
图片在div内平铺
background可合并为
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 500px;
/*background-color: #ccc;
background-image: url(images/in_12.png);*/
background:url(images/in_12.jpg) #ccc;
/*background-repeat: repeat; 默认就是平铺*/
/* background-repeat: no-repeat; 两个方向不平铺*/
/* background-repeat: repeat-x; 只平铺水平方向*/
/* background-repeat: repeat-y; 只平铺垂直方向*/
border: 10px dashed blue;
}
</style>
与上图效果相同
建议导航栏-----渐变背景
将渐变线条平铺在块内
1 <style>
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 ul{
7 list-style:none;
8 }
9 .nav{
10 width: 960px;
11 height: 40px;
12 margin: 100px auto;
13 }
14 .nav ul{
15 overflow: hidden;
16 }
17 .nav ul li{
18 float: left;
19 width: 120px;
20 height: 40px;
21 font-size: 18px;
22 font-family: "Microsoft Yahei";
23 line-height: 40px;
24 text-align: center;
25 }
26 .nav ul li a{
27 display: block;
28 /*width: 120px;
29 height: 40px;*/
30 background-image: url(images/jbbg.jpg);
31 background-repeat: repeat-x;
32 /* background-repeat: no-repeat; */
33 color: #FFF;
34 text-decoration: none;
35 }
36 .nav ul li a:hover{
37 background-image: url(images/jbbg2.jpg);
38 color: #fff;
39 font-weight: bold;
40 }
41 </style>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
background-position表示方法 （图像定位）
1、单词表示法
1 <style>
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 .box{
7 width: 400px;
8 height: 500px;
9 background: #ccc url(images/jbbg.jpg);
10 background-repeat: no-repeat;
11 /*
12 背景图定位 水平方向 垂直方向
13 默认 left top
14 水平 left/center/right
15 垂直 top/center/bottom
16 */
17 background-position:right top;
18 /* background-position:center center; */
19 border: 10px dashed blue;
20 }
21
22 </style>
<div class="box"></div>
2、像素表示法
1 <style>
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 .box{
7 width: 400px;
8 height: 500px;
9 background: #ccc url(images/1.jpg);
10 background-repeat: no-repeat;
11 /* 100px 表示水平向右移动100px 150px 表示垂直向下移动150px*/
12 background-position: 100px 150px;
13 /* background-position: -100px -150px; */
14 border: 10px solid blue;
15 }
16
17 </style>
<div class="box"></div>
百分比表示法
1 <style>
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 /*
7 素材 234*248
8 */
9 .box{
10 width: 400px;
11 height: 400px;
12 border: 3px solid red;
13 background-image: url(images/meng.jpg);
14 background-repeat: repeat;
15 /* 盒子的宽-图片的宽 看成100%*/
16 background-position: 30% 50%;
17 }
18 </style>
<div class="box"></div>
background-position的body大背景
1 <style>
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 body{
7 background: url(images/c3.jpg) no-repeat center top #000;
8 }
9 /*.box{*/
10 /* width: 400px;
11 height: 400px;
12 border: 3px solid red;
13 background-image: url(images/meng.jpg);
14 background-repeat: no-repeat;
15 background-position: 30% 50%;
16 }*/
17 </style>
<div class="box"></div>
background-attachment 背景图片固定
1 <style>
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 body{
7 background:fixed #fff url(images/c4.jpg) no-repeat 50% 0;
8 /* background-attachment: fixed; fixed表示背景图固定 */
9 /* background: #fff url(images/c4.jpg) no-repeat 50% 0; */
10
11
12 }
13 .box{
14 width: 100px;
15 height: 100px;
16 background: yellowgreen;
17 margin-bottom: 20px;
18 }
19 </style>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
1 <style>
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 body{
7 /* background:fixed #fff url(images/c4.jpg) no-repeat 50% 0; */
8 /* background-attachment: fixed; fixed表示背景图固定 */
9 background: #fff url(images/c4.jpg) no-repeat 50% 0; /*默认时*/
10
11
12 }
13 .box{
14 width: 100px;
15 height: 100px;
16 background: yellowgreen;
17 margin-bottom: 20px;
18 }
19 </style>
标签：11,repeat,height,width,background,images,h5,margin 来源： https://www.cnblogs.com/qianfur/p/12443049.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。