折腾:
【未解决】基于html5up-landed的html5模板搭建网站主页
期间,继续去弄详情页。
先去加第一个菜单 达芬奇培训
![](https://www.crifan.com/files/pic/uploads/2021/05/10062daf8d094e55b944ab5a75feff9c.jpg)
看了下,适合用:
![](https://www.crifan.com/files/pic/uploads/2021/05/7474e991775d4d9685b108b35d555395.jpg)
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>
效果:
![](https://www.crifan.com/files/pic/uploads/2021/05/ae6dbc8e932f45eb8ebf4f512c0179ad.jpg)
继续弄其他几个页面
![](https://www.crifan.com/files/pic/uploads/2021/05/0285f1dc883645f39cffffc11003536e.jpg)
另外继续:
弄每个老师的介绍:
不过加上链接后,发现图片底部有个红色的线:
![](https://www.crifan.com/files/pic/uploads/2021/05/d30eb07b1a524094804ce48a1e09b403.jpg)
所以去找找,如何去掉。
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.
能否去掉红线
去找找原因
感觉是这部分的颜色:
![](https://www.crifan.com/files/pic/uploads/2021/05/3a1760eb6d0547c6a22793e500d88d59.jpg)
去找找css
或color
![](https://www.crifan.com/files/pic/uploads/2021/05/13695bb1373549c7bf340daa28545971.jpg)
border-bottom-color: none;
结果语法报错:
![](https://www.crifan.com/files/pic/uploads/2021/05/ce1cc913f6534585adde6e5e34cb74c9.jpg)
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; }
结果:错误依旧。
算了。
然后继续弄其他页面:
![](https://www.crifan.com/files/pic/uploads/2021/05/8e7a71ca543c4c6686d05104cda65c84.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/b24ecaa780c94374b3658ef08e91857b.jpg)
以及其他几位老师:
![](https://www.crifan.com/files/pic/uploads/2021/05/c820072bf8614052a53cb72d5c7d8c15.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/2957032da3364e10a74d712e32430017.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/2c2d8afa046d4de2a12ecd053f1a34b8.jpg)
即可。
【总结】
基于html5up-landed的no-sidebar.html为模板,修改了内容后,基本上满足详情页的效果了。