主页的需求分析和设计
主页搭建：框架，浮动，overflow，position
架构基本上分为：
①header（头）：logo，navigator（导航栏）
②banner（横幅）
③content （内容）：一般可以有左右两个板块
④footer
HTML架构搭建
纯HTML的网页，没有添加CSS样式的状态
<!--
作者：offline
时间：2018-11-28
描述：HTML主页的搭建（一）
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="header">
<div id="logo">
<a href="#">
<img src="./img/logo2.png" />
</a>
</div>
<div id="nav">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单7</a></li>
</ul>
</div>
</div>
<div id="banner">
<a href="#"><img src="img/banner.jpg"/></a>
</div>
<div id="content">
<div id="leftArticle">
<a href="#"><img src="img/article2.jpg" alt="" /></a>
<h1>文章标题================</h1>
<p>企鹅我去热饭热气</p>
<p>企鹅我去热饭热气</p>
</div>
<div id="rightInfo">
<dl>
<dt>标题1：请问问问而其他</dt>
<dd>去去去特服上的伟大的送点饭</dd>
<dd>去去去特服上的伟大的送点饭</dd>
<dd>去去去特服上的伟大的送点饭</dd>
</dl>
</div>
</div>
<div id="footer"></div>
<p>
<a href="">关于XX</a>
<a href="">广告服务</a>
<a href="">联系我们</a>
<a href="">版权声明</a>
<a href="">合作对象</a>
</p>
<p>京ICP备 11111111号</p>
<!--网站提交备案资料，经工业信息化产业部（及各地通信管理局）
审核通过后，会通过电子邮箱发送一个备案号码给你-->
All rights(c) 2008-2010 Reserved <!-- 表示所有的权利都是被保护的:主要是版权-->
</body>
</html>
可以查看一下纯HTML下的网页效果
header部分的CSS样式
（一）
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*为什么要写margin：0*/
/*因为不同浏览器缺省的margin和padding，都设成0，避免兼容性问题*/
/*加不加*号，加*号之后会在整个浏览器跑一遍，轮询所有的元素效率低下，这会增加浏览器的负担*/
/**{
margin: 0;
padding: 0;
}*/
/*正确的写法如下：囊括所有元素*/
body,div,p,ul,li,dl,dt,dd,h1,a{
margin: 0;
padding: 0;
}
html,body{
background: #2E2E2E;
}
#header,#banner,#content,#footer{
/*background: #900; 用一个红色来看元素整体是否居中*/
width: 1176px;
margin: 0 auto;/*margin: 上下居中是0，而auto代表的就是左右居中*/
}
body{
padding-top: 45px;
}
img{
border: none;/*取消img的边框*/
}
</style>
</head> 查看一下此时的效果，我换了一张图片
这里提出一个问题，img是一个内联元素还是块状元素，我们回顾一下内联元素和块状元素的区别
<!--块元素：
1.一般是一个容器，可以容纳其他的块元素和内联元素
2.块元素，排斥与其他元素在同一行
3.块元素的宽度和高度都起作用，意思是可以设置块的大小
内联元素：
1.内容只能容纳文本或者其他内联元素
2.可以与其他内联元素排在同一行
3.width、height不起作用，大小无法设置,也就是可以设置高宽，但是并不会显示出来，不起作用 -->
img是一个内联元素，但是他必须有宽高，这就要求我们先将img设成block，这样才能继续设他的宽高。
（2）
<style type="text/css">
/*通常来说，img元素是内联元素，为了能为img元素设定宽高
* 我们会用display:block来修饰img
* 如果img被包括在一个a标签的内部，那么a标签也需要设为display:block修饰
*/
#logo{
width: 220px;/*1176-222=954所以还剩下的宽度是954*/
height:84px;
float: left;
}
#logo a{
display: block;
width: 222px;
height: 84px;
}
#logo a img{
display: block;
}
#nav{/*导航栏*/
width:954px;
height: 84px;
float: left;
background: #111111;
}
#nav li{
float: left;
list-style: none;/*去掉点*/
}
#nav li a{
text-decoration: none;/*去掉下划线*/
}为了更美观，我重新换了一个logo
对照一下一些操作之后
<style type="text/css">
#nav li .navActive{
background: linear-gradient(to bottom,#EEEEEE,#555555);/*设置他的颜色是渐变的*/
}
</style>
<body>
<ul>
<li><a class="navActive" href="#">菜单1</a></li>
</ul>
</body>
header部分的css就完成了
<!--
作者：offline
时间：2018-11-28
描述：主页的搭建（一）
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*为什么要写margin：0*/
/*因为不同浏览器缺省的margin和padding，都设成0，避免兼容性问题*/
/*加不加*号，加*号之后会在整个浏览器跑一遍，轮询所有的元素效率低下，这会增加浏览器的负担*/
/**{
margin: 0;
padding: 0;
}*/
/*正确的写法如下：囊括所有元素*/
body,div,p,ul,li,dl,dt,dd,h1,a{
margin: 0;
padding: 0;
}
body{
font-family: "微软雅黑""verdana, geneva, sans-serif";/*设置字体格式*/
}
html,body{
background: #2E2E2E;
}
#header,#banner,#content,#footer{
background: #900; /*用一个红色来看元素整体是否居中*/
width: 1176px;
margin: 0 auto;/*margin: 上下居中是0，而auto代表的就是左右居中*/
}
#header{
overflow: hidden;/*overflow:用来隐藏超过div的部分，消除浮动，overflow用于隐藏溢出*/
}
/*
* 1.浮动会让子元素脱离文档流，当所有元素都脱离时，而与此同时父元素没有设定高度造成父元素高度变为0
* （也就是这个问题中header高度为0的问题）
* 2.overflow:hidden；会消除所有子元素的浮动，然后进行自适应高度计算，因为父元素没有设定高度，所以不会裁剪。
* /
/* 告诉现在的header高度为0 */
/*#header{
width: 1500px;
background: #00FF00;/*设成绿色，查看一下header高度，发现Chrome没有变化，header高度为0
}*/
body{
padding-top: 5px;
}
img{
border: none;/*取消img的边框*/
}
/*通常来说，img元素是内联元素，为了能为img元素设定宽高
* 我们会用display:block来修饰img
* 如果img被包括在一个a标签的内部，那么a标签也需要设为display:block修饰
*/
#logo{
width: 220px;
height:84px;
float: left;
}
#logo a{
display: block;
width: 222px;
height: 84px;
}
#logo a img{
display: block;
}
#nav{/*导航栏*/
width:956px;/*1176-222=954所以还剩下的宽度是954,但是不知道什么原因，不匹配，所以我加了2px*/
height: 84px;
float: left;
background: #111111;
}
#nav li{
float: left;
list-style: none;/*去掉点*/
}
#nav li a{
text-decoration: none;/*去掉下划线*/
display: block;/*因为a标签是内联元素，所以需要先把他设为块，才能更改他的大小*/
padding: 0 20px;/*上下不需要设置，将左右设成20px*/
height: 84px;
line-height: 84px;/*居中显示*/
float: left;
font-size: 23px;
text-align: center;
color: #EEEEEE;
}
#nav li a:hover{/*设置菜单栏点击后的样式*/
color: #111111;
font-size: 24px;
background: #EEEEEE;
}
#nav li .navActive{
background: linear-gradient(to bottom,#EEEEEE,#555555);/*设置他的颜色是渐变的*/
*background: #999999;
/*
* 对IE6而言，第一行，linear-gradient不支持，所以显示不出来
* 第二行，认识*，所以background设定为#999999
* 第二行覆盖第一行
* 对Chrome而言，第一行，支持
* 第二行，不认识*
* 第一行生效
*/
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<a href="#">
<img src="./img/logo.png" />
</a>
</div>
<div id="nav">
<ul>
<li><a class="navActive" href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单7</a></li>
</ul>
</div>
</div>
<div id="banner">
<a href="#"><img src="img/bannerR.png"/></a>
</div>
<div id="content">
<div id="leftArticle">
<a href="#"><img src="img/article2.jpg" alt="" /></a>
<h1>文章标题================</h1>
<p>企鹅我去热饭热气</p>
<p>企鹅我去热饭热气</p>
</div>
<div id="rightInfo">
<dl>
<dt>标题1：请问问问而其他</dt>
<dd>去去去特服上的伟大的送点饭</dd>
<dd>去去去特服上的伟大的送点饭</dd>
<dd>去去去特服上的伟大的送点饭</dd>
</dl>
</div>
</div>
<div id="footer">
<p>
<a href="">关于XX</a>
<a href="">广告服务</a>
<a href="">联系我们</a>
<a href="">版权声明</a>
<a href="">合作对象</a>
</p>
<p>京ICP备 11111111号</p>
<!--网站提交备案资料，经工业信息化产业部（及各地通信管理局）
审核通过后，会通过电子邮箱发送一个备案号码给你-->
All rights(c) 2008-2010 Reserved <!-- 表示所有的权利都是被保护的:主要是版权-->
</div>
</body>
</html>
banner部分css
<style type="text/css">
#banner{
margin: 10px auto;/*上下10个px左右居中*/
height: 580px;
}
#banner a,#banner a img{
display: block;
width: 1176px;
height: 580px;
}
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
