折腾:
【未解决】基于html5up-landed的html5模板搭建网站主页
期间,继续去弄详情页。
先去加第一个菜单 达芬奇培训
看了下,适合用:
no sidebar的作为基础,去修改
代码:
<!-- Main --> <div id="main" class="wrapper style1"> <div class="container"> <header class="major"> <h2>达芬奇培训介绍</h2> <p>xxx</p> </header> <!-- Content --> <section id="content"> <!-- <a href="#" class="image fit"><img src="images/pic07.jpg" alt="" /></a> --> <h3>达芬奇调色零基础假期班</h3> <p>时长:7天</p> <p>学费:xxx(不含食宿)</p> <ul> <li>1. 人像调色</li> xxx <li>17. 全球主要地域影像色彩特点剖析</li> </ul> <p>xxx</p> <h3>课程硬件介绍</h3> <p>xxx</p> </section> </div> </div> 。。。 <!-- Footer --> <footer id="footer"> <!-- <ul class="icons"> <li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li> <li><a href="#" class="icon alt fa-linkedin"><span class="label">LinkedIn</span></a></li> <li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li> <li><a href="#" class="icon alt fa-github"><span class="label">GitHub</span></a></li> <li><a href="#" class="icon alt fa-envelope"><span class="label">Email</span></a></li> </ul> --> <ul class="copyright"> <!-- <li>© Untitled. All rights reserved.</li><li>Design: <a href=" http://html5up.net ">HTML5 UP</a></li> --> <li>© xxx</li><li>电话:xxx | 地址:xxxx</li> </ul> </footer>
效果:
继续弄其他几个页面
另外继续:
弄每个老师的介绍:
不过加上链接后,发现图片底部有个红色的线:
所以去找找,如何去掉。
html img add href
是这么写的。
或许抽空去试试:
set a div with a background image of your image and then a link inside there, make the link display : block and make it the entire width and height of the div and the whole thing will be clickable.
能否去掉红线
去找找原因
感觉是这部分的颜色:
去找找css
或color
border-bottom-color: none;
结果语法报错:
invalid property value
换成父级元素试试
<a href="teacher_weipeng.html" class="teacher_parent"> <img class="teacher" src="images/teacher_weipeng.png" />
和css
.teacher_parent{ border-bottom-color: none; }
结果:错误依旧。
算了。
然后继续弄其他页面:
以及其他几位老师:
即可。
【总结】
基于html5up-landed的no-sidebar.html为模板,修改了内容后,基本上满足详情页的效果了。