公司展示网站模板app推广的常用方法
实现以下效果：
首先分析以下，该页面有四部分组成，分别是最底部的大盒子（子绝父相这里父亲设为相对定位），然后左右各一个链接a（绝对定位），下面用ul+li来做（相对定位）
html：
<body><div class="tb-promo"><img src="images/tb.jpg" alt=""><!-- 左侧按钮制作 --><a href="#" class="prev"><</a><!-- 右侧按钮制作 --><a href="#" class="next">></a><!-- 小圆点 --><div class="promo-nav"><ul><li class="selected"></li><li></li><li></li><li></li><li></li></ul></div></div>
</body>
css：
<style>/* 下面有ul所以清除格式化的内外边距 */* {margin: 0;padding: 0;}li {list-style: none;}.tb-promo {position: relative;width: 520px;height: 280px;/* background-color: pink; */margin: 100px auto;}/* 下面这样做的目的是为了让图片维持原有尺寸 */.tb-promo img {width: 520px;height: 280px;}/* 因为两个标签涉及到很多相似的地方，这里合并代码，记住这种写法！！！ */.prev,.next {position: absolute;top: 50%;margin-top: -15px;width: 20px;height: 30px;background: rgb(0, 0, 0, .3);text-align: center;text-decoration: none;line-height: 30px;color: #fff;}.prev {left: 0;border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.next {right: 0;border-top-left-radius: 15px;border-bottom-left-radius: 15px;background: rgb(0, 0, 0, .3);}.promo-nav {position: absolute;width: 70px;height: 13px;left: 50%;margin-left: -35px;bottom: 10px;background: rgb(255, 255, 255, .3);border-radius: 7px;}.promo-nav ul li {float: left;width: 8px;height: 8px;background-color: #fff;border-radius: 4px;margin: 3px;}.promo-nav ul .selected {background-color: #ff5500;}</style>
在最后来补充一点，就是如果一个盒子既有left又有right属性，则会默认执行left选项，而如果一个盒子既有top又有bottom属性，则会执行top。
到此为止，今天学习结束，明天又是一条好汉，加油上岸，886!