用原生代码制作公司官网+jQuery.i18n中英文如何切换+垂直下拉框

最新推荐文章于 2021-05-06 17:10:19 发布

羊心眼

最新推荐文章于 2021-05-06 17:10:19 发布

阅读量628

点赞数

本文链接：https://blog.csdn.net/weixin_40679578/article/details/103735625

版权

制作公司官网首先要看看SEO(搜索引擎优化)，说白就是在用百度搜索的时候能排名靠前一点，推荐看一下这个就差不多了添加链接描述。

分享一下踩得坑：
1、公司要做的有中英文的，上一个版本的官网也是中英文，做了两套，一套中文一套英文，然后可以从一个html跳到英文页面去过去，这样的目录结构：
在这里插入图片描述
我也照做了…后来发现有更简单的方法，可以用基于jQuery.i18n.properties 实现前端页面的资源国际化，可以参考添加链接描述
自己试了一下，他其实配置了两个文件

英文里面的

中文里面的

主页里面是这样：
在这里插入图片描述
在每个需要文字的地方给他命名，然后在对应两个文件里面翻译出来的东西，翻译的东西应该是自己录入的，自动翻译的不知道。
可以试一下这个地址里面的代码：添加链接描述

2、这个官网页面很多，建议页面多或者不确定有多少页面的时候，先做页面，导航栏先不要复制，我们就是修改了很多次，就复制来复制去浪费了很多时间。

3、有个老员工告诉我尽量不用height，用line-height把高度撑起来，我做了一些line-height的功课
在这里插入图片描述
font-size是1-4的距离，line-height是3-3的距离。
当一个div没有设置高的时候，它是由line-height撑起来的，而且文字可以垂直居中，这也是使用它的方便之处。

4、考虑缩屏的时候，样式是什么样子的
全屏是这样的
在这里插入图片描述
锁屏之后

宽度不能用户百分比，如果用百分比的话，缩屏之后，所有的东西都缩了，要保证它缩屏之后大小不变，看了很多网站，例如百度

缩放后

我觉得他左边的div宽度设好了，就是在缩放的时候，能够保证页面不乱大小不变，所以我和ui商量了一下布局，尽量在这样差不多的大小，保证缩放之后的样式。宽度不设，大概像下面这样，缩放之后就还是这个样子，图片啥的类似。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main{
				width: 100%;
				text-align: center;
			}
			.text{
				line-height: 24px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="text">123456789</div>
		</div>
	</body>
</html>

5、关于鼠标悬停二级、三级菜单的bug
首先关于悬停在上面改变一下字的颜色，一定要一层一层找到这个文字，不能用这个div的id或者class直接
：hover改变样式是不行的。
在这里插入图片描述
像下面这样一层一层找到就行了我的Dangerous是写在class为 .product_dropdown2的div里面的：

<style>
#index_top div.header #index_middle #index_navigate #product_dropdown .product_dropdown2:hover {
				color: #2185D5 !important;
			}
</style>

关于悬停，我希望鼠标在usecase（上图）上面hover的时候就出现下面的二级菜单，字是写在a标签里的。

<a href="#">solution</a>

这个a标签最好设个padding：20px 0；不然鼠标悬停的位置太小，往下滑一点下拉框就没了。
在这里插入图片描述
附上出现二级框的代码，记得下jquery，样式不用设display是none还是block

鼠标在id为usecase上悬停的时候，id为use_dropdown下拉框显示出来。
                $("#usecase").hover(function() {
					$("#use_dropdown").show();
				}, function() {
					$("#use_dropdown").hide();
				})
				
				// 鼠标移动到show_xxwh 的div上的时候show_xxwh div不会被隐藏
				$("#use_dropdown").hover(function() {
					$("#use_dropdown").show();
				}, function() {
					$("#use_dropdown").hide();
				})

效果如下
在这里插入图片描述
还有一个下拉框，是下图这样的

代码 html:

<div class="left_box" style="background:rgba(247,249,252,1);">
				<div class="box_top">
					<div class="box_font">PRODUCTS</div>
				</div>
				<ul style="margin-left: 0px;">
					<li>
						<img src="../../img/jiantou.png" class="box_img">
						<a href="###" class="one_bar">Tracker</a>
						<ul class="two_bar" id="badge">
							<li>
								<a href="badgeTracker.html" class="one_bar"  id="badgeTracker">Badge Tracker</a>
							</li>
							<li>
								<a href="Outdoor.html" class="one_bar">Outdoor Tracker</a>
							</li>
							<li>
								<a href="Helmet.html" class="one_bar">Helmet Tracker</a>
							</li>
						</ul>
					</li>
					<li>
						<img src="../../img/jiantou.png" class="box_img">
						<a href="###" class="one_bar">Gateway</a>
						<ul class="two_bar">
							<li>
								<a href="BadgeBlue.html" class="one_bar">Badge Bluetooth Gateway</a>
							</li>
							<li>
								<a href="SolarBlue.html" class="one_bar">Solar Bluetooth Gateway</a>
							</li>
							<li>
								<a href="IndoorBlue.html" class="one_bar">Indoor Bluetooth Gateway</a>
							</li>
						</ul>
					</li>
					<li>
						<img src="../../img/jiantou.png" class="box_img">
						<a href="###" class="one_bar">Beacon</a>
						<ul class="two_bar">
							<li>
								<a href="iBeacon.html" class="one_bar">iBeacon</a>
							</li>
							<li>
								<a href="i3.html" class="one_bar">i3 Portable Bluetooth Label</a>
							</li>
							<li>
								<a href="i4.html" class="one_bar">i4 Asset Management Label</a>
							</li>
						</ul>
					</li>
					<li>
						<img src="../../img/jiantou.png" class="box_img">
						<a href="###" class="one_bar">Sensor</a>
						<ul class="two_bar">
							<li>
								<a href="VG.html" class="one_bar">VG08 Bluetooth Bracelet</a>
							</li>
							<li>
								<a href="Temperature.html" class="one_bar">Temperature & Humidity Sensor</a>
							</li>
							<li>
								<a href="Lora.html" class="one_bar">LoRa Precision Platinum <br/>Temperature Sensor</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>

js：

<script src="../../js/jquery-1.11.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("#badge").css("display", "block");
				$("#badgeTracker").css("color", "#2185D5");
				$(".one_bar").click(function() {
					$(this).next().slideToggle();
					$(this).parent().siblings().children("ul").slideUp();
				});
			});
		</script>

css:

            .two_bar {
				display: none;
				margin-left: 50px;
			}
			
			li {
				list-style: none;
				line-height: 40px;
			}
			
			.two_bar li,
			.one_bar {
				display: inline-block;
				width: 219px;
				height: 51px;
				font-size: 16px;
				font-family: SourceSansPro;
				font-weight: 600;
				color: rgba(23, 23, 23, 1);
				line-height: 20px;
			}
			
			.left_box ul li .two_bar .one_bar:hover {
				color: #2185D5;
			}