免费个人自助建站,网站 备案 中国 名字吗,门户网站建设有哪些界面设计风格,凡科建的网站怎么做seo实现以下效果#xff1a; 首先分析以下#xff0c;该页面有四部分组成#xff0c;分别是最底部的大盒子#xff08;子绝父相这里父亲设为相对定位#xff09;#xff0c;然后左右各一个链接a#xff08;绝对定位#xff09;#xff0c;下面用ulli来做#xff08;相对…实现以下效果 首先分析以下该页面有四部分组成分别是最底部的大盒子子绝父相这里父亲设为相对定位然后左右各一个链接a绝对定位下面用ulli来做相对定位 html
bodydiv classtb-promoimg srcimages/tb.jpg alt!-- 左侧按钮制作 --a href# classprevlt;/a!-- 右侧按钮制作 --a href# classnextgt;/a!-- 小圆点 --div classpromo-navulli classselected/lili/lili/lili/lili/li/ul/div/div
/bodycss 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!
