主页的需求分析和设计
主页搭建:框架,浮动,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;
}