HTML,CSS,JavaScript制作美文赏析网页

制作美文赏析网页

先用HTML语言编写网页的内容
本网页制作先在head标签中用div块状元素为网页添加主体内容即所要展示的美文.
再用CSS语言对网页的样式进行设置,设置网页的布局
本网页制作时,主要用CSS实现网页的布局,以及文字的大小,背景的颜色.主要采用元素选择器和类选择器进行精确设置样式.

<style>.d{position: absolute;right: 180px;}.item{margin-right: 5px;border: 1px solid #F7F2F2;width:20px;height:20px;/*float: left;*/display: inline-block;}img{float: right;}</style>

最后用JavaScript脚本语言对网页中相应元素实现相应的功能。
如点击字体大中小这三个字，可以改变文章内容的文字大小；点击视力保护色中的颜色块，可以改变文章的背景色。
本网页主要在改变网页文字大小,网页的背景颜色上用到了JavaScript.主要通过点击相应元素实现相应的功能.这里主要是对标签中的文章内容设置背景颜色,也可以对整个网页设置背景颜色.

<script>function myBigFunction(){var x = document.getElementById("article");/*记得改变字体用fontSize,并且记得加引号;*//*font-size是错误的*/x.style.fontSize="60px";}function myMiddleFunction(){var x = document.getElementById("article");x.style.fontSize="40px";}function mySmallFunction(){var x = document.getElementById("article");x.style.fontSize="20px";}function myColor(color) {var x = document.getElementById("article");x.style.backgroundColor = color;}</script>

网页效果如下
原网页效果：

改变背景颜色效果如下:

改变字体大小效果如下:

代码如下

<!doctype html>
<html>
<head><meta charset="utf-8"><title>无标题文档</title><style>.d{position: absolute;right: 180px;}.item{margin-right: 5px;border: 1px solid #F7F2F2;width:20px;height:20px;/*float: left;*/display: inline-block;}img{float: right;}</style><script>function myBigFunction(){var x = document.getElementById("article");/*记得改变字体用fontSize,并且记得加引号;*//*font-size是错误的*/x.style.fontSize="60px";}function myMiddleFunction(){var x = document.getElementById("article");x.style.fontSize="40px";}function mySmallFunction(){var x = document.getElementById("article");x.style.fontSize="20px";}function myColor(color) {var x = document.getElementById("article");x.style.backgroundColor = color;}</script>
</head><body>
<h2 align="center">美文赏析</h2>
<div class="d"><div class="item" style="background-color: skyblue;" onClick="myColor(this.style.backgroundColor)"></div>
<div class="item" style="background-color:lightgoldenrodyellow;" onClick="myColor(this.style.backgroundColor)"></div>
<div class="item" style="background-color: pink;" onClick="myColor(this.style.backgroundColor)"></div>
<div class="item" style="background-color: aliceblue;" onClick="myColor(this.style.backgroundColor)"></div>
</div>
<h5 align="center">来源:百度 [字体: <span onClick="myBigFunction()">大</span>  <span onClick="myMiddleFunction()">中</span>  <span onClick="mySmallFunction()">小</span> ] 视力保护色:</h5>
<article id="article"><header><h4 align="center">东流之水不复回</h4></header><p>沿着记忆的清溪，光着脚丫，踏着清澈bai的水流而上，绿砌苔香，
红桥水暖，鱼儿雀跃着尾巴在我的手心舞蹈，蝴蝶颤动着翅膀在我的
眉间飞过。</p>
<p>潺潺流淌的溪水，拍击着卵石柔化成寂寞幽谷中悦耳琴音，承载着岁月
的欢歌愁乐，蜿蜒到不知的尽头。
</p>
<p>新鲜的苔痕，青翠柔美，润滑如丝的质感，宛如心底的那抹温柔，脚底
打滑，一个踉跄我就要跌落在水里，如二十一年前我们彼此在生命中的交
错，原本该被流水带走的我，却在刹那被你的小手从死神那里一把抢夺了
回来，你弱小的身躯却顺水而下，跌落在了开满桃花的山谷里，桃花凋
零，落英缤纷，从此你依桃花为冢，以百鸟为邻，在青山翠谷中沉睡，那
么，这样在水中跌荡沉浮，是否就能循着桃花的香痕，沿着你远去的旧
迹，在那个云遮霞盖的桃花林里与你牵手，在一朵又一朵嫣红的飞落中吟
唱儿时的歌：西塞山前白鹭飞,桃花流水鳜鱼肥。青箬笠，绿蓑衣，斜风
细雨不须归。</p>
<p>曾以为，我所有背诵的唐诗宋词只与你一个人听，如今诗肥了相思，词
瘦了形容，那听我浅唱的人又去了哪里？</p>
<p>是谁的弹弓响彻云霄惊飞了一群鸟雀
</p>
<p>
那花季少年爬在树枝上的身影竟成了梦中的风景。你做的那把木头左轮
枪，连同你的嬉笑，我还收藏在箱底，在缺少快乐的日子里把它们翻出，
在我绝望的时候给予我继续的勇气。
</p>
<P>你的笑靥总在第一朵桃花盛开的时候灿烂着划过记忆的印痕，在一阵又
一阵幽香中袭来你少年的气息，让我在窒息的城市中呼吸到生命的清
新，在浑浊的暗流里捕捉童话的纯真。
</p>
<p>你是我的童话，最绝望的眼眸中滑过你滴落在我心最深处的泪，我的生
命里有你生命的延续，那么我怎可自私的关闭生命的门，就算在荒漠中行
走，一样会有你的甘泉在我的脚底穿行。</p><p>无边细雨，飞花如梦，雨滴与落花在水面激起一圈圈涟漪，春衫少年
，在岸边迎风而立，似一株桃花在盈盈而笑，敞开的双臂拥抱不来一个
岸上的你，满怀的桃花却印染了我的衣裙，红了我苍白着老去的容颜，
风雨轻拂，馨香溢满了山溪。</p><p>花终要逐流水，你终要从我的生命中如流星的陨落，消失在那桃之灼灼
的山谷里。山谷里的桃花又开了二十季，而我梦中的桃花却从来不曾凋
零，在季季的思念如雨中俏丽着绽开，在月月的喜怒哀乐中灿烂着怒放，
在日日的平仄起伏中淡然着飘香。
</p>
<p>人的生命不若桃花，这个季节败落，还会在下一个季节里吐露新蕊，
你静美的身姿在风中如桃花一次次回旋，在我的心里零落成永恒的诗
行。阴阳相隔，隔不去我的思念如潮，岁月如流，流不去我的记忆成河。
</p>
<p>那抹嫣红，那抹新绿，总在春天鸟儿的婉转啼鸣中顺着春意而来。窗外
的冬残，窗内的春痕，心海里的桃花谢了又开，春红总在记忆中跳跃，
守着我们的那片桃林，在清泉滑过的生命中天长地久。
</p>
<p>等不及又一个桃花盛开的季节，我为你写的第二十一篇文字已经在清溪
淌过的梦里誊写在素笺之上。十四岁的少年，隽刻成我生命中不老的风
景，那个十岁的少女却已经走过了青涩年华，在生命的第三十一个年头
里跋涉前行，时光带走了许多的故事，唯一带不走的就是落花香里，澄
波影外，你手拈桃花的微笑。
</p>
<p>一袭衣香芳尘里，红蔫翠老怎堪禁，且把桃花与月依，一任相思到天
明。写满心事的文字在花瓣的零落中缱绻，在清辉中翩舞，在暗香中浮
动。如果生命可以如文字涂抹了重来，那么我愿意不停的把你书写一遍
又一遍，直至你携我双手奔跑在桃花如云的山谷里，哪怕水竭河枯，哪
怕花衰草荒
</p>
</article>
</body>
</html>

HTML,CSS,JavaScript制作美文赏析网页相关推荐

HTML+CSS+JavaScript制作结婚倒计时网页模板 520情人节表白源码HTML 七夕情人节表白源码HTML 生日祝福代码HTML...
❉ html+css+javascript制作结婚倒计时网页模板(520/七夕情人节/程序员告白) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, ...
HTML+CSS+Javascript制作简单版网页时钟
HTML+CSS+Javascript制作简单版网页时钟 <!DOCTYPE html> <html><head><meta charset="ut ...
web课程设计网页规划与设计：鲜花网站设计——基于HTML+CSS+JavaScript制作网上鲜花网页设计(5页)
用DIV+CSS技术设计的明星个人网站制作(基于HTML+CSS+JavaScript制作明星彭于晏网页)
HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的)
HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的) 程序员给大家留下的印象往往是代码的机器,整天写代码-程序员不懂爱!其实这是对程序员一种片面的看法.程序员固然 ...
html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)
❉ html+css+javascript制作结婚倒计时网页模板(520/七夕情人节/程序员告白) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, 引用了C ...
HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤
❉ HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤ 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享 ...
HTML+CSS+JavaScript制作3D云效果，叼炸天！可用鼠标控制方向！
HTML+CSS+JavaScript制作3D云效果,叼炸天!可用鼠标控制方向! 作品介绍 1.网页作品简介方面 :3D云效果,叼炸天!可用鼠标控制方向! 2.网页作品编辑方面:此作品为学生个人主页网 ...
web网页设计实例作业 ——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作
HTML5期末大作业:电影网站设计--电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作文章 ...

HTML,CSS,JavaScript制作美文赏析网页

HTML,CSS,JavaScript制作美文赏析网页相关推荐

最新文章

热门文章