<!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>
静态网页html+css的真ikun网站
2023-12-29
50
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
静态网页html+css的真ikun网站
相关文章
|
4天前
|
移动开发
前端开发
JavaScript
|
9天前
|
缓存
移动开发
前端开发
【专栏：HTML与CSS前端技术趋势篇】HTML与CSS在PWA（Progressive Web Apps）中的应用
【4月更文挑战第30天】PWA（Progressive Web Apps）结合现代Web技术，提供接近原生应用的体验。HTML在PWA中构建页面结构和内容，响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作，保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步，HTML与CSS在PWA中的应用将更广泛。
33
10
11
|
9天前
|
前端开发
JavaScript
开发者
【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发，通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合，使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展，掌握新工具，提升开发效能。
37
11
11
|
9天前
|
前端开发
JavaScript
UED
【专栏：HTML 与 CSS 前端技术趋势篇】Web 性能优化：CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用，包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展，CSS模块系统、自定义属性和响应式设计将得到强化，HTML新特性也将支持复杂组件构建。同时，应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新，我们可以提升Web应用性能，创造更好的用户体验。
27
6
6
|
9天前
|
移动开发
前端开发
UED
【专栏：HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始，逐步增加高级特性，保证所有用户能访问基本内容；而优雅降级则是从完整版本出发，向下兼容，确保低版本浏览器仍能使用基本功能。实践中，遵循HTML5/CSS3规范，使用流式布局和响应式设计，检测浏览器特性，并提供备选方案，都是实现这两种策略的有效方法。选择合适策略优化网站，提升用户体验。
28
4
4
|
9天前
|
前端开发
开发者
UED
【专栏：HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局，简单易用，适合导航栏和列表；CSS Grid则适用于二维布局，能创建复杂结构，适用于整个页面布局。两者各有优势，在响应式设计中都占有一席之地。随着Web标准发展，它们的结合使用将成为趋势，开发者需掌握两者以应对多样化需求。
30
5
5
|
9天前
|
前端开发
JavaScript
搜索推荐
【专栏：HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构，语义化标签增进可读性，支持用户交互；CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战，需采取相应策略。未来，持续发掘HTML和CSS潜力，推动组件化开发创新，提升Web应用体验。
23
8
8
|
1月前
|
JavaScript
前端开发
|
2月前
|
JavaScript
前端开发
开发者
|
11天前
|
前端开发
JavaScript