无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

DivCSS案例实例教程:共享十分非常好的网页页面

时间:2021-02-28 17:32来源:未知 作者:jianzhan 点击:
做前端开发也是有两年時间了,害怕说可以把他看地多透,可是多多的少量還是一些自身的物品。就制作来讲,我将一张网页页面分成四层:架构、合理布局、控制模块、目录和数据信
做前端开发也是有两年時间了,害怕说可以把他看地多透,可是多多的少量還是一些自身的物品。就制作来讲,我将一张网页页面分成四层:架构、合理布局、控制模块、目录和数据信息块。
一、架构
网页页面的架构大部分全是: 头 、 行为主体 、 尾 。,因为合理布局的必须,还应在 头 的下边也要加个 莱单 。

二、合理布局(下列用#ID表明网页页面原素)
#Head和#Foot里的也不讲过,实际查询演试网页页面源代码。
合理布局说的是将#,#Main里典型性的上下构造,大家用#Layout_1,#Layout_2表明。如图所示

三、控制模块
合理布局#Layout_1,#Layout_2里的块便是控制模块了,
按我的了解,控制模块最少要有一个ID,Class则要视网页页面设计方案,给必须器重的再加。
有关控制模块的ID名字,要取个更有意义的姓名,自然偷懒的能够用#Col_1,#Col_2,。。。
控制模块的Class名字用.cols_1,.cols_2,。。。

控制模块內部的以下图

四、目录和数据信息块
控制模块的行为主体是由目录构成的,而目录里则包括数据信息块。
按我的了解,网页页面上的信息内容实际上便是不一样种类的目录。大家应将典型性的目录方法获取出去,放到公共款式里(public.css)。
为例子,必须界定到public.css里的目录最少要有下列三种:
div css xhtml xml Example Source Code Example Source Code [] 1. .list-v 竖直目录方法 (照片和文本成竖直排序)
2. .list-h 水准目录方法 (照片和文本成水准排序)
3. .list-t 文本目录方法
数据信息块实际上是微文件格式的一个变向运用,给不一样的数据信息原素界定固定不动的构造。
必须界定的数据信息块有:
div css xhtml xml Example Source Code Example Source Code [] 1. .mVideo (视頻)
2. .mList (豆单)
3. .mUser (客户)
例如 .mVideo 应当是那样的:
div css xhtml xml Example Source Code Example Source Code [] div > div > div > div > div > div > div > div > div > div > div > div > div > div > div > /div
/div
最终,另附重要字表,便是一些用以公共性界定的ID和Class名字。
ID
div css xhtml xml Example Source Code Example Source Code [] 1. #B-* // Body用
2. #Head, #Main, #Foot //合理布局用ID
3. #Message // 系统软件信息用
4. #Logo, #Toolbar, #Search, #Menu // Head内原素
5. #Layout_*, #Group_*, #Col_* // Main内原素
6. #Links, #CopyRight // Foot内原素
7. #B* // 广告宣传位,与 > 8. #Plugin // Banner用
Class
div css xhtml xml Example Source Code Example Source Code [] 1. .txt, .btn, .label_checkbox, .label_input, .handle // 表格内原素
2. .meat // 控制模块行为主体原素
3. .list_*(.list_v, .list_h, .list-t, .list_top, ) // 目录原素,详细 目录
4. .m // 大量,可拓宽至 肯定精准定位于右上方 的原素
5. .s1, .s2, // 用以子模块块需各有界定款式的原素,如莱单、排名榜等
6. .s // 不凡原素,倘若一个原素相对性于弟兄连接点不凡,则用之
7. .b // 广告宣传位
8. .p, .d, .d_*, .h // 数据信息块内原素,各自为照片、实际、实际内原素、实际操作
9. .handle // 实际操作原素
10. .m_*(.mVideo, .mComment, .mUser, .mSubject, ) // 数据信息块原素
11. .*_fix // *原素的补丁下载原素
12. .current // 当今原素 (责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信