css div布局示例2（head-main-footer
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin:0;
background-color: #F5F5F5;
line-height: 1.8;
font-size: 16px;
font-weight: 300;
}
#head{
height:320px; background-image: url("__STATIC__/images/titlepic.jpg");
}
#title{
width:100%;
position: fixed;
background-color: rgba(0,0,0,0.5);/*fixed不会占据文档流*/
padding-top: 10px;
padding-bottom: 10px;
padding-left: 250px;
}
#title a{
color:white;
font-size: 20px;
margin-left:90px;
text-decoration:none;
}
#title a:hover{
color:pink;
}
#title #msc{
position: fixed;
top:0;
right:0;
}
#desc{
height:149px; position: relative;
top:106px;
}
#kratos{
height:1700px;
padding-top: 20px;
padding-bottom: 20px;
}
#row{
width:1100px;
height:100%; margin:0 auto;
}
#main{
width:66%;
height:100%;
float:left;
} .content{
width:100%;
height:220px;
border:1px solid blue;
margin-bottom: 15px;
}
.content .tu{
margin-left:20px;
margin-top:20px;
width:234px;
height: 139px;
padding:2px; border: 0.2px solid yellow;
}
.content .tu img{
width:234px;
height: 139px; }
.content .title{
position: relative;
top:-143px;
left:260px;
width:450px;
height:28px;
padding-left: 20px; }
.content .title span{
font-size: 20px;
font-weight:588;
}
.content .neirong{
position: relative;
width:420px;
height:109px;
top:-153px;
left:260px;
padding-left: 20px;
}
.content .contentinfo{
position: relative;
top:-126px;
width:100%;
height:35px;
}
.content .contentinfo a{
text-decoration:none;
margin-left: 20px;
color:black;
}
.quanwen{
float:right;
}
#sidebar{
height:100%;
width:32%;
background-color: yellow;
float: right;
}
#toutu{
width:100%;
height:228px;
margin-bottom: 15px;
border:1px solid black;
}
#pinglun{
width:100%;
height:400px;
margin-bottom: 15px;
border:1px solid black;
}
#lunbotu{
width:100%;
height:255px;
margin-bottom: 15px;
border:1px solid black;
}
#paihang{
width:100%;
height:350px;
margin-bottom: 15px;
border:1px solid black;
}
#footer{
height:182px;
background-color: black;
}
#info{
width:60%;
height:60%;
margin:0 auto;
position: relative;
top:20%;
background-color: red;
text-align: center; }
#info span{
margin-top:20px;
font-size: 40px;
}
</style>
</head>
<body>
<!--头部开始-->
<div id="head">
<div id="title"> <a href=?>首页</a>
<a href=?>文章</a>
<a href=?>功能</a>
<a href=?>友链</a>
<a href=?>留言</a>
<a href=?>关于</a>
<div id="but">
<button id="msc">背景音乐点我开启</button>
</div>
</div>
<div id="desc">
这里可以弄个签名logo
这里可以弄个签名logo
这里可以弄个签名logo
</div>
</div>
<!--头部结束--> <!--主体开始-->
<div id="kratos">
<div id="row">
<div id="main">
<?php
$x = 0;
while($x<7){
?>
<div class="content">
<div class="tu"><img src="__STATIC__/images/baozi.jpg"></div>
<div class="title"><span>买包子误付14万 支付宝付款为什么会误付14万元</span></div>
<div class="neirong"><p>近日，河南郑州一包子店，月底查账时，老板发现有顾客竟支付了14万多元人民币！一个多月过去，顾客愣是没发现多支付十几万。老板说，这么多钱不是自己的，</p></div>
<div class="contentinfo"><a href=?>2018-5-8</a><a href=?>81条评论</a><a href=?>666次阅读</a><a href=?>作者：cl</a>
<a href=? class="quanwen">>>阅读全文</a></div>
</div>
<?php
$x++;
}
?>
<div class="fanye">1234567我是翻页</div>
</div>
<div id="sidebar">
<div id="toutu">这里可以放我的资料/头像</div>
<div id="pinglun">我是最近评论<br>我是最近评论我是最近评论<br>我是最近评论</div>
<div id="lunbotu">我是轮播图</div>
<div id="paihang">我是随机/排行文章</div>
这里可以空着备用
</div>
</div>
</div>
<!--主体结束--> <!--尾部开始-->
<div id="footer">
<div id="info">
<span id="beian">我是备案信息</span>
</div>
</div>
<!--尾部结束-->
</body>
</html>
css div布局示例2（head-main-footer的更多相关文章
- css div布局示例1（head-main-footer）
很简单的文档流布局 <!doctype html> <html lang="en"> <head> <meta charset=" ...
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- CSS+DIV布局初练—DIV元素必须成对出现？
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
- 网站实战 从效果图开始CSS+DIV 布局华为网站
经过我们的前面css的学习,我们已经分模块的掌握的CSS的技术,但是,要是完整的做一个页面,我们还没有接触过,这次呢,小强老师来和大家完整的利用CSS+DIV做一个网站案例,我们来模仿下华为的网站. ...
- CSS：CSS+DIV布局网页
现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...
- 关于css+div布局的疑问 2017-03-19
第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...
- 回答： 2017-03-19的关于css+div布局的疑问 2017-04-05
原问题为红色,回答为黑色 第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个 ...
- 十天学会DIV+CSS(DIV布局)
一列布局: 一列固定宽度.一列固定宽度居中.一列自适应宽度.一列自适应宽度居中 一列固定宽度 <head> <style type="text/css"> ...
- CSS+DIV布局应用（2015年06月10日）
Div+css布局应用 一.html元素分类 2.1.顶级元素(Top-level element) 定义 组成html页面最顶级标签 特点 1. 不可设置宽高: 2. 必须在文档流中处于最高级位置: ...
随机推荐
- PP: Time series anomaly detection with variational autoencoders
Problem: unsupervised anomaly detection Model: VAE-reEncoder VAE with two encoders and one decoder. ...
- 学习linux/unix编程方法的建议,学习Linux的四个步骤(转)
解答:学习Linux的四个步骤假设你是计算机科班出身,计算机系的基本课程如数据结构.操作系统.体系结构.编译原理.计算机网络你全修过我想大概可以分为4个阶段,水平从低到高从安装使用=>linux ...
- 用友UAP NC 单据节点_打开参照字段的问题_从打不开参照放大镜_到成功打开了但是取不到值_到修复成功
项目的这个功能是17年开发的,但是当时没有测试通过,今年拿出来测试(通过后会上线). 有两个表数据一开始只打算用来计算时查询,没打算放到目标单据中做表体参照字段.后来改细节问题后放到目标单据中做参照字 ...
- thinkphp 5.0 后台数据修改
html代码 <table class="easyui-datagrid" data-options="singleSelect:true,collapsible: ...
- 微信小程序--骰子游戏
寒假老师让制作一个小程序,于是开始学习如何制作微信小程序. 第一步,拥有一个小程序帐号, 在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作. 我用的是微信web开发工具 ...
- 关于f(x)
有时 z = x + y 有时 0 = x + y 有时单独用f(x) 有时 z = f(x) 很容易分不清. 从集合角度,将f(x)看成映射 即从A集合到B集合的对应关系 这样f(x)可以单独使用, ...
- mybatis入门案例2
1. 笔记:1.配置了typeAlias之后,在其他需要写com.itheima.domain.User的地方都可以用user代替 2.先用properties指定了jdbcConfig.proper ...
- java学习笔记之反射—Class类实例化和对象的反射实例化
反射之中所有的核心操作都是通过Class类对象展开的,可以说Class类是反射操作的根源所在,但是这个类的实例化对象,可以采用三种方式完成. java.lang.Class类的定义: public f ...
- css权重及计算
一.一般而言:!important--->行间样式--->id--->class | 属性--->标签选择器--->通配符 二.权重值 !important ...
- 15. 3Sum、16. 3Sum Closest和18. 4Sum
15 3sum Given an array nums of n integers, are there elements a, b, c in nums such that a + b + c = ...