学科平台页面思维脑图思维导图
平台页面功能与设计内容分解
树图思维导图提供 学科平台页面思维脑图 在线思维导图免费制作，点击“编辑”按钮，可对 学科平台页面思维脑图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：48e8bdd6415a587f61ab8a3e4e80e4a6
思维导图大纲
学科平台页面思维导图模板大纲
工具
PS:切图
PPDUCK：图片压缩工具
编辑器
步骤
1、观察设计图（PSD格式），把要切的图片依次切下来放到一个文件夹存好（图片保存为PNG格式，注意命名规范，图片大于500KB使用PPDUCK压缩一下）
2、新建对应学科文件夹（可以观察一下别的学科，有类似模板可以直接copy）
3、依次修改config.php，area.xml，style.js，images（文件夹，将切好的图片放进来，原来的图片删掉，替换templates图片）
4、操作本地后台管理平台，修改配置
5、编辑index.html，定义好模块所属关系（偶尔需要编辑一下header.html，footer.html）
6、编辑css.style（整体背景→导航栏→各模块大小位置→banner图→标题→列表→详细列表→专家学者）
整体背景
各模块大小位置
导航栏
标题
列表
列表详细
CSS常用属性
background（背景）
单位：（red url repeat left botoom） 例：background: url(../images/title-2.png) no-repeat 21px center;
如果只用改变背景颜色推荐用background-color
背景颜色带透明效果background-color: rgba（R,G,B,透明度0-1）
background-image（渐变）
linear-gradient(to right, red , yellow);
border（边框）
单位：（1px solid color） 例：border: 1px solid #c1c0be;
单边：border-top，border-bottom,... 实线：solid 虚线：dashed
box-shadow（阴影）
例：box-shadow: 10px 10px 5px #888888;
单位：
position（定位）
absoult（绝对定位）：相对于 static 定位以外的第一个父元素进行定位。
relative（相对定位）：相对于其正常位置进行定位。
fixed（绝对定位）：是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。
Static：默认值，没有定位。
Inherit：继承父元素的position值。
float（浮动）
浮动会引起高度坍塌的问题，父元素得给高度，或者清除浮动（clear：both）
margin（外边距）
padding（内边距）
left，right，top，bottom（使用定位元素后才有效）
line-height（行距）
white-space（是否换行）
不换行：nowarp（文本会在在同一行上继续，直到遇到 <br> 标签为止。）
换行：normal
word-break（换行规则）
JS
PHP
相关思维导图模板
树图思维导图提供 数字、数据、数据资源、数字资产等概念关系思维导图 在线思维导图免费制作，点击“编辑”按钮，可对 数字、数据、数据资源、数字资产等概念关系思维导图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：ac23e53e5e0dad197109a5233693c107
树图思维导图提供 糖类分类思维脑图 在线思维导图免费制作，点击“编辑”按钮，可对 糖类分类思维脑图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：a4fb083960178a1e77d1e149650b11fb
沪公网安备 31011502019485号
上海工商