页面练习--随笔一个页面

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta  name="keywords" content=""/>
<meta  name="description" content=""/>

<link rel="stylesheet" type="text/css" href="css/cssstyles.css"/>
<title>首页设计</title>
</head>

<body>
<!--头部-->
<!--头部分包括Logo图片+导航条-->
<div id="header">

  <!--logo图片超链接-->
    <a id="logo" href="#"><img src="images/logo.png"/></a>
  
  <!--导航-->
  <ul id="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">培训课程</a></li>
    <li><a href="#">优秀学员</a></li>
    <li><a href="#">课程疑问</a></li>
    <li><a href="#">职业生涯</a></li>
    <li><a href="#">学员社区</a></li>
    <li><a href="#">官方博客</a></li>
    <li><a href="#">学员地址</a></li>
  </ul>
</div>



<!--banner部分-->
<!--banner图片，应该用js控制多张图片-->
  <a  id="banner" href="#"><img  src="images/banner.jpg" /></a>




<!--内容部分-->
<div id="content">

  <!--左侧的文章：图片，标题，正文-->
  <div id="leftArticle">
  
    <!--正文图片-->
    <a  id="articlePicA" href="#"><img src="images/articleBanner.jpg"/></a>
    
    <!--正文标题-->
    <h1><a href="#">Web前端开収工程师好找工作吗？</a></h1>
    
    <!--正文内容,p标签-->
    <p>据09年全国Web前端开发行业调查统计显示，09年大型企业对于Web前端开发人才需求紧缺。 Web前端开发目前是一种新兴职业，专业的前端开发人员绝大部分存在于    大型企业中，如腾讯、百度等，换种说法就是：选择从事Web前端开发就等于你的一只脚已经迈进了腾讯、百度等高薪企业。</p>
    <p>随着Web2.0的大潮席卷而来，2010年互联网发展速度空前，互联网向标准化、专业化、精细化方向发展，导致Web开发职位进一步细分，Web前端开发工程师、Web页    面重构师等这些高薪职业相继诞生。如今流行的浏览器有十几种，不同的浏览器对页面的解析不同，导致相同的页面在不同的浏览器内显示效果不同，不能兼容多种浏    览器，用户体验降低，搜索引擎抓取率低，加载速度慢等影响页面整体质量的因素产生，所以对页面制作要求越来越高，致使许多公司急需提供制作标准页面服务的技术人员。</p>
    <p>现在YAHOO、MSN等国际门户网站，网易、新浪等国内门户网站，和主流的Web2.0网站，均采用xHTML(DIV)＋CSS的框架模式，更加印证了xHTML(DIV)＋CSS是大势所趋。</p>
    <p>正因为如此Web前端开发人员成为市场上紧缺的人才，同时也成为一个新兴的高薪职业。</p> 
  </div>
  
  <!--右侧的信息链接-->
  <!--信息栏和导航栏的布局差不多，但是这里使用“dl+dt+dd”比“ul+li”要好-->
  <div id="rightInfo">
   
    <!--职业生涯栏目-->
    <dl>
      <dt>职业生涯</dt>
      <dd><a href="#">Web前端开发工程师需要掌握哪些核心技能？</a></dd>
      <dd><a href="#">我是程序员，有必要进行web前端开发的学习吗?</a></dd>
      <dd><a href="#">我是网站美工，目前发展遇到瓶颈，该如何解决？</a></dd>
      <dd><a href="#">我适合从事web前端开发行业吗？</a></dd>
      <dd><a href="#">Web前端工程师如何给自己定位？</a></dd>
      <dd><a href="#">Web前端开发工程师好找工作吗？</a></dd>
    </dl>
    
    <!--好职推荐栏目-->
    <dl>
      <dt>好职推荐</dt>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=370">盛大网络--前端开发工程师</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=397">阿里巴巴--前端开发工程师</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=97">金山软件--KIS-WEB前端页面工程师</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=62">360京东商城 -- Web前端开发工程师</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=419">阿里巴巴 - 技术部 - Web前端开发工程师（高级）</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=418">阿里巴巴 - 技术部 - Web前端开发工程师（初级）</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=417">人人网 - 技术部 - 3G前端工程师</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=416">人人网 - 技术部 - Web前端开发工程师</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=415">搜狐 - 媒体技术产品中心 - JavaScript前端</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=414">新浪 - 运营部 - Web前端开发工程师</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=413">新浪 - 无线部 - Web前端开发工程师</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=412">新浪 - 技术部 - Web前端开发工程师</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=411">新浪 - 产品部 - JavaScript前端工程师</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=410">百度 - Web前端研发工程师</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=409">百度 - 商务搜索 - Web前端研发工程师</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=408">百度 - 社会化网络事业部 - JavaScript前端</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=407">百度 - 搜索研发部 - web前端研发工程师</a></dd>
      <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&amp;tid=406">百度 - 系统部 - WEB前端开发工程师</a></dd>
    </dl>
  </div>
