网站规划建设与管理维护课后答案,云建网站网址,信管女生做网站开发,怎样做旅游网站设计一、前言
实现功能: 这个案例实现了一个具有滚动功能的文本区域#xff0c;用于显示长文本内容#xff0c;并且可以通过滚动条来查看完整的文本内容。
实现逻辑#xff1a; 内容布局#xff1a;在body中#xff0c;使用div容器创建了一个类名为listen_t…一、前言
实现功能: 这个案例实现了一个具有滚动功能的文本区域用于显示长文本内容并且可以通过滚动条来查看完整的文本内容。
实现逻辑 内容布局在body中使用div容器创建了一个类名为listen_text的区域作为页面的主要内容容器。其中包含两个段落p用于展示标题和作者信息以及一个listen_text_box的div用于封装实际的滚动文本区域listen_text_con。 滚动文本区域listen_text_con类的div是用来展示诗歌内容的地方。通过设置overflow-y: auto;实现垂直滚动功能当内容超出预设高度300px时将显示滚动条。此外文本对齐方式设为两端对齐增强了文本的可读性。 自定义滚动条通过::-webkit-scrollbar、::-webkit-scrollbar-thumb和::-webkit-scrollbar-track伪元素分别自定义了滚动条的整体样式、滑块thumb样式和轨道track样式。这些样式提升了滚动条的视觉效果使其与页面整体设计更加协调。
二、项目运行效果
三、全部代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title滚动文本区域/titlestyle*{margin: 0;padding: 0;text-decoration: none;list-style: none;background-repeat: no-repeat;}.listen_text{width: 340px;margin: 20px auto;}.listen_text_box{width: 260px; }.listen_text_con{overflow-y: auto; height: 300px; text-align: justify;font-size: 14px; line-height: 24px; color: #a0a0a0;}.listen_text_con::-webkit-scrollbar {width: 5px;}.listen_text_con::-webkit-scrollbar-thumb {background-color: #55917a; border-radius: 5px; }.listen_text_con::-webkit-scrollbar-track {background-color: #cec5c5;border-radius: 5px;}/style
/head
bodydiv classlisten_textp stylemargin-bottom: 20px;font-size: 22px;line-height: 22px;color: #484848;守灯塔人的独白/pp stylemargin-bottom: 34px;font-size: 12px;line-height: 20px;color: #838383;作者路易斯·塞尔努达br为你读诗肖战、路知行 br译者汪天艾 br/pdiv classlisten_text_boxdiv classlisten_text_con风暴又一次咆哮半掩br在这摇篮的篷罩和被巾下面br我的孩子依然安睡。除去br格雷戈里的森林和一座秃丘br再没有任何屏障足以阻挡br那起自大西洋上的掀屋大风br我踱步祈祷已一个时辰br因为那巨大阴影笼罩在我心上。br为这幼女我踱步祈祷了一个时辰br耳听着海风呼啸在高塔顶br在拱桥下在泛滥的溪水上br在溪上的榆树林中回荡br在快乐的迷狂中幻梦br未来的岁月已经来到br踏着狂乱的鼓点舞蹈br来自大海残酷的天真。br愿她被人承认美丽br但不至使陌生人的眼光痴迷br或使自己在镜前心醉因为br一旦生得过分地艳丽br便会把美看作是最终的满足br从而丧失天性的善良还可能br失去推心置腹的莫逆交情br永远也找不到一个朋友。br海伦命定要感到生活平淡br后来因一个蠢汉惹来许多麻烦br而那从浪花中升起的伟大女王br因没有生父而可以自做主张br却选中了一个瘸腿铁匠做男人。br无疑娇贵的女人们喜欢br吃肉时佐以古怪的生菜冷盘br丰饶角因此而被糟蹋罄尽。br我要让她首先精通礼节br心灵不可视为天赐而是那些br并不十分美丽的人所挣得br而许多曾为美而美的蠢货br已经将魅力变成了智慧br还有不少曾经漫游的穷汉br爱恋过并自认为曾被爱恋br现在目光已离不开令人欢悦的仁爱。brbr愿她成为一株繁茂的绿树br红雀就好象她全部的思绪br没有劳形的事务只是慷慨地br四处播送着它们宏亮的鸣啼br只是在欢乐中相互嬉逐br只是在欢乐中你吵我争。br呵但愿她象月桂那样长青br植根在一个可爱的永恒之处。br近来由于我曾喜爱的那些心意br和我曾赞赏的那种美丽br皆是昙花一现我的心灵已枯竭br但仍知一旦为仇恨所壅塞br才定然是最可怕的厄运。br假如心灵中毫无仇恨br那厉风的袭击再烈再猛br理智的仇恨为害最甚br因此教她把观念视为可憎。br难道我不曾眼见那诞生br自丰饶角之口的最美丽的女人br只因她观念固执的心肠br用温和的天性所了解的br每一种美德和那只羊角br换取了一只充满愤怒的旧风箱br想到此一切仇恨被驱逐散尽br灵魂恢复了根本的天真br终于得知那是自娱自乐br自慰自安自惊自吓br它自己的美好愿望就是天意br尽管每一张面孔都会恼怒br每一处风源都会咆哮或每一组br风箱都会胀破但她会依然欢喜。br还愿她的新郎引她入洞房br那里一切寻常庄重堂皇br因为傲慢和仇恨都不过br是大路两旁零售的杂货。br除了在风俗和礼仪之中br纯真和美丽如何诞生br礼仪是丰饶角的别名br风俗是繁盛的桂树的名称。/div/div/div
/body
/html
四、答疑解惑 这是一个非常适合前端入门练习的小案例各位小伙伴可以自行更改样式和内容如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主QQ。 还多请各位小伙伴多多点赞支持你们的支持是我最大的动力。
博主QQ1196094293
谢谢各位的支持~~
