仿制目标：Uplay官方网页

仿制效果：

1.因为还没有了解弹性盒该如何布局，所以虽然看起来效果一样，但是感觉自己写的页面层叠非常复杂，远没有官网的源码看起来简洁明了，这里算是目前遇到的第一个技术上的问题。
2.下图的页面的结构是和官网差不多的，用内边距确定内容需要的位置，然后让两个内容的width都是50%就行了，相对来说我比较信任这种有具体长度的百分比分配，在不同分辨率下比较稳定。

右边的图片滚动我是用JS写的,贴上代码：

var t = document.all.gdwin.offsetWidth;var i = 0;var j = 0;var m = 0;
setInterval(function() {i = i + 0.3;if (i > 100) {if (j <= t && m == 0) {document.getElementById('gdimg1').style.left = "-" + j + 'px';document.getElementById('gdimg2').style.left = (t - j) + 'px';j++;if (j == t) {document.getElementById('gdimg1').style.left = t + 'px';document.getElementById('gdimg2').style.left = 0 + 'px';m = 1;j = 0;i = 0;}}if (j <= t && m == 1) {document.getElementById('gdimg2').style.left = "-" + j + 'px';document.getElementById('gdimg1').style.left = (t - j) + 'px';j++;if (j == t) {document.getElementById('gdimg2').style.left = t + 'px';document.getElementById('gdimg1').style.left = 0 + 'px';m = 0;j = 0;i = 0;}}}if (i <= 100 && m == 0) {document.getElementById("radio1").checked = "checked";}if (i <= 100 && m == 1) {document.getElementById("radio2").checked = "checked";}}, 1)

利用一个定时器，让 i 来负责定时，因为我希望图片每隔一段时间滚动一次，而不是一直滚动，然后让被绝对定位的两张图片向同一方向滚动就行了。两张图片我是用一个相对定位div来固定的，因为div设置了overflow:hidden；所以滚动的时候没有溢出，看起来和官网的效果很相似，不过官网的移动速度更快，我其实也想更快一点，但是那就意味着setInterval的计时要低于1，我改成过0.1，不过没效果，目前还没想到用什么方法能够让这个移动效果变快，可能因为我的JS只是自学了一点，很多功能还不太了解。
3.这里的效果其实没做好，首先下划线明显比官网细，然后没有做悬浮显示白色下划线的功能，只是从效果上来看和官网是一样的。原理也很简单，上下两个div的display一个是正常的block，一个是none就隐藏了，点击事件让JS改变display就能做成这样了，主要利用使用display:none；的时候不会为这个元素创建盒模型，不占页面空间。
贴上JS代码吧：

function club(x) {var k = window.getComputedStyle(x).color;if (k == "rgb(255, 255, 255)")x.style.color = "#0070ff";x.style.background = "rgb(255, 255, 255)";if (x.id == "ybclub") {document.getElementById("ybclub1").style.borderBottom = "2px solid #0070ff";document.getElementById("ybsc").style.backgroundColor = "rgba(0, 0, 0, 0)";document.getElementById("ybsc").style.color = "rgb(255, 255, 255)";document.getElementById("ybsc1").style.borderBottom = "2px solid rgba(0, 0, 0, 0)";document.getElementById("ff2").style.display = "block";document.getElementById("ff1").style.display = "none";}if (x.id == "ybsc") {document.getElementById("ybsc1").style.borderBottom = "2px solid #0070ff";document.getElementById("ybclub").style.backgroundColor = "rgba(0, 0, 0, 0)";document.getElementById("ybclub").style.color = "rgb(255, 255, 255)";document.getElementById("ybclub1").style.borderBottom = "2px solid rgba(0, 0, 0, 0)";document.getElementById("ff1").style.display = "block";document.getElementById("ff2").style.display = "none";}}

4.最下面就没什么好说的了，代码的质量完全不如官网，最后选择语言的地方其实应该用绝对定位一个div，然后配合js做一个上拉列表的效果，但是时间有限，留到下次试试看吧。

html遇到的问题:

1.其实是我写的时候发现的我自己的一个坏习惯，我喜欢把布局和样式都写好，然后再考虑这个元素需要不要一个a元素做跳转功能，如果要，我就在需要的元素上套一层a元素，结果在页面渲染的时候出现了我刷新html文件，页面布局正常，刷新CSS文件布局出现了问题，a元素占了空间，改变了浮动的布局。我用的解决办法其实就是把a元素直接代替子div元素，将a元素的display直接换成block就没问题了，因为每个元素都是一个盒模型，用CSS完全可以更改元素的任意一个属性，但是我太喜欢这样做，养成习惯后可能会完全忽略语义化的问题。
2.缩放问题：页面布局写完之后需要经常看看视口缩放后的页面效果，尤其是定位的元素，很容易因为视口缩放位置下坠，然后页面布局变得很丑，我目前解决的办法就是设置min-width，不允许父元素在会改变整体布局的宽度上还能继续缩放，虽然会出现滚动条，但是目前也没想到更好的解决办法。
官网的设计很巧妙----在不同的缩放层度，整个页面的布局和样式会跟随网页大小发生变化，但是以我目前的技术很难做出来这样的效果，可能以后在JS较为了解的条件下，可以尝试做出相似的效果。

JS上的问题：

虽然这次的仿制没有要求使用JS，但是我用自己学习的一点JS皮毛还是尽量去做出来和官网相似的效果。
比如固定定位的导航栏上就有两个：
点击支持下面就会出现一个次级导航栏，再次点击支持就会消失，其实再次点击消失这个功能让我困惑了好久，后来发现用document.getElementById().style.visibility不能将css中的样式获取，来做一个判断，所以有了下面的方法。

