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. 必须在文档流中处于最高级位置: ...
随机推荐
- 关于FrameLayout中覆盖的问题
FrameLayout中xml文件中写在下方的控件会默认覆盖上方的控件,如图,我准备实现如下效果: 这时recyclerview就要写在前面 如果recyclerview写在下面就会覆盖掉我linea ...
- Linux系统之网络相关的命令
Linux系统之网络相关的命令 网络概述 网络:通过通信介质和通信设备 将分布不同地点的两台或多台计算机,经过相应的程序实现通信switch 交换机router 路由器网络的功能:数据通信:利用网络传 ...
- 887. 求组合数 III（模板 卢卡斯定理）
a,b都非常大,但是p较小 前边两种方法都会超时的 N^2 和NlongN 可以用卢卡斯定理 P*longN*longP 定义: 代码: import java.util.Scanner ...
- 记PHP使用rtrim()导致获得的数据乱码问题
一.问题描述: 我用rtrim()函数去除右侧多余的"."号,去除之后,发现乱码. 二.出现原因: 当右侧没有分号,要去除的字符串的十六进制又刚刚好以81结尾,就导致81被去除,从 ...
- [Err] 1248 - Every derived table must have its own alias
问题描述 [Err] 1248 - Every derived table must have its own alias 问题原因 这句话的意思是说每个派生出来的表都必须有一个自己的别名 我的Mys ...
- pytest+requests+Python3.7+yaml+Allure+Jenkins+docker实现接口自动化测试
接口自动化测试框架(用例自动生成) 项目说明 本框架是一套基于pytest+requests+Python3.7+yaml+Allure+Jenkins+docker而设计的数据驱动接口自动化测试框架 ...
- AC自动机（模板+例题）
首先要明白AC自动机是干什么的: AC自动机其实就是一种多模匹配算法,那么你可能会问什么叫做多模匹配算法.下面是我对多模匹配的理解,与多模与之对于的是单模,单模就是给你一个单词,然后给你一个字符串,问 ...
- 微信小程序 --- 日历效果
wxml部分: <view class='box1' style='width: {{ sysW * 7 }}px'> <view class='dateBox'>{{ yea ...
- vue常用插件之视频播放（rtmp m3u8）
vue-video-player(5.0.2) 最近我的项目做了一个监控视屏的显示,后台提供的视屏格式是rtmp 后来又改为m3u8,没成功,原因是占用内存过大,所以取消了这种方式 一.安装 npm ...
- 小程序y轴拖动
需求场景 小程序在y轴方向 拖动 一小段距离 解决方案 1.监听 元素 2.绑定 点击 和 移动 事件 3.数据处理 代码 <view animation="{{item.animat ...