最近做的一个首页,有很多值得总结的地方

    技术2025-06-03  96

    关于做网页的步骤:开始做的时候不是很在意这方面的步骤问题,只想到按着设计图向下做,结果在js特效部分卡了很长时间,感觉html+css也就用了20%的时间,js用了80%而且做的也不是很满意。所以,要注意步骤问题,想一下,应该是这样的吧,首先把设计图画出来,这样才知道该做什么,而且能把网页的尺寸,分栏,比例等一些东西划分清楚。其次,按照设计图把项目化分成块的,对每块的尺寸比例进行定位。最后把每一块填充完整。至此,网页做结束了,做一些细节的修改就基本OK了,剩下的就是根据客户的要求进行修改。

    关于一些命名规范,做一个稍微大一点的项目基本要用到很多模块,所以,命名规范是必须的了。基本要做到简明,见名知意,别人终结的很不错,借来参考。

    模块:module.css 基本共用:base.css 布局、版面:layout.css 主题:themes.css 专栏:columns.css 文字:font.css 表单:forms.css 补丁:mend.css 打印:print.css

    头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:copyright 滚动:scroll 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 加入:joinus 指南:guild 服务:service 注册:regsiter 状态态:status 投票:vote 合作伙伴:partner

    页面结构 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center+导航 导航:nav 主导航:mainbav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary+功能 标志:logo 广告:banner 登陆:login 登录条:loginbar 注册:regsiter 搜索:search 功能区:shop 标题:title 加入:joinus 状态:status 按钮:btn 滚动:scroll 标签页:tab 文章列表:list 提示信息:msg 当前的: current 小技巧:tips 图标: icon 注释:note 指南:guild 服务:service 热点:hot 新闻:news 下载:download 投票:vote 合作伙伴:partner 友情链接:link 版权:copyright

    颜色:使用颜色的名称或者16进制代码 .red {color: red;} .f60 {color: #f60;} .ff8600 {color: #ff8600;}

    字体大小:直接使用“font+字体大小”作为名称 .font12px {font-size: 12px;} .font9pt {font-size: 9pt;}

    对齐样式:使用对齐目标的英文名称 .left {float:left;} .bottom {float:bottom;}

    标题栏样式:使用“类别+功能”的方式命名 .barnews { } .barproduct { }

    技术层次的总结:

    1.居中的方式是这样的,页面内容的宽度必须和body属性设置的相同,设置body{width:960px;text-alian:center;margin:0 auto;}(宽度自定),这样就能居中了。

    2.对任意一个元素任意定位的话,可以使用直角坐标系,即向正半轴移动(top,right)的话,直接是移动像素数,向负半轴移动的话则是负的移动像素数。

    3.对于banckround属性,如果用一张大图片的某一部分,免不了用到坐标,可能,你会问坐标怎么找呢,so easy,用ps打开图片,用虚线框工具画出那部分,然后把指针放在左上角虚线框的左上角,在ps面板右面是不是有一个坐标值全部取负,(这一点没少费事,感觉应该是第四象限的,可是不是。),这个值是取到了,然后绝对定位OK,postion:absulote;。

    4.对于每一部分的ul要做到每部分相互能识别,这样不会因为这个问题影响其他部分的列表或者是导航的样式.

    5.伪类的使用,你可能遇到过这种情况,有时候文本过长,你想把这些文本超出部分变成声略号,可以使用这种方法selecter:after{connect:“…";}

    e,还有一些,只可意会不可言传。先这么着吧。

    最新回复(0)