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

html-css019

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

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

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

CSS初始化

确定版心的大小

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

如图所示版心的宽为1200px

导航栏的大小为1366px

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

页面结构部分:

CSS的样式部分

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

结构

css样式为:

注意点:

结构

CSS样式:

需要注意的是

结构

样式

注意:

结构

样式css

注意

下面就是一个简单的css定义:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title></title>

<style>

.abc{width:500pxheight:30pxline-height:30pxtext-align:centerborder:1px solid #cccfont-size:13pxcolor:redmargin:auto}

</style>

</head>

<body>

<div class="abc">文字文字</div>

</body>

</html>

<style></style>之间写css代码。

.abc{这里面是定义abc的css}

<div class="abc">文字文字</div>这个class="abc"  就代表这个div的class是abc。css中定义abc就可以了。

楼上的也太复杂了,什么都贴出来了?—

页面

代码

<div

class="content">

<div

class="left"></div>

<div

class="mid"></div>

<div

class="right"></div>

</div>

css文件

.content{

width:800px

magin:0

auto

}

.left{

float:left}

.mid{

float:left}

.right{

float:left}