关于CSS布局页面的简单组合方式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS格式与布局</title>

<style type="text/css">

*{ margin:0px auto; padding:0px; font-family:微软雅黑}/*注意*/

/*.创造力{ width:200px; height:200px; background-color:#F00; margin:10px 0px 0px 10px; float:left}

*/

#menu{ width:1200px; height:45px; background:#90F; margin-top:20px}

.text{ width:200px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}

.text:hover{ background-color:#000; color:#F00; cursor:pointer}

/*鼠标放上来*/

</style>

</head>

<body>

<ol style="list-style:none">

    <li>足球</li>

    <li>篮球</li>

    <li>羽毛球</li>

</ol>

<ol style="list-style-image:url(../IMG/QQ%E5%9B%BE%E7%89%8720170711193040.gif)">

    <li>足球</li>

    <li>篮球</li>

    <li>羽毛球</li>

</ol>

<div style="width:300px; height:300px; background-color:#0F0; position:fixed; top:20px; left:20px" ></div>

<div style="width:200px; height:500px; background-color:#099"></div>

<div style="width:200px; height:500px; background-color:#060"></div>

<div style="width:200px; height:500px; background-color:#055"></div>

<div style="width:200px; height:500px; background-color:#099"></div>

<div style="width:200px; height:500px; background-color:#060"></div>

<div style="width:200px; height:500px; background-color:#055"></div>

<div style="width:400px; height:400px; position:absolute; top:100px; left:100px">

<div style="width:300px; height:300px; background-color:#0F0; position:absolute; top:50px; left:50px">

</div>

</div>

<div style="width:200px; height:500px; background-color:#099"></div>

<div style="width:200px; height:500px; background-color:#060"></div>

<div style="width:200px; height:500px; background-color:#055"></div>

<div style="width:300px; height:300px; background-color:#0F0; position:absolute; top:200px; left:200px">

</div>

<div style="width:300px; height:300px; background-color:#0F0; position:relative">

</div>

<div class="创造力">1</div>

<div class="创造力">2</div>

<div class="创造力">3</div>

<div class="创造力">4</div>

<div class="创造力">5</div>

<div class="创造力">6</div>

<div style="clear:both"></div>

<div style="width:800px; height:500px; background-color:#0F0"></div>

<div id="menu">

    <div class="text">首页</div>

    <div class="text">产品介绍</div>

    <div class="text">产品图片</div>

    <div class="text">产品参数</div>

    <div class="text">关于服务</div>

    <div class="text">联系我们</div>

</div>

</body>

</html>

利用CSS简单布局的不同组合类型的更多相关文章

  1. 慕课笔记利用css进行布局【混合布局练习】

    通过学习div的布局,以一个简单的内容管理网站的布局为例子,用div+css进行简单的网页布局,加深学印象: <html> <head> <title>CSS+di ...

  2. 慕课笔记利用css进行布局【混合布局】

    <html> <head> <title>混合布局学习</title> <style type="text/css"> ...

  3. 慕课笔记利用css进行布局【三列布局】

    三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...

  4. 慕课笔记利用css进行布局【两列布局】

    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...

  5. 慕课笔记利用css进行布局【一列布局】

    <html> <head> <title>一列布局</title> <style type="text/css"> bo ...

  6. CSS简单布局总结

    display  block       块级元素,占据一行 none       隐藏 inline      允许同一行显示,但不再有宽和高 inline-block   允许在一行的块级元素,可 ...

  7. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  8. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  9. CSS简单的网页布局

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

随机推荐

  1. SQL SERVER 删除前判断指定的表或者存储过程是否存在

    1.创建存储过程: CREATE PROCEDURE proc_pr ---将create修改成alter可以修改存储过程: AS BEGIN IF EXISTS(SELECT * FROM syso ...

  2. 关于引入多个jquery冲突的问题（附一个很好用的validate前端验证框架及使用方法）

    废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...

  3. 【ALB技术笔记】基于多线程方式的串行通信接口数据接收案例

    基于多线程方式的串行通信接口数据接收案例 广东职业技术技术学院  欧浩源 1.案例背景 在本博客的<[CC2530入门教程-06]CC2530的ADC工作原理与应用>中实现了电压数据采集的 ...

  4. Spring+Mybatis配置

    Spring+Mybatis配置 之前做项目的时候用到了spring+mybatis框架,一直想抽空整理一下 Mybatis: mybatis是支持普通 SQL查询,存储过程和高级映射的优秀持久层框架 ...

  5. JavaSE中Collection集合框架学习笔记(3)——遍历对象的Iterator和收集对象后的排序

    前言:暑期应该开始了,因为小区对面的小学这两天早上都没有像以往那样一到七八点钟就人声喧闹.车水马龙. 前两篇文章介绍了Collection框架的主要接口和常用类,例如List.Set.Queue,和A ...

  6. 一个简单的时间轴demo

    一个时间轴的组成 使用一个块级元素包裹内容,并未块级元素设置边框 定义圆形或者菱形等元素标签,子元素设置偏移或者定位元素将图标定位到边框上 使其中的内容不溢出,自动换行,内容自动撑高 英文自动换行:w ...

  7. POJ 2195 Going Home （带权二分图匹配）

    POJ 2195 Going Home (带权二分图匹配) Description On a grid map there are n little men and n houses. In each ...

  8. nodejs之querystring模块

    这里主要记下querystring模块的使用方法. querystring从字面上的意思就是查询字符串,一般是对http请求所带的数据进行解析.querystring模块只提供4个方法,在我看来,这4 ...

  9. 解决win10注册错误 错误代码0x8002801c

    使用win10的过程中经常碰到各种注册错误,让人抓狂!!! 现在分享一个完美的解决方法(非原创): 最简洁的办法是:1.自行将msinet.ocx(win10系统64位)组件复制到C:\Windows ...

  10. PXE+Kickstart无人值守安装操作系统

    1.PXE的工作过程: 1. PXE Client 从自己的PXE网卡启动,向本网络中的DHCP服务器索取IP: 2. DHCP 服务器返回分配给客户机的IP 以及PXE文件的放置位置(该文件一般是放 ...