边界圆角 盒模型布局 图片背景 精灵图
Posted yanhui1995
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了边界圆角 盒模型布局 图片背景 精灵图相关的知识，希望对你有一定的参考价值。
常用标签的使用:
直接举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用标签的使用</title>
<style type="text/css">
.img{
/*根据需求,是指定高还是指定宽,设置一个,另一个会等比缩放*/
/*widows: 200px;*/
height: 100px;
}
a{
color: #333;
text-decoration: none;
}
/*ul的reset操作*/
ul{
margin: 0;
padding: 0;
list-style: none;
/*margin-left: 40px;*/
}
</style>
</head>
<body>
<!-- 1.设置锚点:锚点名page_top -->
<a href="" name="page_top"></a>
<img class="img" src="./img/tmg.png" >
<a href="00_复习预习.html">复习预习</a>
<!-- 前往本页面中的某一个位置:Top => 锚点 -->
<br>
<div id="t_123"></div>
<a href="#t_123">123</a>
<a href="#page_top">Top</a>
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
</body>
</html>
边界圆角:
举例应用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边界圆角</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
}
.box{
/*边界圆角*/
/*百分比控制*/
border-radius: 50%;
/*实际像素控制*/
border-radius: 20px;
/*横纵分离控制 横 | 纵*/
border-radius: 20px / 50%;
/*左上为第一个角,顺时针赋值,无值的找对角*/
/*左上横30px 右上横100px 右下=左上 左下=右上,四角纵向全是50%*/
border-radius: 30px 50px/50%;
/*单独设置时,横向 纵向*/
border-top-left-radius: 70% 100%;
border-top-right-radius: 50% 90%;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
背景样式:
举例应用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style type="text/css">
.box, .wrap{
width: 200px;
height: 200px;
background-color: orange;
/*图片过小会平铺*/
background-image: url(img/tmg.png);
/*repeat-x; repeat-y; repeat; no-repeat*/
background-repeat: no-repeat;
/*位置 (定位):可以具体数值,而可以写位置单词*/
background-position: 10px center;
background-position: right bottom;
background-position: center center;
/*设置一个值的时候,控制的是x轴,y轴取center*/
/*设置两个值时,第一个值控制x,第二个控制y*/
background-position: 10px 40px;
/*整体设置*/
background: url(img/tmg.png) red no-repeat 50px 50px;
}
.wrap{
/*图片过大会显示不全*/
background-image: url(img/tmg.png);
/*规定背景图片显示尺寸*/
background-size: 200px 200px;
}
/*注: 实际开发中,资源图片的大小一定要与显示区域等大*/
</style>
</head>
<body>
<img src="img/tmg.png" >
<div class="box"></div>
<div class="wrap"></div>
</body>
</html>
精灵图(重点):
直接举例应用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精灵图</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.box{
width: 1210px;
height: 100px;
border: 5px solid black;
}
.box{
background-image: url(img/bg.png);
background-position: 0 -150px;
}
.box:hover{
cursor: pointer;
background-position: 0 -250px;
}
/*1.显示区域一定要与精灵图目标小图大小一致*/
/*2.通过背景图片定位方式将目标小图移动到显示位置*/
</style>
<style type="text/css">
.lt1{
width: 155px;
height: 48px;
background: url(img/bg.png) no-repeat;
}
.lt1:hover{
cursor: pointer;
background-position: 0 -48px;
}
</style>
</head>
<body>
<!-- 精灵图:各种小图拼接起来的一张大图 -->
<!-- 为什么要使用精灵图:减少请求次数,降低性能的消耗,
二次加载图片资源时极为迅速(不再需要发送请求) -->
<div class="box"></div>
<div class="lt1"></div>
</body>
</html>
盒模型布局细节:
直接举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型布局细节</title>
<style type="text/css">
.sup{
width: 500px;
height: 100px;
background: orange;
}
.sub{
width: 50px;
height: 50px;
background-color: red;
}
/*sub再sup中 水平居中*/
.sub{
/*margin-right: auto;
margin-left: auto;*/
margin:0 auto;
}
/*sub再sup中 垂直居中*/
.sub{
/*这样会父子(第一子)联动*/
margin-top: 25px;
}
/*解决一:设置父级的border-top*/
.sup{
border-top: 1px solid transparent;
height: 99px;
}
/*解决二:设置padding_top*/
.sup{
padding-top: 1px;
height: 99px;
}
/*margin坑: 上兄弟margin-bottom与下兄弟,margin-top重合*/
/*解决方案:只设置一个,建议设置兄弟margin-top*/
/*margin布局:下盒子的垂直起始位置决定于同结构中上盒子的margin借宿位置;水平其实位置就是父级content最左侧*/
</style>
</head>
<body>
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
盒模型案例:
举例应用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型案例</title>
<style type="text/css">
body,h1,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
color: #333;
text-decoration: none;
}
</style>
<style type="text/css">
.main{
width: 1210px;
height: 500px;
background-color: orange;
margin: 0 auto;
}
.nav{
width: 1210px;
margin: 0 auto;
height: 48px;
}
.nav_a{
/*a标签就支持宽高,并且可以嵌套其他标签*/
display: block;
height: 48px;
background: red;
}
/*查找li下的第一个 nav_a的*/
li:first-child .nav_a{
background: blue;
width: 155px;
}
li:nth-child(2) .nav_a{
background: pink;
width: 150px;
margin-left: 155px;
margin-top: -48px;
}
li:nth-child(3) .nav_a{
background: red;
width: 100px;
margin-left: 305px;
margin-top: -48px;
}
</style>
</head>
<body>
<!-- ul.nav>(li>a)*7 -->
<ul class="nav">
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
</ul>
<div class="main"></div>
</body>
以上是关于边界圆角 盒模型布局 图片背景 精灵图的主要内容，如果未能解决你的问题，请参考以下文章