</div>



<!--页底部分：第一行文字全部为链接，第二行左边的是备案号，右侧是版权信息-->
<div id="footer">
  <!--上半部分为全部链接-->
  <p>
    <a href="#">关亍cssStudy</a> | 
    <a href="#">广告服务</a> | 
    <a href="#">提交问题</a> | 
    <a href="#">联系我们</a> | 
    <a href="#">版权声明</a> | 
    <a href="#">关亍隐私</a> | 
    <a href="#">合s作伙伴</a> 
  </p>
  
  <!--第二行左边的是备案号，右侧是版权信息-->
  <p>
    <a href="#">京ICP备10055601号</a> All rights(C)2008-2010 Reserved
  </p>
</div>

</body>
</html>

CSS代码：

/*标签重置,图片边框处理*/
body,div,p,ul,li,dl,dt,dd,h1,a{ margin:0px; padding:0px;}
img { border:none;}
/*设置页面的宽度，并且水平居中，四大板块的宽度应该都是一样的*/
#header,#banner,#content,#footer{ width:1000px; margin:0 auto;}


/*页面背景:html,body的背景*/
html { background:url(../images/bg.gif) repeat-x;}
body { background:url(../images/clouds.gif) repeat-x; padding-top:45px;}


/*header版块*/
/*头部与上边沿有45px的距离，为实现这个效果，我们采用设置body上内边距的办法*/
/*将header的logo图片做为块状元素，包括超链接*/
#logo { display:block; width:220px; height:54px; float:left; background-color:#991616;}
#logo img{ display:block;}
/*导航部分的css设计*/
#nav { width:780px; height:54px; list-style:none; float:left; background-color:#393838;}
#nav li{ float:left;}
#nav li a { display:block; width:86px; height:54px; line-height:54px; text-align:center; font-size:12px; text-decoration:none; float:left;
 color:#ccc;}
#nav li a:hover { color:#fff;}
/*
BUG:FireFox内，不能够自适应内部元素的高度，所以它的高度变为零，而在ie6里面却可以正帯显示，这是一个很严重的问题，如果高度不能自适应的话，那内部子元素logo和nav的浮动产生的影响就会"外泄"，对header外面的版块产生影响，从而产生版块错位。直接在header的样式里"overflow:hidden;"*/
#header { overflow:hidden;}
/*设置某一项处于当前激活状态：
#nav li .navActive { background:url(../images/navHoverBg.png) no-repeat; color:#fff;}
*/


/*banner版块*/
/*设置图片的大小，包括父容器的大小，防止图片大小自适应大小导致图片破坏页面布局*/
#banner { display:block; width:1000px; height:292px; margin-top:10px; margin-bottom:10px;}
#banner img { display:block; width:1000px; height:292px;}


