求人帮忙做div css 布局模板
发布网友
发布时间：2022-04-19 12:54
共7个回答
懂视网
时间：2022-04-19 17:15
做到兼容主流浏览器
如何设计一个页面？
如何切片才能更好的配合实现？
如何考虑兼容性？
如何用p+css做后台的百分比布局?
Login页面设计
先在photoshop中进行设计
1,打开ps，新建1200px*768px;打开图层面板，解锁双击背景图层，解锁，并命名为：背景层
2,新建一个文件夹：命名为色系，在里面新建一个图层，确定页面要用到的颜色。如图：
左边：渐变：点击前景色：#2366fe 背景色：#ffffff，选择渐变工具从上到下
右边：同上，前景色：#009cff 背景色：#ffffff
ps:我选用的是右边的色系。
3,打造网站背景。
3-1：先拉页面基线：因为网站一般都是960*768，而在新建的时候是：1200*768，所以左右两边会有：(1200-960)/2=120px空白。
具体方法：ctrl+R，出现标尺，从左边的标尺位置，鼠标左键点住不松住右拖。
拉出两条，分别是在：120px和1080px处
3-2,选择“吸管工具”，打开“色系层”，选择一个颜色：我选的是：#3694cf
双击“背景层”打开“图层样式”，选中并点击“渐变叠加”。
点击图中1：色卡标：会打开“拾色器”。选择取前景色：#3694cf。向下下调。确定。
点击图中2：色卡标：如上，选择取前景色：#3694cf，先上调，确定。
确定。
确定后，会得到如图所显示的背景
3-3:打造一个背景高光：新建一个图层：命名为高光。点击“选区工具”—>“椭圆工具”。在图中拉一个选区，如图：
在选区处，鼠标右击—>羽化-->输入40px，确定
打开色系，选择“吸管工具”，点击背景色，选择颜色，确定，同样点击前景色，选择颜色，确定：我的前景色是：# d7ecf9 背景色是：# 5daee2
选择“渐变工具”选择模式“中心渐变”，由上往下拉。
最后如图：
4,设计logo与标题
4-1：新建文件夹，命名logo，调整顺序
4-2：选择距形工具，参数如图，选中logo文件夹，在画面中点击一下
4-3：双击新生成的“形状1”-->打开“图层样式”-->渐变叠加-->颜色值：# 09649e，# 449cd5
如图：
4-4：勾选：投影，参数如图
4-5：勾选：描边，参数如图
确定
4-6：选择“文字工具”—>“输入文字_MT”-->调整颜色：“#cbe5f7”-->调整大小_80px-->调整位置-->设置字体。
4-7：打开“图层样式”-->内阴影，参数如图：
最终如图：
5：系统标题
5-1：选择“文字工具”—>“输入文字_XXX管理系统”-->调整颜色：“#e7f5fd”-->调整大小_50px-->调整位置-->设置字体。
5-2：设置样式：
5-3-1：添加倒影-->先中“XXX管理系统”图层-->按：ctrl+J,复制一层;-->得到“XXX管理系统 副本”-->右击“XXX管理系统 副本”-->选择“栅格化文字”-->得到图层“XXX管理系统 副本”-->新建一个图层3放在“XXX管理系统 副本”下面-->选择图层“XXX管理系统 副本”-->ctrl+E向下合并图层，得到“图层3”
相关图片：
栅格化前：
栅格化后：
与图层3合并前：
与图层3合并后：
ps:注意红字部分，不然合并就达不到效果
5-3-2：选中图层3：ctrl+T，移动位置到“XXX管理系统”位置的正下方，反转，变斜，结果如图，确定
5-3-3：选中图层3，添加蒙版
5-3-4，选中“图层3”蒙版-->修改“前景色为：白色”，背景色为：“黑色”-->选择“渐变工具”-->从上往下拉。如图，
这里注意：上面长一点点，下面刚刚到字体结束
此时，效果：
图层：
6，打造login模块，新建login文件夹，放在logo下面
6-1:打造背景，选择“距形工具”，对数如下：
6-2-1：得到形状“图层2”-->双击-->打开“图层样式”-->勾选“渐变叠加”，参数：# 09649e，# 449cd5。
6-2-2：勾选“投影”，参数如图：
6-2-3：勾选“描边”，参数如图：
6-2-4：勾选“内发光”参数如图：
6-3:根据需要调整位置。
6-4: 按照步骤5-3，给“形状2”做一个背景，做好后，最终效果如下：
6-5-1:这里有用到两个图标。处理方法如下：
ctrl+T-->调整大小-->添加“图层样式”-->勾选“渐变填充”，参数“#80aed1，#c9e0f3”-->勾选“阴影”参数：距离:1px,大小:2px,不透明度:30%，效果如下：
6-5-2:打造文本框,选择“距形工具”参数如下
6-5-3：画一个文本框，大小自定，调整位置，添加“图层样式”，参数分别如下：
效果如下：
再做一个得到焦点的文本框：
ctrl+J复制一层，双击修改“图层样式”，参数如下：
得到焦点效果如下：
6-4：密码框，验证码输入框，复制一个，调整位置即可：
效果如下：
7：登录按钮打造。
7-1:按照步骤：6-5-2画一个圆角距形，大小自定，圆角半径建议：4px;调整位置，
7-2:打开“图层样式”，参数如下：
效果：
7-3:制作一个得到焦点的按钮，修改样式如图：
效果：
到这里设计 就全部完成了，
看下最后的文件结构：
最后的效果图：
转载请注明出处：http://www.gxlcms.com/
更多ps+div+css打造蓝色后台--login页面设计相关文章请关注PHP中文网！
热心网友
时间：2022-04-19 14:23
再接下来是前台制作，由网页制作人员完成，这里要注意以下几点：
1、拿到设计稿后不要直接切割，然后到DW里直接敲代码，首先要认真研究，把握大致的框架图，做到心里有一个整体的构思，其中还可以揣摩一些设计的风格，有兴趣的朋友完全可以让自己走上设计的道路。（设计人员比制作人员工资高多了呀！无奈！）
2、用PS或者FW等绘图软件做一些实体的框架图，这个框架的目的是让你在制作的过程中能够快速而准确的进行制作和在以后的修改工作中能够高效，所以框架图要具体的标示出块状的id号或者类名，父与子的层次关系等。
3、接下来就是进行重要的一项----制作，也就是敲那该死的代码，在制作过程时，就要体现你对技术的熟练程度和技巧运用了，比如css的架构搭建，类名的选择和用CSS的简写达到高效的目的等技巧。
4、制作完成后，就是自己的检验了，争取做到制作出的网页同设计师给出的设计稿如出一辙。最后让自己的工作得到他们的肯定，当然改是难免的，不要急躁。（有些设计师太麻烦，总觉得你做出来的东西和他们的设计稿不符合！这时候你可以无视他们，直接找设计组的组长评理！还有一点就是向为网页制作人员应该和设计师搞好关系，不然工作中会遇到很多麻烦！汗一记！）
制作完成后就是程序员的工作了，制作后台程序，以方便管理网站！如果你在设计的时候用的id,name等都是乱起名字的，这时候可能需要你和程序员进行沟通，告诉他们这个id是什么，这个name是什么，麻烦！所以良好的命名习惯是必不可少的！
后台的页面设计没有什么讲究，越简单越好，当然简单不等于简陋。
这就是一个网站制作的流程！（当然，在设计之前要听取客户的意见，整个网站在表现什么风格，比如说：体现严谨，高科技，时尚等元素，这样设计师可以通过颜色表现这种风格！在设计稿定稿前要给客户过目，客户认可了才能进行制作！）
附：
CSS的命名规则
头：header
内容：content/containe
尾：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
XHTML文件中id的命名
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：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
个人整理，希望对你有点用！
另外,站长团上有产品团购,便宜有保证
热心网友
时间：2022-04-19 15:41
热心网友
时间：2022-04-19 17:16
热心网友
时间：2022-04-19 19:07
热心网友
时间：2022-04-19 21:15
热心网友
时间：2022-04-19 23:40
