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. 必须在文档流中处于最高级位置: ...
随机推荐
- Mybatis Dao接口与Xml文件不匹配的问题：Invalid bound statement (not found)
<!-- 如果不添加此节点mybatis的mapper.xml文件都会被漏掉. --> <resources> <resource> <directory&g ...
- 记一次mysql的问题处理@20181225
需求:由于某种原因,导致一次分库分表的环境中ddl添加字段和索引没有完全成功,比如100个分库,只有部分修改成功,需要将没有修改成功的库和表找出来,在手动去执行. 由于线上环境,这里模拟还原一下该问题 ...
- Spark学习之路 （二十八）分布式图计算系统[转]
引言 在了解GraphX之前,需要先了解关于通用的分布式图计算框架的两个常见问题:图存储模式和图计算模式. 图存储模式 巨型图的存储总体上有边分割和点分割两种存储方式.2013年,GraphLab2. ...
- 洛谷P1551 亲戚
洛谷P1551 亲戚 原题 题目背景 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系. 题目描述 规定:x和y是亲戚,y和z是 ...
- CF718C Sasha and Array [线段树+矩阵]
我们考虑线性代数上面的矩阵知识 啊呸,是基础数学 斐波那契的矩阵就不讲了 定义矩阵 \(f_x\) 是第 \(x\) 项的斐波那契矩阵 因为 \(f_i * f_j = f_{i+j}\) 然后又因为 ...
- F. Moving Points
https://codeforces.com/contest/1311/problem/F 这是一道线段树类型的题: 可以用权值线段树或者树状数组来解: 所以,我们可以分为两部分,第一部分是计算出到当 ...
- 使用Beautiful Soup爬取猫眼TOP100的电影信息
使用Beautiful Soup爬取猫眼TOP100的电影信息,将排名.图片.电影名称.演员.时间.评分等信息,提取的结果以文件形式保存下来. import time import json impo ...
- KVM命令--使用篇（1）
1. KVM常见使用命令: 1.1 查看命令 列出所有虚拟机 virsh list --all 显示虚拟机信息 virsh dominfo vm_name 显示虚拟机内存和cpu使用情况 virsh- ...
- easyui-numberbox后台获取数据后，鼠标一点击就自动清空了
<input type="text" name="txtMeterInitData" id="txtMeterInitData" cl ...
- setTimeout(call,0)作用
setTimeout(call,0)作用 经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用, ...