涼月貳陸 2022-09-23 10:19 采纳率: 66.7%
浏览 223
已结题

使用HTML5元素制作一个网页

img

img

img


在软件Visual Studio Code中制作一个心灵小屋的网页，其中超链接是空链接
给出相应的代码

  • 写回答

5条回答 默认 最新

  • CSDN专家-showbo 2022-09-23 10:54
    关注
    
<!doctype html>
<meta charset="utf-8" />
<style>
    .more {
        margin: 10px 0;
    }

    .more a {
        cursor: pointer
    }

    .morecontent {
        display: none
    }
    .emotion{display:flex;align-items:center}
    .emotion .progress {
        background: #eee;
        height: 10px;
        border-radius: 10px;
        width: 100px;
        overflow: hidden
    }
    .emotion .progress .bar{background:green;width:80%;height:100%;}
</style>
<img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/784273998366170.png" />
<ul>
    <li><a href="#article">文章精选</a></li>
    <li><a href="#favor">内容收藏</a></li>
    <li><a href="#emotion">心情列表</a></li>
</ul>
<h2 id="article">文章精选</h2>
<h3>《致橡树》</h3>
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
<div class="more"><a>▶</a> 显示更多</div>
<div id="more1" class="morecontent">更多内容放这个容器里面，巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</div>
<h2 id="article">心灵成长值</h2>
<img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/598473998366130.png" />
<div class="emotion">
    <span>今日：</span>
    <span class="progress"><div class="bar"></div></span>
    <span>80%</span>
</div>
<br />
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
<div class="more"><a>▶</a> 显示更多</div>
<div id="more1" class="morecontent">更多内容放这个容器里面，巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</div>
<h3>《再别康桥》</h3>
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
<h2>心灵成长值</h2>


<script>
    document.querySelectorAll('div.more a').forEach(i => {
        i.onclick = function () {
            var exp = this.innerHTML == '▶';
            this.parentNode.nextElementSibling.classList[exp ? 'remove' : 'add']('morecontent');
            this.innerHTML = exp ? '▼ ' : '▶';
            this.parentNode.lastChild.data = exp ? ' 收起内容' :' 显示更多'
        }
    })
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

问题事件

  • 系统已结题 10月1日
  • 已采纳回答 9月23日
  • 修改了问题 9月23日
  • 创建了问题 9月23日

悬赏问题

  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构，按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题