大型门户网站(响应式)

http://web.abchina.com/chn/
1,本项目是: 属于大型门户网站
2,web响应式,自适应
       采用的方案是 百分比控制。用js控制在不同的设备尺寸下加加载不同的css
3,在拿到设计的时候,先要看设计能不能切①是光pc②还是pc和移动③pc和移动都有的话,能否对照起来
4,农行项目的要求:只有 h1标签和p标签,文章 缩进问题自己控制
5,常用的命名规范:
css的命名规范:
 头:header   
内容:content/container   
尾:footer   
导航:nav   
侧栏:sidebar 
栏目:column   
页面外围控制整体布局宽度:wrapper   
左右中:left right center   
登录条:loginbar   
标志:logo   
抽奖:raffle
广告: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
导航: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 
class的命名 

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

(2)字体大小,直接使用"font+字体大小"作为名称,如 
.font12px { font-size: 12px; } 
.font9pt {font-size: 9pt; } 

(3)对齐样式,使用对齐目标的英文名称,如 

.left { float:left; } 
.bottom { float:bottom; } 

(4)标题栏样式,使用"类别+功能"的方式命名,如 
.barnews { } 
.barproduct { } 

注意事项 

1.一律小写; 
2.尽量用英文; 
3.尽量不缩写,除非一看就明白的单词. 
4.不加中杠和下划线;
主要的 master.css 
模块 module.css 
基本共用 base.css 
布局,版面 layout.css 
主题 themes.css 
专栏 columns.css 
文字 font.css 
表单 forms.css 
补丁 mend.css 
打印 print.css

下拉菜单:dropmenu


小技巧:同一个模块的可以使用同一个前缀


ie hack:
ie7/ie6 :  *
ie6:    _
ie8: \0
ie9+:    :root body{width:10px\ }
/*ie11 css hack*/
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, .class名字 { 里面的样式:样式值;}
}


常用的字体
宋体    \5B8B\4F53
黑体     \9ED1\4F53
微软雅黑  \5FAE\8F6F\96C5\9ED1

样式书写顺序:
(1)位置属性(position, top, right, z-index, display, float等)
(2)大小(width, height, padding, margin)
(3)文字系列(font, line-height, letter-spacing, color- text-align等)
(4)背景(background, border等)
(5)其他(animation, transition等)

如何使文字和图片在同一行,且在中线是:
display:table-cells;
height:58px;
verticla-align:middle;

(ff) 测性能的下载地址:
 http://yslow.org/mobile/#javascript:(function(y,p,o){p=y.body.appendChild(y.createElement('iframe'));p.id='YSLOW-bookmarklet';p.style.cssText='display:none';o=p.contentWindow.document;o.open().write('<head><body onload="YUI_config={win:window.parent,doc:window.parent.document};var d=document;d.getElementsByTagName(\'head\')[0].appendChild(d.createElement(\'script\')).src=\' http://yslow.org/yslow-bookmarklet.js\'">');o.close()}(document))

单行文本溢出省略号:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本溢出省略号:
 overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

头部内容(pc+移动)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <meta name="WT.cg_abc" content="" />
</head>

头部(pc):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="keywords" content="" />
    <meta name="description" content="" />
</head>


需要进一步的学习的:
自适应和响应式的内容
性能优化的内容
js的内容




 

【模板说明】 ┃ 1、安装Zoomla!逐浪CMS ┃2、下载解压后上传于系统根目录template文件夹下; ┃3、进入网站后台-系统配置-模板风格,指定模板文件夹名称; ┃4、保存模板配置文件夹后,再次一键开销即可使用模板。 ┃特别说明: ┃1、本模板只适用于逐浪CMS,第三方CMS不支持。 ┃2、逐浪CMS云模板基于数据库底层技术,模板方案替换会删除此前数据, ┃操作前请谨慎并作好备份。 ┃3、如果您没有安装逐浪CMS,请访问www.z01.com/pub获取程序源码。 ***红色创新Isobar门户模板*** 特别适合于:创意公司、互联网团队、企业官网 兼容:Zoomla!逐浪CMS2 3.0以及更高网站门户。 项目背景:一套为国际4A公司设计的网站的网站模板,支持响应式,支持搜索,支持无障碍浏览国际标准。 使用方法 : 1、将本方案拷到Template下,进入逐浪CMS后台-系统-模板风格。 2、点击[Isobar]方案,设置为使用。 3、或进入逐浪CMS后台,点击云端模板下载,下载[Isobar]方案,按提示设为使用即可。 扩展技巧 1、点击“系统”-“标签管理”-“元数据备份”,点击[数据恢复],即能还原节点数据元。 2、使用模板方案下的[data.bak]可还原整站备份(对于高级开发者,可自由绑定模板。 *注:使用[data.bak]恢复后,管理员admin,密码:admin888 更多技巧欢迎访问逐浪教学站www.z01.com/mtv 免费建站做场景-动力逐浪 http://v.z01.com 帮助中心:www.z01.com/help 视频教程:www.z01.com/mtv 使用手册:help.z01.com/ 推荐主机:华夏互联hx008.com欢迎访问官方网站:https://www.z01.com/ 免费下载地址:http://update.z01.com/Template/isobar.zip
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值