关于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. P3390 【模板】矩阵快速幂

    题目背景 矩阵快速幂 题目描述 给定n*n的矩阵A,求A^k 输入输出格式 输入格式: 第一行,n,k 第2至n+1行,每行n个数,第i+1行第j个数表示矩阵第i行第j列的元素 输出格式: 输出A^k ...

  2. hibernate总结-持续更新

    简介 hibernate官网:Hibernate Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思 ...

  3. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  4. Java基础语法<九> 接口与内部类

    1 接口  interface implement 接口的所有方法自动地属于public.因此,在接口中声明方法时,不必提供关键字public.   接口可以包含多个方法,接口中可以定义常量.接口中的 ...

  5. Centos 6.5开启rsync同步

    一.测试环境 操作系统:Centos6.5 Server1:172.18.11.100       源服务器 Server2:172.18.11.110       目标服务器 二.操作步骤: 1.先 ...

  6. MySQL二进制日志备份和恢复详解

    原文链接:http://www.showerlee.com/archives/681 ****经实践,该教程ok,特在此分享**** 基本概念 定义: 二进制日志包含了所有更新了数据或者已经潜在更新了 ...

  7. Android handler 可能会造成内存泄露

    Android handler 可能会造成内存泄露 Android Studio 使用 Handler 时: private Handler handler = new Handler(){ @Ove ...

  8. 服务器Hadoop+Hive搭建

    出于安全稳定考虑很多业务都需要服务器服务器Hadoop+Hive搭建,但经常有人问我,怎么去选择自己的配置最好,今天天气不错,我们一起来聊一下这个话题. Hadoop+Hive环境搭建 1虚拟机和系统 ...

  9. webpack打包编译时，不识别src目录以外的js或css

    前端的dva项目开发时,遇到个很郁闷的问题,用es6的语法简单的export一个变量出来,在其他js中import使用,结果就报错了.   export写法如下: const enUS = { acc ...

  10. Spring源码情操陶冶-AbstractApplicationContext#invokeBeanFactoryPostProcessors

    阅读源码有利于陶冶情操,承接前文Spring源码情操陶冶-AbstractApplicationContext#postProcessBeanFactory 约定:web.xml中配置的context ...