2014中搜门户制作攻略文档.docVIP

中搜门户CSS制作攻略文档 前言：在这里介绍一下中搜门户的CSS制作攻略以及制作技巧，方便制作人员更好的利用网站结构制作出各式各样的门户！ 建立网站----切图 首先，需要把制作时需要的图片切好，并上传上相册管理 切图的时候有很多技巧，比如导航与微件的切图，因为可以实现圆角以及各种其他较规则的图形，所以，可以按照左右原则进行切图。 比如 导航 该导航条，为左右圆角，可以切一个小的左边的图，右边的为1003px的右圆角图 链接样式 也可以进行左右切图，分别为 与 注：右侧不需要太宽，根据具体情况，右侧背景以300px宽为好 微件： 这样就可以实现圆角的切图了（注，头部右侧以及底部右侧的宽度都为1003px，中间的右侧可以自行定义宽度） 当然头部和底部也可以分为左中右进行切图具体要看设计的效果。 有些导航与头部的背景相容，如 此刻可以把导航处所在背景单独切出来，在导航样式选择中，选择导航背景设置，可以做到与头部背景相容 新建模板样式 通过门户设置的页样式设置可以新建一个默认皮肤，修改其样式，可以定义该门户全局样式定义，比如，背景颜色，链接颜色，中间区域颜色等。现在对其样式进行详细描述 下面对整体样式进行详细描述 /*整体样式：*/ body{color:#0066cc;font: 12px Arial,宋体;}/*页面整体文字颜色及字体设置*/ a:link,a:visited{color:#0066cc; text-decoration:none;}/*页面整体超链接样式*/ a:hover{color:#f00;}/*页面整体链接鼠标指向时样式*/ 用于定义body的颜色，以及链接的样式 /*头区*/ .header {margin:0 auto; width:1003px;background:url(/skin/default/headbg.jpg); position:relative;}/*头部图片*/ .logo { float:left; position:relative; left:20px; top:5px;}/*logo图片位置*/ .search { float:right;position:relative; right:10px; top:8px; }/*搜索框位置*/ .search input{margin-top:-1px; height:17px; background:#d0f3f7;border:1px solid #59cbde;}/*搜索输入框*/ .ssbtn{ float:left; width:45px;height:21px;background:url(/skin/default/ssbtn.gif) no-repeat center;}/*搜索按钮*/ .ssmore{float:left; width:45px;height:21px; background:url(/skin/default/ssmore.gif) no-repeat center;}/*更多按钮*/ .nav { float:right; position:relative; right:5px; top:10px; text-align:right; }/*顶部右侧文字*/ .titblo { position:relative;left: 100px;top: 30px; margin-bottom:50px; width:400px;}/*页名称和网址区域位置*/ .name{ font:bold 16px/16px 宋体;border:0; background:transparent;text-align:left; width:20em;filter:Shadow (Color=#ffffff,Direction=120,strength=3);}/*页名称*/ .url{background:transparent;width:480px;padding:3px; color:#000;}/*页网址*/ 定义头部区域，包括logo，搜索区域（search），页名称，页网址等具体定义，头部的背景和logo的定义可以通过 “页眉页脚设置”来具体定义 /*标签区*/ .tags {padding:0 10px 0 6px; background:url(/skin/default/tagx.gif) repeat-x bottom; width:98.4%;text-align: center;margin:0 auto;}/*页标签区域*/ .tags li{ float:left; dis