Land——网站设计与制作

网站主题

页面设计

关键代码 

最终效果展示

总结

简介

Land是博主第一个从零开始自己独立设计完成的网站框架，利用HBuilder软件和HTML5，CSS等语言。目前还没有链接数据库，未来会不断完善。

网站主题

Land网站是针对同校大学生以及有相同兴趣爱好的人，集交友，互助，分享种草，娱乐于一体的多方面校园交友网站。或许有喜欢的电影不知道和谁分享？在学校遇到问题不知道该怎么解决？不知道哪里才能找到学长学姐的学习资料？最近种草了一款美食？来Land，这一切都能帮你解决。我们的初心就是“在Land，遇见志同道合的另一个你”。

页面设计

在设计Land的时候我参考了很多现有的大型社交平台的网页例如微博，QQ空间等，再结合自己的设计理念进行设计。以下是初版的设计草图。

关键代码 

 实现渐变色效果

background-image: linear-gradient(lightblue , white); 可以设置方向确定渐变效果。

边缘椭圆化效果

border-radius:30px;     <!--更改数值达到想要的椭圆效果。-->

对话框内容提示效果

placeholder="Land Id"    <!-- 可描述输入字段预期值的提示信息 -->

 实现页面之间的跳转

<a href="文件名.html">

 列表自定义图片样式，更改图片大小。

list-style-type: none; background: url ("/文件名.png") no-repeat ;
			 background-size: 1rem 1rem;text-indent: 0.5em;
<!--在列表里图片的样式大小不方便更改，在查阅资料后可以设置为背景样式就很方便了。-->

script事件在点击按钮后弹出“欢迎来到Land”提示框

window.onload = function () 
			        {   var oBtn = document.getElementById("btn");
			            oBtn.onclick = function()
			            {alert("欢迎来到LAND！")					window.open("网页地址")}}

最难的我认为在设置块的浮动效果。根据之前学习过的内容中先设置出总体框架，再分块操作。有很多次都是在浮动的控制上出现问题，最后运用display，margin得到了解决。

细碎的代码还有很多，在这里不便进行展示。有时候进行设置并不能一次性达到想要的效果，需要不断地尝试，更改，最后的成果是非常有成就感。

最终效果展示

登录页

注册页

用户界面

总结

  第一次自己尝试去做一个完整的网站，在最开始设计的时候有很多很多想法，感觉应该不会特别难。但自己实际上手之后，从零开始一个字一个字的地敲出代码，其中是遇到了很多的问题和困难。

  也会有很迷茫，不知道问题该如何解决，或者是之前从来没有遇见过的问题。但在不断的查资料，不断的试错中，这些问题也终于得到了解决。看着网站一点一点成功，最后完整美观的呈现出来是非常的有成就感的。全心投入的项目最终有了成果真的是一件很值得骄傲的事情。