/*content版块*/
#content { overflow:hidden; font-size:12px; line-height:24px; background:#EAEAEA;}
/*
bug：leftArticle和rightInfo 上下左右都有10像素的外边距，如果我们用左侧浮动来实现2栏效果，在存在外边距的情况下就会出现IE6的双倍边距Bug，为了避免出现bug，我们就利用"display:inline;"
*/
#leftArticle,#rightInfo { margin:10px; float:left; display:inline;}
#leftArticle{width:660px;} 
#rightInfo{width:300px;} 
#articlePicA,#articlePicA img { display:block;}
/*h1 styles*/
#leftArticle h1{ margin:20px 0; font-size:24px; font-family:"黑体", "楷体", "宋体";}
h1{ font-size:100%;}
#leftArticle h1 a { color:#900; text-decoration:none;}
#leftArticle h1 a:hover { text-decoration:underline;}
/*每段文字都会缩进两个文字:text-indent:2em*/
#leftArticle p { text-indent:2em; color:#333; margin-bottom:30px; font-size:14px;}
/*右侧的信息栏*/
#rightInfo dl{ margin-bottom:10px;}
/*dt*/
#rightInfo dl dt { background:url(../images/title.jpg) no-repeat; height:32px; line-height:32px; color:#fff; font-size:14px; font-weight:bold;
 text-indent:30px;}
/*dd*/
#rightInfo dl dd { height:24px; line-height:24px; background:url(../images/dot.gif) no-repeat 7px 10px; text-indent:30px;}
#rightInfo dl dd a { color:#333; text-decoration:none; }
#rightInfo dl dd a:hover { color:#999; text-decoration:underline;}


/*footer版块*/
#footer{ 
background:#393838; 
height:52px; 
line-height:18px; 
margin-top:10px;
padding-top:18px; 
text-align:center; 
color:#ccc; 
font-size:12px; }


#footer a{color:#ccc; text-decoration:none;} 
#footer a:hover{text-decoration:underline;}

 

Css设计步骤：

 

1.对用到的html标签进行Css样式的重置(margin 0,padding 0)，方便页面的重新架构。

 

2.对于页面中的所有图片边框进行处理，美观并且防止影响布局。

 

3.页面的主体居中。margin:0 auto,并且一定要设置绝对宽度。

 

4.页面的背景，背景的显示跟加载的速度有关，而背景图片的大小直接影响加载的速度。这里采用的是：给html和body都添加背景图片，不同的是html标签的背景图片非常小，是一个蓝色向白色渐变的小图片，body标签背景图片是一张完整的图片。当页面开始加载时，会先显示html的背景，上面蓝色下面白色渐变的背景，如果body背景还没加载完，页面也不会显得太单调。

 

5.header版块，logo图片和导航栏。有链接的图片，应该把a,img标签都定义成块元素，方便页面的布局。

导航的设计：ul+li 设置宽度和高度；去掉标签的点：list-style:none;注意li的左浮动；导航下的a
标签设置为块元素，设置宽高；height和line-height，如果容器设定了高度，并且有文字，最好设定行
高一样，效果显得好看！？li和li a都float:left。

(注意：overflow:hidden ！一个块状元素内的子块状元素，如果要浮动，则应该在父块状元素内添加overflow:hidden，为了防止ff的bug!)


6.设置某一项处于当前激活状态：

#nav li .navActive{ background:url(../images/navHoverBg.png) no-repeat; color:#fff;}。

 

7.banner版块，图片大小直接影响页面布局，所有图片最后定义宽度和高度，所以图片应该定义成块状元素，有链接的图片，a标签链接也应该定义成块状元素。

注：设置图片的大小，包括父容器的大小，防止图片大小自适应大小导致图片破坏页面布局。

 

8.content版块，布局时要注意两个点，第一，overflow:hidden ！一个块状元素内的子块状元素，如果要浮动，则应该在父块状元素内添加overflow:hidden，为了防止ff的bug。 第二，IE6的双边距bug，当父容器当中的子容器(块级元素)有浮动样式的时候，给子容器元素添加margin-left和margin-right样式， 会出现。

解决办法：

一，display:inline;display:list-item 这样在元素浮动时就不会出现；

二，!important解决，比如
margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;
margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10p

 

9.a标签的伪类样式，hover,visited

 

10.其他的样式，包括字体样式，背景，等等，具体调试或者借助chrome

posted @ 2015-01-26 23:17  youguess  阅读(1109)  评论(0)  编辑  收藏  举报