• 当前标签:康桥

程序开发 H5学习之制作房地产的一个展示页面:康桥

这个的图片长了,想看效果的下载素材看,下面放一个响应式设计模式下的效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>康桥</title> <style> body{ margin: 0; } img{ width: 100%; display: block; } a{ display: block; position: relative; } span{ position: absolute; top: 30px; display: block; color: white; background-color: rgba(51, 0, 51, 0.7); width: 135px; font-size: 20px; line-height: 45px; text-align: center; /*单独给某个角设置角度*/ border-top-right-radius: 20px; border-bottom-left-radius: 20px; } </style> </head> <body> <a href="康桥溪里.html"> <!--title里面的内容是鼠标指针放上去的时候显示的内容--> <img src="image/yxl.jpg" alt="万科.美景堂" title="万科.美景堂"> <span>万科.美景堂</span> </a> <a href=""> <img src="image/jxj.jpg" alt="万科.美龙堂" title="万科.美龙堂"> <span>万科.美龙堂</span> </a> <a href=""> <img src="image/lxw.jpg" alt="万科.观景堂" title="万科.观景堂"> <span>万科.观景堂</span> </a> </body> </html> 还有一个页面: <html> <head> <meta charset="UTF-8"> <title>康桥溪里</title> <link rel="stylesheet" href="animate.css"> <style> body{ margin: 0; } ul{ position: absolute; bottom: 30px; margin: 0; padding: 0; } a{ /*去除超链接下的下划线*/ text-decoration: none; background-color: rgba(16, 16, 16,0.7); line-height: 250%; padding-left: 15px; padding-top: 10px; padding-bottom: 8px; color: white; margin-top: 5px; background-image: url(image/right-arrow.png); /*防止出现重复*/ background-repeat: no-repeat; background-size: 8px 15px; background-position: 95% center; border-top-right-radius: 20px; border-bottom-left-radius: 20px; } li:nth-child(1) a{ padding-right: 60px; animation-delay: 0.5s; } li:nth-child(2) a{ padding-right: 90px; animation-delay: 1s; } li:nth-child(3) a{

2017-03-13 20:33:36 64 0 0
阅读详情
  • 1
前往