关于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. javascript之原型（prototype）

    今天是第一次写博客,写点在javascript中重要的一个概念----原型(prototype): 原型,顾名思义,就是一切事物的模板. 柏拉图在<理想国>卷10中说:"床不是有 ...

  2. Japanese Learning - 五十音图

    平假名: 片假名: あ い う え お ア イ ウ エ オ か き く け こ カ キ ク ケ コ さ し す せ そ サ シ ス セ ソ た ち つ て と        タ チ ツ テ ト な に ...

  3. Oracle trunc()函数的用法--来着心静禅定ing

    1.TRUNC(for dates) TRUNC函数为指定元素而截去的日期值. 其具体的语法格式如下: TRUNC(date[,fmt]) 其中: date 一个日期值 fmt 日期格式,该日期将由指 ...

  4. 图片预加载之模拟img.load()

    function imgBatchLoad(){ var instance = this; this.loadCount = 0; this.images = []; this.imgCount = ...

  5. 剖析touch事件在View中的传递

    话不多说,直奔主题,先来看一张图 版权申明:这是csdn上别人的图,我觉得有用,就拿过来了, 然后简单说明下: 总的来说,触摸事件是从最外层的ViewGroup,一级一级传递进来的 和这相关的每个Vi ...

  6. 使用mysqldump备份数据库

    #! /bin/shday_str=`date +%j`day=`date +%Y%m%d`days_str=`echo "$day_str % 60"|bc`cd /home/d ...

  7. 使用 electron 实现类似新版 QQ 的登录界面效果（阴影、背景动画、窗体3D翻转）

    上文<使用 VS2017 和 js 进行桌面程序开发 - electron 之 Hello Word>介绍了如何使用 VS2017 开发 electron 桌面程序,今天来点有看头的,但是 ...

  8. Domains域

    一个域是一个criteria(度量标准)列表,每个criterion(标准尺度)是一个三元列表或者元组:field_name,operator,value. field_name(str) 当前模型的 ...

  9. 【SpringMVC】使用SpringMVC进行上传文件！

    写在前面: 之前在上传文件的时候,使用的是commons-file-upload这个插件,非常方便,能控制每个文件的大小,总共大小,缓存,以及支持多个文件的同时上传,但是写一次上传文件的后台代码量太大 ...

  10. Web Service--第一次接触web service

    Web Service 首发于开源中国 1. 背景 中国移动短信网关需求,要能够发送短信.开发材料只有一个短信发送配置:包括ID,password,code,url.一个jar包还有一个老旧的html ...