第二次学习 | 易学教程

第二节课感觉上也不是很难，主要是给网页的格式排版，要用到<div></div>

一个静态页面要有标题，有开头，有内容，有结尾，所以分几个模块用<div id = **>来写开头给定id也就是这个“模块”的名字，我们设最上面标题类为banner，下面有菜单menu，接着是主要内容main，最下面是末尾footer。

先设一个“盒子”box，将上面的东西放在盒子里，如下

————————————这里是代码——————————————————

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<link href="csss.css" type="text/css" rel="stylesheet" />

</head>

<body>
<div id="box">
   <div id="banner"> 
   我是图片
<img src="../图标/WPH.ico" alt="我的图片不见了" />
</div>
<div id="menu">
   我是菜单
</div>
<div id="main">
   
   <div id="left">
zuobian
</div>
<div id="right">
youbian
</div>

</div>
<div id="footer">
   footer
</div>
</div>

</body>
</html>

—————————————————代码完—————————————————

在这里，main分成了两块，左边为left右为right，包含在main里面

开头引入了css文件，我起名为csss.css（瞎起的）。我们只有上面的代码而不用css规划一下是无法达到把main分左右两部分的目的

css代码如下

——————————————这里是代码——————————————————

@charset "utf-8";
/* CSS Document */

#box{
   background-color:#9F0;
   width:1024px;
   /*margin:0 auto;*//*居中*/
   height:1300px;
   margin:0 auto 0 auto;/*上右下左*/
   }

/*放图片，设置高度和图片一样高*/
#banner{
   background-color:#96F;
   height:209px;

   }
#menu{
   background-color:#9FF;
   height:50px;
   }
#main{
   background-color:#066;
   height:1000px;
   }
   #left{
       background-color:#00F;
       width:250px;
       height:1000px;
       float:left;
       }
   #right{
       background-color:#390;
       height:1000px;
       width:774px;
       float:right;
       }
#footer{
   background-color:#FF3;
   height:80px;
   }

——————————————代码完——————————————————————

这里大部分沿用上节课教的设置大小，背景等

main里分左右部分的关键代码是float，也很好理解

注：这里的图片要用自己本地的，自己找好位置加上

——————————————————本章完————————————————皮一下——————————

来源：oschina

链接：https://my.oschina.net/u/4090376/blog/3021619

标签

csss