关于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. MVC通过递归+部分视图实现评论

    前一个项目里有一个关于评论系统的需求.感觉这个评论的实现还是蛮好玩的,所以记录下这个系统的实现相关内容. 功能需求: 1.用户可以再视屏下方留言. 2.用户可以再别的用户留言下方回复. 3.用户可以删 ...

  2. CSS学习（页外引用还不懂）

    CSS的语法结构为   选择符 {属性:值:}    Selector {Property : Value:} 选择符:通配 *{....}  , 元素  body{....} .h1{....}.p ...

  3. python编程快速上手之第9章实践项目参考答案

    本章介介绍了shutil,zipfile模块的使用,我们先来认识一下这2个模块吧. 一.shutil模块 shutil模块主要用于对文件或文件夹进行处理,包括:复制,移动,改名和删除文件,在shuti ...

  4. FTP DOS 命令行

    1. 在cmd--> 输入ftp 2. 进入ftp输入提示命令行,此时输入open ftp服务器地址,比如我的是本机就: open 127.0.0.1 3. 根据提示输入用户名和密码, 提示登录 ...

  5. Wince 创新布局

    如果你的项目是用wince开发并且机器是小型的pda,你可以考虑有这种布局方式. IDE上布局,如图 /// <summary> /// 显示层 /// </summary> ...

  6. 面向对象15.1String类特点

    String 特点: 字符串对象一旦被初始化就不会被改变. public class Ssstring {public static void main(String[] args) { //这个是2 ...

  7. CSS 样式书写规范+特殊符号

    虽然我只是刚踏入web前端开发圈子.在一次次任务里头,我发觉每一次的css命名都有所不同和不知所措.脑海就诞生了一个想法--模仿大神的css命名样式. 毕竟日后工作上,是需要多个成员共同协作的.如果没 ...

  8. hdu_4717: The Moving Points 【三分】

    题目链接 第一次写三分 三分的基本模板 int SanFen(int l,int r) //找凸点 { ) { //mid为中点,midmid为四等分点 ; ; if( f(mid) > f(m ...

  9. （转）Spring boot——logback.xml 配置详解（三）<appender>

    文章转载自:http://aub.iteye.com/blog/1101260,在此对作者的辛苦表示感谢! 1 appender <appender>是<configuration& ...

  10. 【Apache】 VirtualHost配置

    主要配置两点: 1)配置vhost ,可单独建文件,也可直接在http.conf添加内容 如果单独建文件,查看http.conf 中Include 配置文件的路径,并在对应路径新建http_vhost ...