贝云CMS的首页制作总结

自己写了一点，然后对比师傅写的做一个总结。

首先接到PSD文件后开始进行大板块的结构规划，这是一个很经典的门户首页。

头部部分自己的代码如下：

<div class="header"><div class="comwidth clearfloat"><div class="header_left fl"><ul><li><a href="">设为首页</a></li><li><a href="">加入收藏</a></li><li><a href="" class="weather">武汉<big></big><span>3℃~-6℃</span></a></li><li><a href="">空气质量：<span class="wu">无</span></a></li></ul></div><div class="header_right fr"><ul><li><a href="" class="weibo"></a></li><li><a href="" class="TXweibo"></a></li><li><a href="" class="calendar"></a></li><li><a href="">注册</a></li><li><a href="">登录</a></li><li><a href="">会员中心</a></li><li><a href="">投稿</a></li></ul></div></div></div>

自己是这样分析的，网站的宽度都是1200px,但是对于内容有一个距离，可以说是内边距padding也可以说是内容的margin，大概是左右25px，所以我用了一个固定的内容宽度，一个.comwidth的宽度来限制内容，然后就可以开始写样式了，这里师傅有一个技巧是：直接用<li>|</li>这样的写法代替了 border-right或者left进行操作

天气使用了应该是一个API，天气部分的代码

<li><iframe id="fancybox-frame" name="fancybox-frame1516582196375" frameborder="0" scrolling="no" hspace="0"  src="http://i.tianqi.com/index.php?c=code&a=getcode&id=34&h=40&w=280" style="padding: 7px 20px;" ></iframe></li>

.comwidth{width: 1150px;margin:0 auto;overflow: hidden;
}
.fl{float: left;
}
.fr{float: right;
}
/*header*/
.header{width: 1200px;margin:0 auto;background: #ccc;
}
.header .comwidth ul li{float: left;height: 40px;line-height: 40px;
}
.header .comwidth .header_left ul li:first-child a{border-right: 1px solid #666666;padding-left: 0px;
}
.header .comwidth .header_left ul li a{font-size: 12px;color:#666666;height: 15px;padding:0 10px;
}
.header .comwidth ul .weather{color:#000;border-right: 1px solid #666666;
}
.header .comwidth ul .weather big{display: inline-block;width: 25px;height: 14px;padding:0 5px;background:url(../img/i_iconweather.png)center center no-repeat;
}
.header .comwidth ul li .wu{background: #7cc623;padding:5px 7px;color:#fff;
}
.header .comwidth .header_right ul .weibo{display: inline-block;height: 40px;width: 25px;padding:0 9px;border-left: 1px solid #c1c1c1;border-right: 1px solid #c1c1c1;background: url(../img/i_iconweibo.png) center center no-repeat;
}
.header .comwidth .header_right ul .TXweibo{display: inline-block;height: 40px;width: 25px;padding:0 9px;border-right: 1px solid #c1c1c1;background: url(../img/i_iconTXweibo.png) center center no-repeat;
}
.header .comwidth .header_right ul .calendar{display: inline-block;height: 40px;width: 25px;padding:0 9px;border-right: 1px solid #c1c1c1;background: url(../img/i_iconcalendar.png) center center no-repeat;
}
.header .comwidth .header_right ul li a{font-size: 12px;color:#666666;height: 15px;padding:0 10px;border-right: 1px solid #666666;
}
.header .comwidth .header_right ul li:last-child a{border:none;padding-right: 0px;
}

然后顶部的收藏栏就写完了

接下来是logo部分

贝云CMS的首页制作总结相关推荐

贝云cms内容管理系统（thinkphp5.0开源cms管理系统）
byCms包含文章,图片,下载,视频模型,基于thinkphp5.0.9,可无缝升级至thinkphp.1.0,是一套简单,易用的内容管理系统,旨在帮助开发者节约web应用后台开发时间和精力,以最快的 ...
网站html静态化教程,新云CMS网站内容管理系统生成HTML静态化教程
网站静态化一直是SEO重点关注对象.静态化有好有坏,最大的好处是收录迅速,坏处是纯静态的HTML页面难以维护,特别是对于大型的网站.本文将介绍如何将新云CMS网站管理系统静态化.html 本文以新云C ...
帝云CMS内容管理系统DiYunCMS v4.3.12
简介: 帝云CMS内容管理系统是基于PHP7语言采用CodeIgniter4作为开发框架生产的网站内容管理框架,提供"电脑网站 + 手机网站 + APP 接口"一体化网站技术解决方 ...
移动端开发——京东首页制作（流式布局）
移动端开发--京东首页制作(流式布局) 项目准备初始化基本文件夹创建index.html 设置视口引入基本公共样式引入自己的css样 <!DOCTYPE html> <htm ...
云开发表情包制作神器微信小程序源码下载,支持各种自定义
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
【小程序源码】云开发表情包制作神器微信小程序源码下载,支持各种自定义
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
小程序源码：云开发表情包制作神器-多玩法安装简单
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
“青春树儿童摄影网”首页制作
"青春树儿童摄影网"首页制作一.实验名称: 二.实验日期: 三.实验目的: 四.实验内容: 五.实验步骤: 六.实验结果: 七.源程序: 八.心得体会: 一.实验名称: &quo ...
cas虚拟服务器,适用于CAS虚拟化平台的CloudOS3.0云主机镜像的制作
本文主要介绍适用于CAS虚拟化平台的H3Cloud OS3.0制作云主机镜像的方法,下文中的例子是镜像文件是安装Windows操作系统. 1.新建虚拟机首先在CAS管理平台新建虚拟机,若安装Wind ...

贝云CMS的首页制作总结

贝云CMS的首页制作总结相关推荐

最新文章

热门文章