目录

  • 1 初识HTML5
    • 1.1 HTML5基础
    • 1.2 文本和图像标记
    • 1.3 实验1我的个人简历
    • 1.4 实验2锚点的使用
    • 1.5 实验3制作电影宣传效果
    • 1.6 实验4三级树列表的嵌套页面
    • 1.7 结构、分组、交互元素及其全局属性
  • 2 CSS3入门
    • 2.1 CSS核心基础
    • 2.2 文本样式属性
    • 2.3 实验5 嵌入CSS文件控制样式
    • 2.4 实验6 制作电商服装推广页面
  • 3 CSS选择器
    • 3.1 选择器上篇
    • 3.2 选择器下篇
    • 3.3 实验8制作网页设计列表
  • 4 盒子模型
    • 4.1 盒子模型概述
    • 4.2 盒子模型课堂操作
    • 4.3 实验9制作音乐排行榜
  • 5 浮动与定位
    • 5.1 浮动
    • 5.2 定位
    • 5.3 定位操作题
    • 5.4 综合实例
    • 5.5 实验10制作电子商务团购页面
    • 5.6 如何创建首页
  • 6 表单的应用
    • 6.1 表单概述
    • 6.2 Input类型及属性
    • 6.3 CSS美化表单
    • 6.4 实验11会员信息登记表
    • 6.5 综合训练“一个网页的诞生”
  • 7 多媒体应用
    • 7.1 多媒体
    • 7.2 多媒体训练
  • 8 第九单元
    • 8.1 第一课时
    • 8.2 第二课时
如何创建首页

5.6.1如何设计布局网站首页

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

*{margin: 0;padding: 0;list-style: none;}

div{border:1px solid gray;}

#wrap{width: 500px; margin: 20px auto;}

#top{overflow: hidden;}

#nav li{float: left; margin: 10px;}

#left{border: solid red; width: 300px;height: 400px;}

#right{border: solid blue; width: 180px;height: 400px;

float: right;}

</style>

</head>

<body>

<!-- 最大的盒子wrap -->

<div id="wrap">

<div id="top">

<!-- <img src=".." alt=""> -->

<div id="nav">

<ul>

<li><a href="#">网站首页</a></li>

<li><a href="#">商品列表</a></li>

<li><a href="#">联系我们</a></li>

</ul>

</div>

</div>

<div id="main">

<div id="right">右边次要区域</div>

<div id="left">左边主要区域</div>

</div>

<div id="footer">

<p>版权信息..</p>

</div>

</div>

</body>

</html>