文档章节

单页布局

 易水寒521
发布于 2015/04/15 15:28
字数 477
阅读 9
收藏 0
点赞 0
评论 0

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<link rel="stylesheet" href="jj.css" type="text/css" /> 
</head> 
<body> 
<div id="header"> 
<div id="nav"> 
<ul> 
<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> </div> </body> </html>




<head>


<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />


<title>单页布局的详细分析</title>


<style type="text/css">


*{margin:0; padding:0; font-family: "新宋体"}


#header{width:100%; height:430px; background: url(images/big9.jpg) center; min-width:1000px}


#nav{width:100%; height:55px;margin:0 auto;}


#nav ul{margin-left:350px;}


#nav ul li{list-style-type:none; float:left; line-height:55px; margin-right:75px;}


#nav ul li a{color:#FFFFFF; text-decoration:none;}


#nav ul li a:hover{color:#339900;}


#info{width:1000px; height:142px; margin:220px auto 0;}


.logo{ width:142px; height:142px; float:left;}


.txt{width:350px; height:84px;float:left; margin:56px 140px 0 36px; color:#FFFFFF;}


.txt h2{ font-size:36px; font-weight:400;}


.txt p{font-size:14px;}


.download{width:194px; height:106px;float:left; margin-top:25px;}


.download a{color:#FFFFFF; text-decoration:none; width:197px; height:47px; background:#FF0000; display: block; text-align:center; line-height:47px; border-radius:8px;}


.download .a1{background:#00FFFF;}


.download .a2{background:#00FF00; margin-top:12px;}


.scan{width:120px; height:100px;float:right; margin-top:28px;}


.scan .sys{width:80px; height:80px; background:#FFFFFF; padding:10px;float:left;}


.scan p{ float:left; color: #000000; font-size:10px; width:12px; height:100px; line-height:20px}


</style></head>


<body>


<!--盒子模型-->


<div id="header">


<!--导航开始-->


<div id="nav">


<ul>


<li><a href="http://www.baidu.com/" target="_blank">百度首页</a></li>


<li><a href="http://www.sina.com.cn/" target="_blank">新浪网页</a></li>


<li><a href="http://news.ifeng.com/mil/" target="_blank">军事网页</a></li>


<li><a href="http://sh.qihoo.com/" target="_blank">新闻网页</a></li>


</ul></div>


<!--导航结束-->


<!--info 开始-->


<div id="info">


<!--logo-->


<div class="logo"><img src="images/s5.jpg" /></div>


<!--logo结束-->


<!--txt-->


<div class="txt">


<h2>全民游戏</h2>


<p>《哈哈哈哈》哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>

</div>

<!--txt结束-->

<!--download-->


<div class="download">


<a href="" class="a1">IOS下载</a>


<a href="" class="a2">Android下载</a>

</div>

<!--scan-->


<div class="scan">


<div class="sys">


<img src="images/s6.jpg" />


</div>

<p>看到小鸡了</p>

</div></div><!--info 结束-->

</div></body></html>


© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 129
码字总数 120077
作品 0
虹口
[ Talk is Cheap Show me the CODE ] : jQuery Mobile

[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局 当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,也许我们正在阿谀逢迎自己懒惰的天性。 Written In The Font 为了...

泥沙砖瓦浆木匠 ⋅ 2014/06/23 ⋅ 0

蝉知企业门户系统 5.3 正式发布,新 logo 发布、自定义功能增强

蝉知企业门户系统 5.3 正式发布了。 大家好,蝉知的自定义功能和高可定制性已经被广大用户认可,蝉知5.3版继续增强了自定义功能,包括模板在线编辑、文章、产品、博客、单页的独立布局功能,...

it1000001001 ⋅ 2016/05/10 ⋅ 27

为 Web 开发者准备的 20 个有用的 HTML5 教程

HTML5: 基础知识 从头开始编码的HTML5布局 用 HTML5 设计一个博客 用 HTML5+CSS3 创建优雅的网站 用 HTML5 设计一个很酷的 iPhone App 网站 HTML5 应用基于浏览器的存储 在手机上使用 HTML5 ...

红薯 ⋅ 2012/02/25 ⋅ 10

lohasle/pagescroll

#pagescroll pagescroll version 1.0.1 div布局方式自动调整,不需要一定为绝对布局 说明 单页滚动视觉差插件,让你的页面也华丽丽的滑动起来 超轻量级,源码6kb左右 使用请参考demo.html #...

lohasle ⋅ 2014/12/09 ⋅ 0

2012网页设计趋势(上)

纯粹主义者会说,伟大的设计是永恒的。是的,在一个理想世界中,我们可以忽视趋势与流行。 但是实事求是地讲,跟踪和融入设计的趋势是很有价值的,尤其是网站方面。让我们面对现实:网络时刻...

未来十年 ⋅ 2011/12/25 ⋅ 0

bootstrap纵向100%布局方案

bootstrap目前是水平100%布局方案,可以改成垂直100%吗,如果有的话,还可以进一步限制为单页应用,水平垂直方向为100%吗

黄正文 ⋅ 2016/12/16 ⋅ 2

网络幻灯片--nodePPT

nodePPT 是使用nodejs写的网络幻灯片。 为什么选择nodePPT 基于GFM的markdown语法编写 支持html混排,再复杂的demo也可以做! 导出网页或者pdf更容易分享 支持18种转场动画,可以设置单页动画...

叶秀兰 ⋅ 2014/07/29 ⋅ 1

Evince 3.7.1 发布,多格式文档浏览器

Evince 3.7.1 主要是一些小的功能和布局的改进。 evince 是一个支持多种格式的文件浏览器,如的PostScript , PDF格式,单页和多页TIFF , DVI接口, DjVu ,等等。它具有网页的缩略图,通过...

oschina ⋅ 2012/11/05 ⋅ 6

Ext JS 3.1 发布 - 内存优化、TreeGrid等

该版本在性能、灵活性上有很大的改善,同时增加了一些常用的UI组件,例如 TreeGrid ,还包括经过优化的排版管理、重构 EventManager。 单页的,组合的,web应用程序已经越来越较为普遍,在所...

绿悠悠 ⋅ 2009/12/20 ⋅ 2

18 个详细的响应式 Web 设计教程

在这篇文章中,我想跟你分享 18 个很有用的响应式 Web 设计的教程,这些教程可以帮助你学习响应式设计,包括瀑布流表格、图片和 media queries。 创建移动优先的响应式设计 使用 Sass 和 Co...

小编辑 ⋅ 2013/06/18 ⋅ 5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 29分钟前 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

小致dad ⋅ 41分钟前 ⋅ 0

Python 数电表格格式化 xlutils xlwt xlrd的使用

需要安装 xlutils xlwt xlrd 格式化前 格式化后 代码 先copy读取的表格,然后按照一定的规则修改,将昵称中的学号提取出来替换昵称即可 from xlrd import open_workbookfrom xlutils.copy ...

阿豪boy ⋅ 今天 ⋅ 0

面试题:使用rand5()生成rand7()

前言 读研究生这3 年,思维与本科相比变化挺大的,这几年除了看论文、设计方案,更重要的是学会注重先思考、再实现,感觉更加成熟吧,不再像个小P孩,人年轻时总会心高气傲。有1 道面试题:给...

初雪之音 ⋅ 今天 ⋅ 0

Docker Toolbox Looks like something went wrong

Docker Toolbox 重新安装后提示错误:Looks like something went wrong in step ´Checking if machine default exists´ 控制面板-->程序与应用-->启用或关闭windows功能:找到Hyper-V,如果处......

随你疯 ⋅ 今天 ⋅ 0

Guacamole 远程桌面

本文将Apache的guacamole服务的部署和应用,http://guacamole.apache.org/doc/gug/ 该链接下有全部相关知识的英文文档,如果水平ok,可以去这里仔细查看。 一、简介 Apache Guacamole 是无客...

千里明月 ⋅ 今天 ⋅ 0

nagios 安装

Nagios简介:监控网络并排除网络故障的工具:nagios,Ntop,OpenVAS,OCS,OSSIM等开源监控工具。 可以实现对网络上的服务器进行全面的监控,包括服务(apache、mysql、ntp、ftp、disk、qmail和h...

寰宇01 ⋅ 今天 ⋅ 0

AngularDart注意事项

默认情况下创建Dart项目应出现以下列表: 有时会因为不知明的原因导致列表项缺失: 此时可以通过以下步骤解决: 1.创建项目涉及到的包:stagehand 2.执行pub global activate stagehand或pub...

scooplol ⋅ 今天 ⋅ 0

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部