效果图：
无
GIF太难了

Html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="mainplus.css">
</head>
<body><div class="outline"><a href="#" class="uptohead">返回<br/>顶部</a><div class="header"><div class="headerword">单词导航  Word List</div><div class="headerleft hidden"></div></div><ul class="navigation clearfix"><li><a href="#word-a">a</a></li><li><a href="#word-b">b</a></li><li><a href="#word-c">c</a></li><li><a href="#word-d">d</a></li><li><a href="#word-e">e</a></li><li><a href="#word-f">f</a></li><li><a href="#word-g">g</a></li><li><a href="#word-h">h</a></li><li><a href="#word-i">i</a></li><li><a href="#word-j">j</a></li><li><a href="#word-k">k</a></li><li><a href="#word-l">l</a></li><li><a href="#word-m">m</a></li><li><a href="#word-n">n</a></li><br/><li><a href="#word-o">o</a></li><li><a href="#word-p">p</a></li><li><a href="#word-q">q</a></li><li><a href="#word-r">r</a></li><li><a href="#word-s">s</a></li><li><a href="#word-t">t</a></li><li><a href="#word-u">u</a></li><li><a href="#word-v">v</a></li><li><a href="#word-w">w</a></li><li><a href="#word-x">x</a></li><li><a href="#word-y">y</a></li><li><a href="#word-z">z</a></li><li><a href="#word-phrase" >phr</a></li></ul><div class="segamentation hidden"><div class="segamenta"></div><div class="segamentb"></div></div><div class="wordtext"><div class="wordtip" id="word-a">a</div><ul class="word" ><li>a</li></ul><div class="wordtip" id="word-b">b</div><ul class="word"><li>bypass vt. （做某事时）避开，越过(某人); 绕过；绕…走</li></ul><div class="wordtip" id="word-c">c</div><ul class="word"><li>civic a. 公民的；市民的; 城镇的；城市的</li><li>clear-cut a. 明确的；清楚的</li><li>commend vt.称赞，表扬，表彰；推荐</li></ul><div class="wordtip" id="word-d">d</div><ul class="word" id="word-d"><li>deviate vi. 背离；偏离</li><li>diligent a.勤奋的，用功的</li></ul><div class="wordtip" id="word-e">e</div><ul class="word"><li>endeavor n. 努力；尽力 vt. 努力做（某事）；尽力做（某事）</li></ul><div class="wordtip" id="word-f">f</div><ul class="word"><li>feat n.技艺；业绩；功绩</li></ul><div class="wordtip" id="word-g">g</div><ul class="word" id="word-g"><li>glamor(-ous) n.魅力，吸引力</li></ul><div class="wordtip" id="word-h">h</div><ul class="word"><li>handicap n.障碍；不利条件；残疾，缺陷</li></ul><div class="wordtip" id="word-i">i</div><ul class="word"><li>idiot n.笨蛋，啥子</li><li>inward a.内心的，精神的；向内的，向中心的</li></ul><div class="wordtip" id="word-j">j</div><ul class="word"></ul><div class="wordtip" id="word-k">k</div><ul class="word"></ul><div class="wordtip" id="word-l">l</div><ul class="word" ></ul><div class="wordtip" id="word-m">m</div><ul class="word"></ul><div class="wordtip" id="word-n">n</div><ul class="word" id="word-n"><li>nominate vt.提名，推荐</li></ul><div class="wordtip" id="word-o">o</div><ul class="word"></ul><div class="wordtip" id="word-p">p</div><ul class="word"><li>preculde vt. 阻碍；阻止；妨碍</li><li>prestige n.名望，声望，威信</li><li>presecution n.迫害，残害</li></ul><div class="wordtip" id="word-q">q</div><ul class="word" ></ul><div class="wordtip" id="word-r">r</div><ul class="word" ><li>ranch n.大牧场</li><li>robust a.坚定的；强硬的；强壮的，强健的</li></ul><div class="wordtip" id="word-s">s</div><ul class="word" ><li>spur n.刺激；激励；鞭策；鼓舞 vt.刺激；激励；鞭策；鼓舞； 使发生</li><li>slack vi.偷懒，逃避工作；a.松弛的；不紧的；松懈的 ，疏忽的</li></ul><div class="wordtip" id="word-t">t</div><ul class="word"><li>tragic n.悲惨的，不幸的，悲剧的</li><li>transcend vt.超越；摆脱（消极的态度、思想或情绪）</li></ul><div class="wordtip" id="word-u">u</div><ul class="word"><li>unprecedented a.前所未有的，史无前例的，空前的</li></ul><div class="wordtip" id="word-v">v</div><ul class="word"></ul><div class="wordtip" id="word-w">w</div><ul class="word"><li>whereby ad. 凭那个；借以</li></ul><div class="wordtip" id="word-x">x</div><ul class="word"></ul><div class="wordtip" id="word-y">y</div><ul class="word"></ul><div class="wordtip" id="word-z">z</div><ul class="word"></ul><div class="wordtip" id="word-phrase">短语</div><ul class="word"><li>remove sth. / sb. from sth. 移开；拿开；去掉；从…机构；开除</li><li>deviate from sth.  背离；偏离；违背</li><li>preclude sb. from doing sth. 阻止某人做某事；妨碍某人做某事</li><li>write sb. / sth. off  认定…失败（或没有价值、不可救药等）</li><li>fail in sth.  做…失败；未能做到…</li><li>triumph over  打败；战胜；成功</li><li>in (the) pursuit of sth.  在追求…的过程中；在寻求…的过程中</li><li>work one’s way to / through / into  （通过努力）逐步达到</li><li>act as  充当；起作用</li><li> fall down fail  不足；不够好</li><li></li><li></li></ul></div></div>
</body>
</html>

