文档章节

单页布局

 易水寒521
发布于 2015/04/15 15:28
字数 477
阅读 9
收藏 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
博文 130
码字总数 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
0
css布局 - 常规上中下分左右布局的一百种实现方法

一、 上中下左固定 - fixed+margin 概括:如图,此种布局就是顶部、底部和左侧固定不动,只有中间右侧超出可滚动。 html: 1 1 2 关键点: 上下部分就是普通处理,fixed固定布局 position: ...

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

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

it1000001001
2016/05/10
4.1K
27
为 Web 开发者准备的 20 个有用的 HTML5 教程

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

红薯
2012/02/25
15K
10
lohasle/pagescroll

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

lohasle
2014/12/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
4
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
10
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
12
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
6
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部