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

html-css027

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

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

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

CSS初始化

确定版心的大小

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

如图所示版心的宽为1200px

导航栏的大小为1366px

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

页面结构部分：

CSS的样式部分

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

结构

css样式为：

注意点：

结构

CSS样式：

需要注意的是

结构

样式

注意：

结构

样式css

注意

《css高效开发实战》百度网盘pdf最新全集下载:

链接：https://pan.baidu.com/s/18V4g27rIjqVeKKmuJtyWfQ

?pwd=xn7r 提取码：xn7r

简介：想象一下，一个网页只有HTML，没有Css，那就是素颜和上妆的区别。而一个网页只有Css，没用Css 3，那就是马车和汽车的区别！汽车代表的是高效、美观，Css 3的意图也是如此。移动设备的流行导致了响应式设计的流行，而CSS 3正是实现这种设计的精髓。本书围绕的就是如何跨浏览器、跨设备进行高效率的CSS开发。

本书分为3部分：第1部分是HTML/CSS基础和CSS 3新特性演示，涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子、媒介查询和响应式设计等多个方面；第2部分介绍Bootstrap，Foundation、Pure等当前流行的Css框架及LESS.SASS等生产力工具；第3部分是实战案例，包括DIV+CSS案例、HTML 5+CsS 3案例、Bootstrap案例和Foundation案例。  

<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%的宽度是，边栏部分，呵呵，这个案例如何