页面练习--随笔一个页面
html代码：php
<!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&tid=370">盛大网络--前端开发工程师</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=397">阿里巴巴--前端开发工程师</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=97">金山软件--KIS-WEB前端页面工程师</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=62">360京东商城 -- Web前端开发工程师</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=419">阿里巴巴 - 技术部 - Web前端开发工程师（高级）</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=418">阿里巴巴 - 技术部 - Web前端开发工程师（初级）</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=417">人人网 - 技术部 - 3G前端工程师</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=416">人人网 - 技术部 - Web前端开发工程师</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=415">搜狐 - 媒体技术产品中心 - JavaScript前端</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=414">新浪 - 运营部 - Web前端开发工程师</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=413">新浪 - 无线部 - Web前端开发工程师</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=412">新浪 - 技术部 - Web前端开发工程师</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=411">新浪 - 产品部 - JavaScript前端工程师</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=410">百度 - Web前端研发工程师</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=409">百度 - 商务搜索 - Web前端研发工程师</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=408">百度 - 社会化网络事业部 - JavaScript前端</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=407">百度 - 搜索研发部 - web前端研发工程师</a></dd>
<dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&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代码：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设计步骤：html
1.对用到的html标签进行Css样式的重置(margin 0,padding 0)，方便页面的从新架构。前端
2.对于页面中的全部图片边框进行处理，美观而且防止影响布局。程序员
3.页面的主体居中。margin:0 auto,而且必定要设置绝对宽度。web
4.页面的背景，背景的显示跟加载的速度有关，而背景图片的大小直接影响加载的速度。这里采用的是：给html和body都添加背景图片，不一样的是html标签的背景图片很是小，是一个蓝色向白色渐变的小图片，body标签背景图片是一张完整的图片。当页面开始加载时，会先显示html的背景，上面蓝色下面白色渐变的背景，若是body背景还没加载完，页面也不会显得太单调。chrome
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
相关文章
- 1. 页面练习
- 2. 一个页面跳转到另外一个页面，在另外一个页面为前一个页面赋值
- 3. 练习:W3C页面制做
- 4. 博客页面练习
- 5. html页面小练习
- 6. 页面练习--鲜花店
- 7. 注册页面练习
- 8. 移动端页面练习
- 9. 登陆页面练习
- 10. 第一个页面
- 更多相关文章...
- • XSL-FO 页面 - XSL-FO 教程
- • jQuery Mobile 页面 - jQuery Mobile 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Tomcat学习笔记（史上最全tomcat学习笔记）
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 页面练习
- 2. 一个页面跳转到另外一个页面，在另外一个页面为前一个页面赋值
- 3. 练习:W3C页面制做
- 4. 博客页面练习
- 5. html页面小练习
- 6. 页面练习--鲜花店
- 7. 注册页面练习
- 8. 移动端页面练习
- 9. 登陆页面练习
- 10. 第一个页面