利用CSS简单布局的不同组合类型
关于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简单布局的不同组合类型的更多相关文章
- 慕课笔记利用css进行布局【混合布局练习】
通过学习div的布局,以一个简单的内容管理网站的布局为例子,用div+css进行简单的网页布局,加深学印象: <html> <head> <title>CSS+di ...
- 慕课笔记利用css进行布局【混合布局】
<html> <head> <title>混合布局学习</title> <style type="text/css"> ...
- 慕课笔记利用css进行布局【三列布局】
三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...
- 慕课笔记利用css进行布局【两列布局】
<html> <head> <title>两列布局</title> <style type="text/css"> bo ...
- 慕课笔记利用css进行布局【一列布局】
<html> <head> <title>一列布局</title> <style type="text/css"> bo ...
- CSS简单布局总结
display block 块级元素,占据一行 none 隐藏 inline 允许同一行显示,但不再有宽和高 inline-block 允许在一行的块级元素,可 ...
- 简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- CSS简单的网页布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
随机推荐
- Bootstrap警告框
前面的话 在网站中,网页总是需要和用户一起做沟通与交流.特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功.操作错误.提示或者警告等.在Bootstrap框架有一个独立的组件,实 ...
- 关于IO流代码BufferedReader
package JBJADV003;import java.io.*;public class BufferedReaderTest { /** * @param args */ public sta ...
- 跟我一起读postgresql源码(六)——Executor(查询执行模块之——查询执行策略)
时光荏苒,岁月如梭.楼主已经很久没有更新了.之前说好的一周一更的没有做到.实在是事出有因,没能静下心来好好看代码.当然这不能作为我不更新的理由,时间挤挤还是有的,拖了这么久,该再写点东西了,不然人就怠 ...
- spring的applicationContext.xml配置SessionFactory抛异常
<bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFa ...
- Mac之OS系统下搭建JavaEE环境 <四> 之IntelliJ IDEA 的内存优化
1.代开IntelliJ IDEA 的显示内容 2. 打开idea.vmoptions文件 路径为Contens——bin——idea.vmoptions 修改之前会复制一份备份原配置 原配置 修改后 ...
- python数据结构之链表
在程序中,经常需要将⼀组(通常是同为某个类型的)数据元素作为整体 管理和使⽤,需要创建这种元素组,⽤变量记录它们,传进传出函数等. ⼀组数据中包含的元素个数可能发⽣变化(可以增加或删除元素). 对于这 ...
- python之总体理解
作为脚本,python具备了弱类型语言的灵活性,便捷性.这在日常的开发使用中能够大幅度的减轻开发人员的编码负担,开发者也能够将精力集中在程序的逻辑管理和总体构架设计上.一般而言,随着经验的积累,开发人 ...
- 走进json
纯做笔记,请多指教... 1,json格式: 非数组: {"key" : "value"} 数组:[{"key" : "value ...
- [JAVASCRIPT]实现页面复制至电脑剪贴板
一. 方法 方1: window.clipboarddata 可惜不支持chrome , chrome 下会提示找不到 clipboarddata 对象 方2: 采用国外大牛写的ZeroClipbo ...
- 两百条微信小程序跳坑指南(不定时更新)
微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...