代碼
<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;/*轉(zhuǎn)換*/
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;
}
結(jié)果
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;
}
結(jié)果
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%;/*固定定位的盒子一定寫上寬和高餐抢，除非有內(nèi)容撐開不用寫*/
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;
}
結(jié)果
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;
}
結(jié)果
image.png
代碼
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<div>穩(wěn)住匙头，定位不難炒刁，我們能贏</div>
<span>我是行內(nèi)塊元素</span>
css代碼
div {
height: 100px;
background-color: pink;
/* float: left;浮動的盒子有模式轉(zhuǎn)換的問題 轉(zhuǎn)換為行內(nèi)快 寬度為內(nèi)容的寬度*/
/*position: fixed;元素添加了 絕對定位和固定定位之后，元素模式也會發(fā)生轉(zhuǎn)換水醋，都轉(zhuǎn)換為行內(nèi)塊元素*/
}
span {
background-color: purple;
/*display: block;*/
width: 100px;
height: 100px;
float: left;/*如果盒子本身就需要添加浮動后者絕對固定定位就不需要轉(zhuǎn)換了*/
}
結(jié)果
image.png
