代码
<link rel="stylesheet" href="css/style.css">
<title>淘宝</title>
</head>
<body>
<div class="slider">
<img src="images/taobao.jpg" alt="">
<a href="#" class="arrow-l"><img src="images/left.jpg" width="24px" height="36"></a>
<a href="#" class="arrow-r"><img src="images/right.jpg" width="24px" height="36"></a>
<ul class="circle"><!--小圆点-->
<li class="current"></li><!--current当前的意思-->
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<hr>
css代码
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;/*取消小圆点*/
}
body {
height: 3000px;
}
.slider {
width: 520px;
height: 280px;
background-color: pink;
margin: 50px auto;
position: relative;/*子绝父相*/
}
.arrow-l,
.arrow-r {
width: 24px;
height: 36px;
position: absolute;/*绝对定位*/
display: block;/*转换*/
top: 50%;
margin-top: -18px;
}
.arrow-l {
left: 0;
}
.arrow-r {
right: 0;
}
.circle {
width: 65px;
height: 13px;
background-color: rgba(255, 255, 255, 0.2);/*盒子北京半透明*/
position: absolute;
bottom: 15px;/*因为是底对齐*/
left: 50%;
margin-left: -32.5px;
border-radius: 6px;
}
.circle li {
width: 9px;
height: 9px;
background-color: grey;
float: left;
margin: 2px;
border-radius: 50%;/*圆角的做法*/
}
.circle .current{
background-color: #ff4400;
}
结果
image.png
代码
<link rel="stylesheet" href="css/style.css">
<title>固定定位</title>
</head>
<body>
<div class="abc">
<img src="images/bj.jpg" width="100px" height="100px" alt="">
</div>
css代码
body {
height: 3000px;
}
.abc {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
position: relative;
}
img {
position: fixed;/*固定定位*/
top: 0;
right: 0;
}
结果
image.png
代码
<link rel="stylesheet" href="css/style.css">
<title>新浪</title>
</head>
<body>
<div class="top"></div>
<div class="ad-l"><img src="images/left.png" alt=""></div>
<div class="ad-r"><img src="images/right.png" alt=""></div>
<div class="box">
<img src="images/wy.png" width="1254" height="882" alt="">
</div>
css代码
* {
margin: 0;
padding: 0;
}
.top {
width: 100%;/*固定定位的盒子一定写上宽和高，除非有内容撑开不用写*/
height: 57px;
background: url("../images/top.png") no-repeat top center;
position: fixed;/*固定定位*/
top: 0;
left: 0;
}
.box {
width: 1254px;
height: 882px;
margin: 44px auto;
}
.ad-l,
.ad-r {
position: fixed;
top: 100px;
}
.ad-l {
left: 0;
}
.ad-r {
right: 0;
}
结果
image.png
image.png
代码
<link rel="stylesheet" href="css/style.css">
<title>叠加属性</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
css代码
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;/*绝对定位*/
top: 0;
left: 0;
}
div:first-child {
z-index: 1;
}
div:nth-child(2) {
background-color: purple;
top: 30px;
left: 30px;
z-index: 2;
}
div:last-child {
background-color: skyblue;
top: 60px;
left: 60px;
}
结果
image.png
代码
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<div>稳住，定位不难，我们能赢</div>
<span>我是行内块元素</span>
css代码
div {
height: 100px;
background-color: pink;
/* float: left;浮动的盒子有模式转换的问题 转换为行内快 宽度为内容的宽度*/
/*position: fixed;元素添加了 绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块元素*/
}
span {
background-color: purple;
/*display: block;*/
width: 100px;
height: 100px;
float: left;/*如果盒子本身就需要添加浮动后者绝对固定定位就不需要转换了*/
}
结果
image.png