CSS

/* 设置主体的外边距、内边距为0 设置字体为非衬线字体 */
body{margin: 0;padding: 0;font-family: sans-serif;
}
a{text-decoration: none;
}
ul{list-style: none;margin: 0;padding-inline-start: 0;
}
.outline{width: 1240px;border: 1px solid #262626;margin: 20px auto;/* padding: 10px; */padding-bottom: 40px;
}
.header{margin: 20px 0;height: 36px;
}
.headerword{width: 360px;line-height: 36px;font-size: 24px;color: #262626;margin-left: 40px;/* padding-left: 50px; */text-align: center;font-weight: bold;background: linear-gradient(to right, #fff 0%, rgb(168, 226, 213) 25%, #8ee992 75%, #fff 100%);display: inline-block;
}
.headerleft{width: 750px;height: 31px;display: inline-block;position: relative;top: 4px;left: 0px;background: linear-gradient(to right, #ffff 0%, #45ee45 50%, #fff 100%);background-color: #000;
}
.uptohead{display: block;float: left;width: 50px;height: 48px;line-height: 24px;text-align: center;position: fixed;bottom: 20px;right: 5%;font-size: 16px;font-family: sans-serif;border: 1px #444444 solid;color: #aaa;background-color: #262626;opacity: 0.3;
}
.uptohead:hover{color: #fff;font-weight: bold;transform: scale(1.1);background: linear-gradient(to bottom,#555 0%, #000 100%);opacity: 1;transition: 0.3s;
}
.navigation{/* width: 1160px; *//* display: inline-block; *//* border: 1px solid #15c8d4; */padding-inline-start: 0;margin: 0 auto;text-align: center;
}
.navigation li{display: inline-block;border: 1px solid #15c8d4;background-color: #c7eff1;margin: 10px 10px;
}
.navigation li a{display: inline-block;width: 35px;height: 35px;line-height: 35px;margin: 2px;text-transform: uppercase;color: #303030;text-align: center;}
.navigation a:hover{color: white;background-color: #333;font-weight: bold;transform: scale(1.2);transition: 0.3s;
}
.navigation a:before{content: ' ';position: absolute;top: -2px;left: -2px;width: 40px;height: 40px;border-bottom: 2px solid #5bee5b;transform: scaleY(1.5);opacity: 0;z-index: -1;transform: 0.3s;
}
.navigation a:hover::before{transform: scaleY(1.2);opacity: 1;
}.outline .segamenta{width: 93%;height: 15px;margin-top: 15px;margin-left: 3%;border-top: 1px solid #000;border-left: 1px solid #000;border-right: 1px solid #000;background: linear-gradient(to right,  #15c8d4 0%,#e65858 15%,#d4cb46 75%,#8af85f 100%);transform: skewX(-45deg);
}
.outline .segamentb{width: 93%;height: 15px;margin-left: 3%;margin-bottom: 15px;border-bottom: 1px solid #000;border-left: 1px solid #000;border-right: 1px solid #000;background: linear-gradient(to right,  #15c8d4 0%,#e65858 15%,#d4cb46 75%,#8af85f 100%);transform: skewX(45deg);
}
.outline .wordtext{margin: 10px;width: 75%;margin: 0 auto;
}
.wordtext .word{width: 100%;border: 1px solid #000;margin: 0 0 1px 1px;padding-inline-start: 2em;
}
.wordtext .word li{margin: 1px 0;list-style-type: decimal-leading-zero;
}
.wordtext .wordtip{width: 100%;height: 32px;background: linear-gradient(to right, #fff 0%, #222 50% ,#fff 100%);text-align: center;text-transform: uppercase;line-height: 32px;font-weight: bold;color: lightgoldenrodyellow;
}
.hidden{visibility: hidden;
}

爽啊！写了一个网页：首字母索引的单词（十分垃圾，简单的不得了）相关推荐

网页制作（七）---照着google注册页面边学边写的一个网页
花了五六个小时边学边写了一个注册页面,仿照google邮箱注册的样子,刚开始,看了下google注册页面的原码,当时就不够淡定了,总计有六千多行代码,当时就有点晕了.在心里告诉自己:如果这次放弃,以后 ...
Python 写了一个网页版的「P图软件」，惊呆了！
作者 | 小欣来源 | Python爱好者集中营今天是开工第一天,这篇文章可以算作是虎年的第一篇干货技术类文章了,今天小编用Python做了一个网页版的"P图软件",大致的流程 ...
用Python写了一个网页版的美图秀秀，惊呆了
今天小编用Python做了一个网页版的"P图软件",大致的流程在于我们可以将上传的照片进行黑白处理.铅笔素描处理.模糊化处理等一系列操作,具体如下下面我们来看一下该整个网页是怎么 ...
简单实现UITableView索引功能(中英文首字母索引)(一) ByH罗
UITableView索引功能是常见的,主要是获取中英文的首字母并排序,系统自带获取首字母 //系统获取首字母 - (NSString *) pinyinFirstLetter:(NSString*) ...
android 通讯录首字母索引,android仿微信通讯录搜索(匹配拼音,字母,索引位置标记颜色)...
前言: 仿微信通讯录搜索功能,通过汉字或拼音首字母找到匹配的联系人并显示匹配的位置一:先看效果图字母索引搜索匹配二:功能分析 1:汉字转拼音通讯录汉字转拼音(首个字符当考虑姓氏多音字), 现 ...
写的一个网页登录注册模板（css+js），注册成功后把账号保存到MySQL数据库，登录时从数据库查找进行验证（jsp+javabean）
首先是网页前端的设计,使用css美化(字体使用Google font,图标使用font awemome,颜色使用palettes|flat ui colors,谷歌可找到,个人觉得挺好用) 使用了简单 ...
整理英语句子：将首字母大写，单词之间只能一个空格，最后加句号
利用指针指向字符串 #include<stdio.h> #include<string.h> void sentence(char*p1) {char*p2;if(p1[0]& ...
实现自己的首字母索引导航列表（二）——拼音首字母分类列表
文章目录 1.创建多类型布局列表 1.1 定义列表加载数据格式 1.1 创建适配器 1.2 添加假数据展示列表 2.对数据源进行首字母拼音分组 3.添加分割线目标效果如下. 实现步骤: 创建 ...
python的拼音_python 中文分词和拼音首字母
昨天的算法课老师以中文分词为例讲了DP,换了种简单的方式(求分词后频率和最大)实现了一下,效果不错,频率词典是从这里找的: http://download.csdn.net/source/347899 ...

爽啊！写了一个网页：首字母索引的单词（十分垃圾，简单的不得了）

Html

CSS

爽啊！写了一个网页：首字母索引的单词（十分垃圾，简单的不得了）相关推荐

最新文章

热门文章