<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../study.css"> </head> <body> <!-- 整体思路就是一个一个标准流写好了，在使用float来实现每行的效果。 --> <!-- 头部信息 --> <div class="header w"> <!-- 头部left --> <div class="logo"><img src="../image/header.png"></div> <!-- 头部middle --> <div class="nav"> <ul> <li><a href="">唱</a></li> <li><a href="">跳</a></li> <li><a href="">rap</a></li> <li><a href="">篮球</a></li> </ul> </div> <!-- 头部right --> <div class="search"> <input type="text" value="请输入关键词"> <button></button> </div> <!-- 用户模块 --> <div class="user"> <img src="../image/user.png"> <p>只因你太美</p> </div> </div> <!-- banner信息 --> <div class="banner"> <div class="w"> <!-- 测导航栏模块 --> <div class="subnav"> <ul> <li><a href="">唱的课程<span>></span></a></li> <li><a href="">跳的课程<span>></span></a></li> <li><a href="">rap的课程<span>></span></a></li> <li><a href="">篮球的课程<span>></span></a></li> <li><a href="">七里香<span>></span></a></li> <li><a href="">心雨<span>></span></a></li> <li><a href="">说好的幸福呢<span>></span></li> <li><a href="">搁浅教学<span>></span></a></li> <li><a href="">折磨的css教学<span>></span></a></li> </ul> </div> <!-- 课程表模块 --> <div class="course"> <h2>我的课程表</h2> <div class="bd"> <ul> <li> <h4>继续练习唱</h4> <p>正在学习-搁浅</p> </li> </ul> <br> <ul> <li> <h4>继续练习跳</h4> <p>正在学习-鸡你太美舞蹈</p> </li> </ul> <br> <ul> <li> <h4>继续练习rap</h4> <p class="last">正在学习-手写的从前</p> </li> </ul> <br> <a href="#">全部课程</a> </div> </div> </div> </div> <!-- 最喜欢的歌曲推荐 --> <div class="goods s"> <h3>最喜欢唱</h3> <ul> <li><a href="">说好的幸福呢</a></li> <li><a href="">心雨</a></li> <li><a href="">爱在西元前</a></li> <li><a href="">可爱女人</a></li> <li><a href="">园游会</a></li> </ul> <a href="" class="mod">修改兴趣</a> </div> <!-- 精品推荐模块 --> <div class="box s"> <div class="box-hd"> <h3>真ikun推荐</h3> <a href="">查看全部</a> </div> <div class="box-bd"> <ul class="clearfix"> <li> <img src="../image/微信截图_20230217204430.png"> <h4>食不食油饼啊，小黑子！！！</h4> <div class="info">ikun:0 小黑子:233</div> </li> <li> <img src="../image/2.png"> <h4>食不食油饼啊，小黑子！！！</h4> <div class="info">ikun:0 小黑子:233</div> </li> <li> <img src="../image/3.png"> <h4>食不食油饼啊，小黑子！！！</h4> <div class="info">ikun:0 小黑子:233</div> </li> <li> <img src="../image/4.png"> <h4>食不食油饼啊，小黑子！！！</h4> <div class="info">ikun:0 小黑子:233</div> </li> <li> <img src="../image/5.png"> <h4>食不食油饼啊，小黑子！！！</h4> <div class="info">ikun:0 小黑子:233</div> </li> <li> <img src="../image/6.png"> <h4>食不食油饼啊，小黑子！！！</h4> <div class="info">ikun:0 小黑子:233</div> </li> <li> <img src="../image/7.png"> <h4>食不食油饼啊，小黑子！！！</h4> <div class="info">ikun:0 小黑子:233</div> </li> <li> <img src="../image/8.png"> <h4>食不食油饼啊，小黑子！！！</h4> <div class="info">ikun:0 小黑子:233</div> </li> <li> <img src="../image/9.png"> <h4>食不食油饼啊，小黑子！！！</h4> <div class="info">ikun:0 小黑子:233</div> </li> <li> <img src="../image/10.png"> <h4>食不食油饼啊，小黑子！！！</h4> <div class="info">ikun:0 小黑子:233</div> </li> </ul> </div> </div> <!-- 页脚底部 --> <div class="footer"> <div class="s"> <div class="copyleft"> <img src="../image/0217211708.png"> <div class="name">两耳不闻窗外事，一心只为蔡徐坤。 追梦少年不失眠，<br>未来可期蔡徐坤。 向阳花木每逢春，ikun一直爱坤坤。</div> <a href="" class="app">关爱蔡徐坤</a> </div> <div class="link"> <dl> <dt>关于蔡徐坤</dt> <dd><a href="">为什么成鸡</a></dd> <dd><a href="">成只因日期</a></dd> <dd><a href="">成只因作品</a></dd> <dd><a href="">只因你太美</a></dd> <dd><a href="">彩虹可爱小只因</a></dd> </dl> <dl> <dt>关于蔡徐坤</dt> <dd><a href="">为什么成鸡</a></dd> <dd><a href="">成只因日期</a></dd> <dd><a href="">成只因作品</a></dd> <dd><a href="">只因你太美</a></dd> <dd><a href="">彩虹可爱小只因</a></dd> </dl> <dl> <dt>关于蔡徐坤</dt> <dd><a href="">为什么成鸡</a></dd> <dd><a href="">成只因日期</a></dd> <dd><a href="">成只因作品</a></dd> <dd><a href="">只因你太美</a></dd> <dd><a href="">彩虹可爱小只因</a></dd> </dl> </div> </div> </div> </body> </html>
