AI 助理
备案控制台
开发者社区 云计算 文章 正文

静态网页html+css的真ikun网站

2023-12-29 114
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 静态网页html+css的真ikun网站 
<!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>&gt;</span></a></li>
                    <li><a href="">跳的课程<span>&gt;</span></a></li>
                    <li><a href="">rap的课程<span>&gt;</span></a></li>
                    <li><a href="">篮球的课程<span>&gt;</span></a></li>
                    <li><a href="">七里香<span>&gt;</span></a></li>
                    <li><a href="">心雨<span>&gt;</span></a></li>
                    <li><a href="">说好的幸福呢<span>&gt;</span></li>
                    <li><a href="">搁浅教学<span>&gt;</span></a></li>
                    <li><a href="">折磨的css教学<span>&gt;</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
CSS html
CSS网站
HTML网站
网页CSS
游客yygmekjm7fjue
目录
相关文章
疯狂的猿
|
4天前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码，为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑，还具备丰富的界面设计和用户交互功能，使得玩家能够轻松上手并享受扫雷带来的乐趣。
疯狂的猿
38 22
疯狂的猿
|
7天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
疯狂的猿
80 24
奔跑的数据
|
16天前
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术，轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头，示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景，确保数据采集的高效和稳定性。
奔跑的数据
39 2
利用 html_table 函数轻松获取网页中的表格数据
东方睿赢
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
东方睿赢
71 7
土木林森
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
44 6
龙大吉
|
2月前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求，提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求，提升加载速度；图标字体则以字体形式呈现图标，便于调整样式。文章分析了两者的优缺点及应用场景，并提供了应用技巧和注意事项，旨在帮助开发者提升页面性能，改善用户体验。
龙大吉
33 5
龙大吉
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容，旨在提升开发效率、网站性能和用户体验。
龙大吉
50 5
土木林森
|
2月前
|
前端开发 JavaScript UED
在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势，包括样式表优化、DOM操作减少、图像优化等技术，并分析了电商网站的具体案例，强调了技术演进对Web性能的深远影响。
土木林森
40 5
温轻舟
|
2月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
160 1
蓝易云
|
2月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
51 3

热门文章

最新文章

  • 1
    CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
  • 2
    jQuery和CSS3滑动展开菜单按钮插件
  • 3
    探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
  • 4
    页面滚动触发css3动画js插件
  • 5
    纸屑飘落生日蛋糕场景js+css3动画特效
  • 6
    纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
  • 7
    jQuery和CSS3精美翻页式电子时钟特效
  • 8
    Foundation CSS 可见性1
  • 9
    Foundation CSS 参考手册1
  • 10
    Foundation CSS 参考手册2
  • 1
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    146
  • 2
    HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
    81
  • 3
    好看的html网站维护源码
    259
  • 4
    html+echars图表加日期检索
    65
  • 5
    html+echars的统计报表
    72
  • 6
    【CSDN创作优化1】个人简介优化 html font属性
    68
  • 7
    一种pug与html相互转换的工具
    111
  • 8
    android TextView HTML 的效果
    50
  • 9
    BeautifulSoup 是一个 Python 库，用于从 HTML 和 XML 文件中提取数据
    159
  • 10
    HTML5/CSS3粒子效果进度条代码
    78

    • 相关课程

    更多
  • CSS 快速掌握
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月