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. 必须在文档流中处于最高级位置: ...
随机推荐
- C. Long Beautiful Integer
题目思路还是很直接,首先按要求生成字符串.如果该目标字符串小于原字符串,那么从第k位开始,找到最后一个非9的位置,++,同时如果有9,要考虑进位(一开始没有考虑WA了一次). 犯了一个错误,就是比较字 ...
- C# DES加密、解密
/// <summary> /// DES加密字符串 /// </summary> /// <param name="pToEncrypt">待 ...
- WIN10开启FTP（完整版）
1.控制面板 --> 程序--> 启用或关闭windows功能 2.左下角搜索栏搜索IIS(iis) 3.右键添加FTP站点 4.创建站点名字和目录 5.绑定本机IP地址,SSL勾选无SS ...
- Tensor--tensorflow的数据类型
在tensorflow2.0版本之前,1.x版本的tensorflow的基本数据类型有计算图(Computation Graph)和张量(Tensor)两种,但tensorflow2.0之后的版本取消 ...
- TCP 协议快被淘汰了，UDP 协议才是新世代的未来？
TCP 协议可以说是今天互联网的基石,作为可靠的传输协议,在今天几乎所有的数据都会通过 TCP 协议传输,然而 TCP 在设计之初没有考虑到现今复杂的网络环境,当你在地铁上或者火车上被断断续续的网络折 ...
- windows下web端测试环境搭建（tomcat+oracle）
一.安装oracle数据库 1.关闭防火墙.360安全卫士,运行安装程序:Setup.exe,然后下一步...... 2.安装完成后,检查服务是否已启动 3.cmd输入验证登录成功:sqlplus s ...
- openlayers轨迹匀速播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- C语言输出杨辉三角形
// 打印杨辉三角: 行 + 列 ][] = { }; // 1. 确定要打印的行数: 13(n) ; i < ; ++i) { // 2. 确定列数:杨辉三角 行 == 列 ; j <= ...
- H3C IP地址配置
一.IP地址分类 分配地址就是给每个连接到IPv4网络上的设备分配的一个网络唯一的地址.IP地址长度为32比特,通常采用点分十进制方式表示,即每个IP地址被表示为以小数点隔开的4个十进制整数,每个整数 ...
- 安卓android eclipse运行提示no compatible targets were found
在eclipse中开发安卓应用,运行项目时,右击项目名称---Run As---Android Application时, 系统提示"No compatible targets were f ...