function dzc() {var oDiv = document.getElementById('hzc');var oStyle = window.getComputedStyle(oDiv);var attr = oStyle.visibility;if (attr == 'hidden') {document.getElementById('hzc').style.visibility = "visible";}if (attr == "visible") {document.getElementById('hzc').style.visibility = "hidden";}}

其次就是做这个搜索功能的表单，因为子元素也会触发父元素的事件，所以每次只要点击表单，表单就会隐藏，用上面的方法就不合适了。
下面是JS代码：

document.getElementById('sear1').onclick = function(e) {e.stopPropagation();}document.querySelector('.slogo').onclick = function(e) {var b = window.getComputedStyle(document.getElementById('sear1')).visibility;if (b == 'hidden') {document.getElementById('sear1').style.visibility = "visible";document.getElementById('sear1').focus();}// if (b == "visible") {//     document.getElementById('sear1').style.visibility = "hidden";// }}document.getElementById('sear1').onblur = function() {document.getElementById('sear1').style.visibility = "hidden";}

起初我做的和支持一样的效果，后来我想，用搜索的时候一般让表单消失，都是失去焦点自动消失，感觉更合理一点，所以做了改动，注释部分是原本的代码。

总结

这次仿制Uplay官网让我深刻了解到我对网页设计停留在非常浅薄的地步，很多效果都不甚理想，只能做到类似，却不能完全一样，更不用谈更好的效果了。写的时候也有很多问题，比如在选择浮动还是选择改成行内块的方式水平排列，一个元素是给确定的宽度还是让它随父元素的百分比分配长度。这些问题我有很强烈的感觉应该是不同的布局有确定的规范的，并不是随便做达到效果就好这么简单，一个网页在渲染的过程中必然会有效率问题，让网页更快的渲染，更快的响应在写的时候应该充分考虑，始终考虑，虽然我目前的技术水平还不足以支持我去考虑这些问题。

补充：

滚动动画JS的完善：

var t = document.all.gdwin.offsetWidth;var i = 0;var j = 0;var m = 0;function radclick(x) {if (x.id == "radio1") {document.getElementById('gdimg2').style.left = t + 'px';document.getElementById('gdimg1').style.left = 0 + 'px';m = 0;i = 0;j = 0;}if (x.id == "radio2") {m = 1;i = 0;j = 0;document.getElementById('gdimg1').style.left = t + 'px';document.getElementById('gdimg2').style.left = 0 + 'px';}}setInterval(function() {i = i + 0.1;if (i > 100) {if (j <= t && m == 0) {document.getElementById('gdimg1').style.left = "-" + j + 'px';document.getElementById('gdimg2').style.left = (t - j) + 'px';j = j + 5;if (j == t) {document.getElementById('gdimg1').style.left = t + 'px';document.getElementById('gdimg2').style.left = 0 + 'px';m = 1;j = 0;i = 0;}}if (j <= t && m == 1) {document.getElementById('gdimg2').style.left = "-" + j + 'px';document.getElementById('gdimg1').style.left = (t - j) + 'px';j = j + 5;if (j == t) {document.getElementById('gdimg2').style.left = t + 'px';document.getElementById('gdimg1').style.left = 0 + 'px';m = 0;j = 0;i = 0;}}}if (i <= 100 && m == 0) {document.getElementById("radio1").checked = "checked";}if (i <= 100 && m == 1) {document.getElementById("radio2").checked = "checked";}}, 1)

完善说明：为了做到和官网滚动速度相近，我改了一点滚动相关的代码，原代码让图片每次向左移动1px，我的想法是如果一次移动太多像素，人眼会觉得图片在跳动，后来发现即使我将每毫秒移动5px，人眼仍然难以察觉，但是速度和官网上滚动速度十分接近。

HTML/CSS仿制Uplay官方网页面后记相关推荐

教你用html和css仿制小米官网页面！
一.使用的工具? 博主使用的是Visual Studio Code.这个是真的方便啊,体型小不说,好用的插件还不少!赞一个.不过为了之后的后端学习,我开始慢慢转向用IDEA 了,这个软件使用起来也是真 ...
HTML5期末大作业：网站——卡通漫画游戏官方网页 (萌王) 13个页面 HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计
HTML5期末大作业:HTML5期末大作业:网站--卡通游戏官方网页 (萌王)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个 ...
HTML5期末大作业：网站——卡通漫画游戏官方网页 (萌王) 13个页面 HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计...
HTML5期末大作业:HTML5期末大作业:网站--卡通游戏官方网页 (萌王)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个 ...
教你用html和css仿制小米官网页面
教你仿制小米官网页面(仅用html+css) 前言哈哈哈,我又来了.经过前面的不懈探索.我感觉我对html和css已经比较熟练了.这是在学完c语言和java后,学习的第三门语言(HTML算不上编程语 ...
HTML5期末大作业：动漫网站设计——迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成
HTML5期末大作业:动漫网站设计--迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成临近期末, 你还在为 ...
期末作业成品代码——绿色的餐饮美食网站(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:餐饮美食网站设计--绿色的餐饮美食网站(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设 ...
HTML5期末大作业：家居/家电/家居网站设计——html家具装饰网站设计30页(含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机...
HTML5期末大作业:家居/家电/家居网站设计--html家具装饰网站设计30页(含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网 ...
HTML5期末大作业：动漫网站设计——迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成...
HTML5期末大作业:动漫网站设计--迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成临近期末, 你还在为 ...
DIV布局艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面（含源码）
HTML5期末大作业:艺术品商城网站设计--艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个 ...

HTML/CSS仿制Uplay官方网页面后记