一个小的程序--实现中英文切换（纯css）

最新推荐文章于 2024-05-18 10:01:50 发布
最新推荐文章于 2024-05-18 10:01:50 发布
阅读量669 收藏
点赞数
文章标签： ui
原文链接：http://www.cnblogs.com/qiuchunxia/p/5814577.html
版权

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style>
*{padding:0;margin:0px;}
li{list-style:none;}
a{text-decoration:none;}
.nav{width:100%;height:40px;margin-top:100px;overflow:hidden;}
.list{width:1000px;height:40px;border:1px solid red;margin:0 auto;}
.list li{float:left;}
.list li a{border:1px solid red;display:block;transition:0.3s;}
.list b,.list i{display:block;padding:0 30px;color:#aaa;line-height:40px;text-align:center;}
.list b{font-weight:100;}
.list i{font-style:normal;}
.list a:hover{margin-top:-40px;}
</style>
<body>
<div class="nav">
<ul class="list">
<li>
<a href="#">
<b>qiuchunxia</b>
<i>导航</i>
</a></li>

<li>
<a href="#">
<b>qiuchunxia</b>
<i>导航</i>
</a></li>

<li>
<a href="#">
<b>qiuchunxia</b>
<i>导航</i>
</a></li>

<li>
<a href="#">
<b>qiuchunxia</b>
<i>导航</i>
</a></li>

<li>
<a href="#">
<b>qiuchunxia</b>
<i>导航</i>
</a></li>
</ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/qiuchunxia/p/5814577.html

weixin_34314962
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序开发中的多国语言支持和国际化
m0_75244442的博客
07-12 396
微信小程序开发中的多国语言支持和国际化内容是指在小程序中实现多种语言的显示，以及根据用户的地区和语言偏好自动切换显示内容的功能。通过以上代码，当用户在设置页面点击语言切换按钮后，会触发switchLanguage函数，切换语言并重新加载相应的语言资源文件。动态替换文本内容：在小程序的页面中，使用动态数据绑定的方式将文本内容与相应的语言资源文件中的文本内容关联起来。实现语言切换的功能：在小程序中，可以通过全局状态的方式保存用户选择的语言信息。首先，准备两个语言版本的资源文件，分别是中文和英文的版本。
div CSS样式表实现中英文双语切换导航条
11-21
div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条
利用CSS完成鼠标悬浮时中英文切换
weixin_44286392的博客
08-04 922
效果： 刚开始时是中文菜单， 鼠标放上去时，中文切换成英文且样式改变。 源码： <!doctype html> <head> <style> *{padding:0px;margin:0px;} html{background:#abcdef;} div{margin:200px auto;width:80%;} ul{list-style:none; overflow:hidden;/*显示英文时，隐藏切换后的中文*/ } ul li
CSS3干货28：妙用 transition 实现中英文切换导航
九天翔龙的技术博客
04-19 825
好久没写博客了，有。。。20多天了吧？ 最近好忙，指导 10 个同学论文不说，写了2个市级申报书，还抽空指导了一组同学参加xx比赛（就一个清明节的时间准备，居然冲进了省部级赛场~，不得不佩服这帮同学之厉害）。人都要忙疯了~ 难得静下心（其实也没静下心，只是觉得亏欠了 CSDN 太多），把我上课讲到的一个小案例拿来充数~ 先看效果 一、HTML结构 <!-- 导航 --> <nav class="pageNav"> <ul> <
HTML/CSS方法实现中英文变换菜单显示
XDarker的博客
05-25 1845
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
html语言切换插件,CSS3 不错的一款国家/语言切换控件
weixin_42393452的博客
06-01 297
CSS语言：CSSSCSS确定@import url(http://fonts.googleapis.com/css?family=Raleway);html {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-...
前端实现中英文翻译切换
07-06
在前端开发中，实现中英文翻译切换是一项常见的需求，尤其对于多语言网站或者国际化的应用程序来说至关重要。这个压缩包提供了一个简单的示例，让你能够快速理解并实践这一功能。下面，我们将深入探讨如何在前端环境...
VirtualKeyBoard,js虚拟键盘，中英文切换，数字输入
09-25
VirtualKeyBoard.js虚拟键盘是一种基于JavaScript技术实现的轻量级组件，主要应用于网页或Web应用程序中，为用户提供在浏览器环境中输入文本的交互方式。它特别适用于那些需要在移动设备上或者安全环境中输入敏感...
asp.net MVC+三层+分页+中英文切换+自定义显示列
10-21
中英文切换功能是针对国际化和本地化需求的设计，允许用户根据自己的语言偏好选择界面显示语言。这通常通过资源文件实现，存储不同语言的文本资源，程序运行时根据用户设置动态加载相应语言的资源。 自定义显示列...
微信小程序实现日历签到
10-14
下面我们将深入探讨如何在微信小程序中构建一个日历签到功能。 首先，我们需要了解微信小程序的基本结构。微信小程序由四部分组成：WXML（结构层）、WXSS（样式层）、JavaScript（逻辑层）以及JSON（配置文件）。在...
Atomic CSS Helper-crx插件
04-02
5. **学习曲线平缓**：对于熟悉常规CSS的开发者来说，Atomic CSS Helper提供了一个平滑过渡到原子CSS的学习路径。 在实际开发中，Atomic CSS Helper插件的使用流程可能包括以下几个步骤： 1. **安装插件**：将...
中英文切换可运行程序
06-06
中英文切换可以运行成程序，可以参考一下，如果有意见可以发到我的邮箱liangyongfu82@sina.com
HTML用css把英文字母改大,CSS转换英文大小写text-transform属性
weixin_39668898的博客
05-30 871
【实例介绍】CSS转换英文大小写text-transform英文字母大小写转换是CSS提供的很实用的功能，只需要设置英文段落的text-transfrom属性，就可以用来转换英文字母的大小写。【基本语法】text-transform：转换值【语法介绍】text-transform包括以下取值范围。none：表示使用原始值。lowercase：表示使每个词的所有字母小写。uppercase：表示使每...
CSS 中的真实切换按钮
我的博客，不一样的自我表达
08-06 135
CSS 中的真实切换按钮CSS 中的真实切换按钮HTML 代码CSS代码。
【微信小程序】css弹出菜单+多语言切换功能
糖葫芦哎的博客
03-07 881
微信小程序实现纯css弹出菜单+多语言切换功能
CSS样式切换技巧
Penlee's Blog
09-22 969
2007-09-16       样式与数据分离所带来的不只是符合标准这样的简单，样式既然与数据分离那么样式的切换则变得理所当然的了！但是网上这样的中文教程实在是太少了！收集了一部分中外网站已经实现的技术资料整理出来供网友参考。 　　首先要具备不同内容的CSS文件（最好每个文件代表一种样式，或是代表需要作出变动的部分）。这里以三个为例： 　　第一个是背景为红色的CSS文件（red.css）C
CSS3 text-transform 实现英文文本大小写字母的转换
kuyoru's blog
10-04 406
- CSS text-transform 属性 text-transform控制文本的大小写，其属性值可继承自父元素 属性 值 none 默认。定义带有小写字母和大写字母的标准的文本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义无大写字母，仅有小写字母。 inherit 规定应该从父元素继承 text-transform 属性的值。 .nav-menu li a { color: #ff
css实现英文文本大小写转换
『程序员·小李』的博客
12-31 361
英文文本的大小写转换可以采用text-transform实现 示例 <p class="uppercase">This is some text.</p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> 样式 p.uppercase {text-transform:uppercase;} p.l
推荐项目：纯CSS切换开关(CSS Toggle Switch)
最新发布
gitblog_00074的博客
05-18 466
推荐项目：纯CSS切换开关(CSS Toggle Switch) 项目地址:https://gitcode.com/ghinda/css-toggle-switch 在这个数字化时代，我们经常需要在用户界面中添加易于操作的切换按钮。CSS Toggle Switch 是一个由 Ionuț Colceriu 创建并维护的开源项目，它提供了一套无需JavaScript，仅依赖CSS实现的可访问性极强的...
css中英文切换动画
03-20
在CSS中实现中英文切换动画可以通过以下步骤来实现： 1. 首先，为需要切换的文本元素添加一个类名，例如"language-switch"。 2. 使用CSS的伪类选择器`:lang`来选择不同语言的文本。例如，`:lang(en)`表示选择英文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值