div简单布局

<html>
<head>
<style>
#a{width:900px; padding-left:240px;}
#b{height:200px;width:900px; background-image: url(http://www.51pptmoban.com/d/file/2015/07/04/a92aca0203cc64f968dd751d87e6ed5f.jpg);}
#c{height:700px; width:900px;}
#d{float:left; height:700px; width:100px; background-image: url(http://p3.so.qhimg.com/t01d7a0e52205facac8.jpg);}
#e{float:right; height:700px; width:800px;}
#f{height:700px; width:800px; background-image: url(http://www.zige365.com/Files/2010052215570987231.jpg);}
#h{float:right;width:900px;heigh:300;background-color:#32CD32;}
</style>
</head>
<body>
<div id="a">
<div id="b"><br/><br/><br/><br/><font size=65 style="color:#00FF00"><b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
青&nbsp&nbsp&nbsp&nbsp春&nbsp&nbsp&nbsp&nbsp飞&nbsp&nbsp&nbsp&nbsp扬<b></font></div>
<div id="h">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
         <b>QQ&nbsp;昵&nbsp;称<b>:<input type="text" name="username" value="请输入用户名" style="height:30px;">
         <b>QQ&nbsp;密&nbsp;码<b>:<input type="password" name="password" style="height:30px;">&nbsp&nbsp&nbsp&nbsp
         <a href="http://denglu.com"/ target="0"><b>QQ登录<b>&nbsp&nbsp&nbsp&nbsp
         <a href="http://zc.qq.com/chs/index.html"/ target="0"><b>注册QQ<b>
</div>
<div id="c">
<div id="d"><br/><a style="color:#FFFFE0" href="http://www.baidu.com"/ target="0"><h1>百 度<br/><br/>
<a style="color:#FFFFE0" href="http://www.sina.com.cn"/ target="0">新 浪<br/><br/>
<a style="color:#FFFFE0" href="http://www.sohu.com"/ target="0">搜 狐<br/><br/>
<a style="color:#FFFFE0" href="http://www.qq.com"/ target="0">腾 讯<br/><br/>
<a style="color:#FFFFE0" href="http://www.163.com"/ target="0">网 易<br/><br/>
<a style="color:#FFFFE0" href="http://www.youku.com"/ target="0">优 酷<br/><br/>
<a style="color:#FFFFE0" href="http://music.so.com"/ target="0">音 乐<br/><br/>
<a style="color:#FFFFE0" href="https://www.tmall.com"/ target="0">天 猫<br/><br/></h1>
</div>
<div id="e">
<div id="f"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
         <font size=5 style="color:#000080">青春飞扬,飞扬青春,<br/> &nbsp&nbsp&nbsp&nbsp 初冬的寒意,
            敌不过我们似火的热情,霓虹灯的绚烂,早已逊色于我们的鲜亮,我的未来不是梦,迸发了所有青春激情,青春飞扬,飞扬青春,
            一首将我们锐变的赞歌、曾经的年少轻狂,曾经的懵懂烂漫,我们拥有就以足够,回忆就以美好,意气风发, 豪情万丈,心怀抱负,
            那是我们对青春的不老誓言,青春无悔,我们永远的约定,青春飞扬,飞扬青春青春, 属于我们的音符,永远跳动在时光的五线谱上,
            青春,属于我们的天狼星,永远是万里苍穹最亮的一颗,青春,我们微笑,快乐,美好,幸福。</div>
</div>
</div>
</div>
</body>
<html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你正在学习 CSS 布局吗?是不是还不能完全掌握纯 CSS 布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构, 然后再针对语义、结构添加 CSS。这篇文章将告诉你应该怎样把 HTML 结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left"等等)束手无策,不知道该 转换成对应的什么 CSS 语句。当你解决了第一种问题,知道了如何结构化你的 HTML,我再给出一个列表,详细列出原来的表 现属性用什么 CSS 来代替。 结构化 HTML 我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。然后我们用 Photoshop 或者 Fireworks 画出来、切割成小图。最后再通过编辑 HTML 将所有设计还原表现在页面上。 如果你希望你的 HTML 页面用 CSS 布局(是 CSS-friendly 的),你需要回头重来,先不考虑“外观”,要先思考你的页面 内容的语义和结构。 外观并不是最重要的。一个结构良好的 HTML 页面可以以任何外观表现出来,CSS Zen Garden 是一个典型的例子。CSS Zen Garden 帮助我们最终认识到 CSS 的强大力量。 HTML 不仅仅只在电脑屏幕上阅读。你用 photoshop 精心设计的画面可能不能显示在 PDA、移动电话和屏幕阅读机上。但 是一个结构良好的 HTML 页面可以通过 CSS 的不同定义,显示在任何地方,任何网络设备上。 开始思考 首先要学习什么是"结构",一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块,以及每块内容服务的 目的,然后再根据这些内容目的建立起相应的 HTML 结构。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值