关于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. vue和mvvm的一些小区别

    Vue.js 和 MVVM 小细节   MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这 ...

  2. 移动端Touch事件基础

    1.三个常用的移动端事件 ontouchstart 手指按下时触发 ontouchmove 手指移动时触发 ontouchend 手动抬起时触发 注意:这些事件当作事件属性使用时,不兼容谷歌浏览器. ...

  3. Hibernate框架 主配置文件（Hibernate.cfg.xml） 映射配置 说明

    Hibernate.cfg.xml 主配置文件中主要配置:数据库连接信息.其他参数.映射信息! 常用配置查看源码: hibernate-distribution-3.6.0.Final\project ...

  4. Python学习笔记——import模块

    OS模块 直接输出系统命令到屏幕,该方法获取的命令返回值不可被赋值给变量,输出结果受编码影响会乱码: import os os.system("ipconfig") 将执行获取的系 ...

  5. Unreal Engine 4 Radiant UI 插件入门教程（二）

    本篇章前提要求:在UE4上安装了Radiant UI插件.如果没有安装,请找其它教程(或者是笔者的其它的教程,目前正在写). 本教程的目的:探讨如何从网页元素中调用蓝图中的内容: 第一步: 写一个网页 ...

  6. XML文件的创建和解析笔记

    解析XML的四种方法 XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便.对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这 ...

  7. 企业QQ客服的添加

    商城项目需要用腾讯的企业QQ客服,但默认提供的是一个链接,点击后弹出一个新页面, 请确认 确认打开QQ与营销QQ4009928310对话? 点确认才弹出聊天窗口,并不是需求想要的效果,经过一番折腾联系 ...

  8. Java集合类小结-思维导图

    java集合类分为collection 和 map两类Collection List ArrayList LibnkedList Vector Set HashSet TreeSet LinkedHa ...

  9. json-server mock数据

    前言: 项目开发中,影响项目进程的常常是由于在前后端数据交互的开发流程中停滞,前端完成静态页面的开发后,后端迟迟未给到接口.而现在,我们就可以通过根据后端接口字段,建立一个REST风格的API接口,进 ...

  10. 有关struts中DispatchAction的用法小结

       今天刚刚看了DispatchAction觉得这个东西有点意思,所以就写点东西,通过它的名字我想应该可以明白它的作用了,用于分发的Action,主要的好处是把一些功能类似的Action放到一个Ac ...