css案例1:学成网在线教育平台首页01

html-css029

css案例1:学成网在线教育平台首页01,第1张

这是一个简单的案例会把之前博客中讲到的CSS的基本知识串起来,算是一个稍微综合一点的案例了!这里我会详细的每一部分的进行介绍!

从这张图中我们可以看到首页大致分为如下的几个部分:

CSS初始化

确定版心的大小

可以使用PS的矩阵选框工具确定

如图所示版心的宽为1200px

导航栏的大小为1366px

可以分为四部分来做:logo、navbar、search、personal

页面结构部分:

CSS的样式部分

其中需要注意的几个点是:

结构

css样式为:

注意点:

结构

CSS样式:

需要注意的是

结构

样式

注意:

结构

样式css

注意

<style>

*{margin:0padding:0}

.clear{clear:both}

#head {width:100%height:30px}

#warp {float:leftpadding:10pxwidth:70%}

#sidebar {float:leftpadding:10pxwidth:28%}

</style>

<body>

<div id=“head">这是顶部</div>

<div id ="warp">这是正文</div>

<div id="sidebar">这是边栏</div>

</body>

这个是最简单的,上面一个顶部,下面左边占70%的宽度是正文部分,右边占28%的宽度是,边栏部分,呵呵,这个案例如何