`
XinYiTian
  • 浏览: 35633 次
  • 性别: Icon_minigender_1
  • 来自: 泉州
文章分类
社区版块
存档分类
最新评论

我的网站之旅 (三)页面设计

阅读更多

http://www.fanyimi.com 翻译迷   的页面设计

http://www.fanyimi.com 翻译迷   的页面设计大体上采用了div + css的设计方式。

布局用div来完成,具体的页面细节用table来完成。

1.比如首页的结构如下:
翻译迷首页结构

最外层用一个div来套住,<div class="wrapper"></div>

这个wrapper在css中是如此定义的:
.wrapper {
    margin: 0px auto;
    width: 1010px;
}

1010像素宽,居中对齐。

接下来所有的页面元素往里面填。
一级链接导航栏用<ul><li>元素来完成,对li采用左漂移,在<ul>元素的后面加上<div style="clear: left;"></div>,以清理浮动,不然的话,在IE下就有麻烦了。

页面的中部内容,布局用两个div来框住,设计都为float:left,其宽度分别为:700像素和280像素。
.leftWrapper, .rightWrapper {
    margin-left: 10px;
    margin-top: 15px;
    float: left;
    display: inline;
}

.leftWrapper {
    width: 700px;
}

.rightWrapper {
    width: 280px;
}

注意要写个display: inline;的css属性,否则在IE下有可能会出现3像素的问题,IE下有时候会出现3像素,有时候不会出现,具体原理我也没搞清,反正有float的地方,我都加上这么一句。

div里面的具体内容,凡是出现左右两栏的部分,我一般会采用table来完成。
之前有试过以下的方式
<ul>
    <li class="left"></li>
    <li class="right"></li>
</ul>
<div style="clear: left"></div>
这里的left和right,设置适当的宽度和高度,再左右浮动。

不太喜欢这种方式,主要是因为不敢在IE下使用过多的浮动,出现了问题要找半天,还有就是左右的等高问题。浮动的时候,当左右不等高时,有时候一些字体会跑来跑去,相当的麻烦。
对我而言,我不太喜欢浮动的方式,而table天生都是左右,上下结构通吃的元素,而且对各种浏览器的支持都相当的好,所以就采用table。虽然一些样式可能会写在页面上,如
<td valign="top"></td>
不过我倒是觉得无所谓。

2.首页出现的一些标题,和内容简要,采用的是
<h2>标题</h2>
<p>内容....</p>
也是符合html语义的书写形式,SEO的资料上说是搜索引擎喜欢有意义的html元素,会对这些<h>中出现的内容进行加分。估且相信吧。
这样写也是一目了然。
图片:

标题结构

 

3.列表用<ul><li>....</li></ul>的方式,不需要浮动,设置margin:0,padding:0后,天生就换行,而且就html的语义来说,列表就是用ul,li来设计的。
当然也可以用<br />来实现换行。只是这种<br />方式比较适合一个段落里面的换行。
图片:

翻译迷列表结构

 

4.圈子中的头像设计
圈子中的头像采用的<ul><li>....</li></ul>的书写形式,再让其左浮动,没有采用table,就要是还没确定好一行要放几个,浮动相对灵活,设置一下宽度,很容易就可以实现1行放置头像个数的转变。
图片:

翻译迷圈子列表

 

5.图片的设计
图片采用的是将小图合并成大图的方式。再用background-position进行控制,如这个链接http://www.fanyimi.com/images/bg.jpg ,看到一张大图片了吗?
对于一些需要background-repeat的图片,将其合并到另一张图片中,设定为宽度为10px,不设定太小是因为看到资料时,如果你设定为1px,那么某个div为200px,则背景要重绘200次,很耗浏览器。
于是忽,我就设定为10px了,看这个链接http://www.fanyimi.com/images/bgRepeat.jpg ,看到一张充满渐变的图片了吗?

目前翻译迷的整体设计是:div打外部布局,table打细节,两栏结构,优先考虑table,再考虑使用float的ul等元素。

现在首页在IE6和Firefox下表现正常,哈哈。

 

6.JS的编写
目前翻译迷上的js量比较少,有一个地方就是分页组件中,对页数输入框加入了onkeyup的事件,这样,输入页码,并输入加车后,就可以响应了。
图片:

翻页

博客中富文本输入框,采用的xheditor组件,感觉一般,效果还要加强,有空试一试别的组件,并且要扩大页面的编辑区,现在编辑区感觉太小了,JE的编辑区感觉也很小。
目前博客中当改变博客内容时,要离开页面时,会提示页面内容已经修改,是否离开,还没有做自动保存到草稿的功能。
这个提示是通过在页面上加了一个beforeunload事件
window.onbeforeunload = function(e) {
    ...
}
在事件中编写,当旧内容与新内容不相等时,弹出提示。

博客中的图片上传,采用的swfobj上传组件,赞一个,JE的图片上传做得不错。
图片:

翻译迷输入框

页面还在完善中,有兴趣上一上http://www.fanyimi.com 翻译迷 ,看到广告合适的话就帮忙点一点吧,哈哈,待续...

  • 大小: 30.1 KB
  • 大小: 26.8 KB
  • 大小: 55.8 KB
  • 大小: 30.8 KB
  • 大小: 19.3 KB
  • 大小: 23.9 KB
1
0
分享到:
评论

相关推荐

    基于Bootstrap的旅游官网页面实例

    Bootstrap是世界上最流行的前端开发框架之一,由Twitter的设计师和开发者创建。它提供了一套完整的响应式布局、移动设备优先的Web开发工具,旨在快速构建美观且功能强大的网站或应用程序。在"基于Bootstrap的旅游...

    HTML与CSS网站设计实践之旅源代码

    【HTML与CSS网站设计实践之旅源代码】是一个与网页设计相关的资源包,包含了学习和实践HTML和CSS技术的源码示例。HTML(HyperText Markup Language)是网页内容的结构化语言,而CSS(Cascading Style Sheets)则是...

    基于jsp的旅游网站 毕业设计.rar

    【基于JSP的旅游网站系统】是一个典型的Web应用程序开发实例,主要使用Java Server Pages(JSP)技术构建。JSP是一种动态网页开发技术,它允许开发者在HTML或XML文档中嵌入Java代码,以实现服务器端的数据处理和业务...

    5.0javaEE_原生Servlet_MySql塞北村镇旅游网站设计.zip

    标题中的“5.0javaEE_原生Servlet_MySql塞北村镇旅游网站设计”表明这是一个基于Java EE技术栈,使用原始Servlet实现的Web应用程序,主要用于塞北村镇的旅游信息发布和管理。该程序可能集成了MySQL数据库来存储旅游...

    CSS探索之旅

    在介绍和讲解CSS的探索之旅中,首先应当明确CSS的发展历程和定位。CSS(层叠样式表)是前端开发者必须掌握的基本技术之一,它负责网页的样式和布局。早期的CSS 2.1版本缺乏现代化的布局工具,而到了CSS3时代,引入了...

    毕业论文-基于JSP的旅游网站前台模块设计实现.doc

    接着,论文详细地描述了旅游网站前台模块的设计和实现过程,包括需求分析、系统设计、数据库设计、页面设计和测试等方面。最后,论文总结了基于JSP的旅游网站前台模块设计实现的优点和不足之处,提出了未来的发展...

    node.js的旅游网站设计浅析-网站设计-设计.pdf

    2. 主题游:主题游包括艺术之旅,发现历史,探险之旅,发现美食四部分,用户可以根据自己的兴趣爱好,选择合适的出行路线。 3. 近期活动:近期活动包括一元抽奖,寻找牡丹,每日推荐,路线投票等。活动会随着时间的...

    基于J2EE旅游博客网站系统设计与实现

    《基于J2EE旅游博客网站系统设计与实现》 在当今信息化时代,互联网技术日新月异,旅游业作为全球最大的产业之一,与互联网的结合愈发紧密。基于J2EE的旅游博客网站系统设计与实现,旨在提供一个集旅游分享、信息...

    ExtJs开始之旅

    本讲将带你开启ExtJS的探索之旅,通过四个部分的学习,你将逐步掌握其核心概念和实践技巧。 首先,"初识ExtJS" 部分会介绍ExtJS的基本理念和架构,包括MVC(Model-View-Controller)设计模式的应用,以及如何利用这...

    计算机毕业设计之jsp基于web旅游网站的设计与实现.zip

    【标题】:“计算机毕业设计之jsp基于web旅游网站的设计与实现” 这个毕业设计项目的核心是构建一个基于Web的旅游网站,使用JavaServer Pages (JSP) 技术作为后端开发语言,它属于Web应用程序的一种,能够处理...

    设计一个旅游网站首页网页设计作业.pdf

    在这个网页设计作业中,我们需要设计一个旅游网站首页,其核心目标是吸引...通过精心的布局、色彩搭配、功能设置,我们可以创造出一个既美观又实用的旅游平台,激发用户的旅行热情,引导他们开始一段愉快的探索之旅。

    利用bootstrap编写的旅游网页

    Bootstrap是世界上最受欢迎的前端开发框架之一,主要用于快速构建响应式和移动优先的网站。这个名为“利用bootstrap编写的旅游网页”的项目,显然旨在教授初学者如何利用HTML、CSS以及Bootstrap来设计一个与旅游相关...

    浏览器兼容之旅第一站:如何在页面中创建IE条件注释

    此外,JavaScript库如Respond.js可以用来为旧版IE浏览器提供对媒体查询的支持,从而改善响应式设计的兼容性。 总结来说,虽然条件注释有其特定的使用场景和优势,但作为Web开发者,应当具备了解各种兼容性解决策略...

    旅游网页设计

    在网页设计领域,旅游网页设计是一项独特且富有挑战性的任务,因为这类网站需要吸引人们的眼球,同时提供丰富、实用的信息,激发用户的旅行欲望。"旅游网页设计"这个主题涵盖了许多关键知识点,包括用户体验(UX)、...

    旅游网站毕业设计.doc

    ### 旅游网站毕业设计项目概述 #### 项目背景 随着社会经济的发展和人们生活水平的提高,旅游业已经成为全球范围内最具活力和发展潜力的产业之一。在这个背景下,如何通过互联网技术更好地服务于旅游业,成为了当前...

    java毕业设计之旅游网站的设计与实现源码(springboot+vue+mysql+说明文档+LW).zip

    "管理员可以在用户信息管理页面进行用户信息的修改,删除和新增。旅游动态管理页面允许管理员查看和修改旅游动态, 也可以进行删除操作。景点信息管理页面和公告信息管理页面则允许管理员根据信息新增、修改和查询。...

    Web-页面访问之旅

    介绍了web页面访问的过程中设计的计算机技术,包括url dns 网络协议等

    计算机毕业设计之jsp旅游网站.zip

    【标题】"计算机毕业设计之jsp旅游网站"指的是一个基于JavaServer Pages(JSP)技术构建的在线旅游服务平台。这个项目可能涵盖了用户注册、登录、浏览旅游产品、预订服务等功能,旨在提供一个全面的在线旅游体验。...

Global site tag (gtag.js) - Google Analytics