利用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 ...
随机推荐
- 使用阿里百川HotFix
前言:首先要弄懂HotFix是干嘛的,不然就别向下看了.这里仅仅根据官方文档的代码书写,亲测可用,不做理论指导. Android Studio集成: 添加maven仓库地址: repositories ...
- winform利用委托delegate进行窗体间通信
前段时间学习委托,感觉很模糊的样子,也做过许多实例,但是项目中一直没有用到,今天在项目中遇到一个很简单的例子,现在拿出来,做一个简单的记录. 要求:将弹出框里勾选的内容返回到主面板上. 工具:委托. ...
- vijos1011题解
题目: 顺治喜欢滑雪,这并不奇怪,因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待太监们来载你.顺治想知道载一个区域中最长的滑坡.区域 ...
- PhpStorm配置PHP解释器(wampServer版)
PHPStorm(以下简称为PS)和wampServer集成环境安装简单,不再赘述. 本人使用PhpStrom版本为2017.1.4版本. PS刚开始使用会使用自带服务器,但是有几率不能自动匹配到PH ...
- java Gui编程 事件监听机制
1. GUI编程引言 以前的学习当中,我们都使用的是命令交互方式: 例如:在DOS命令行中通过javac java命令启动程序. 软件的交互的方式: 1. 命令交互方式 图书管理系统 ...
- Go学习笔记(一)Let's 干
加 Golang学习 QQ群共同学习进步成家立业 ^-^ 群号:96933959 简介 Go是Google开发的一种 静态强类型.编译型,并发型,并具有垃圾回收功能的编程语言.为了方便搜索和识 ...
- vb编程代码大全
数值型函数:abs(num): 返回绝对值sgn(num): num>0 1; num=0 0; num<0 -1;判断数值正负hex(num): 返回十六进制值 直接表示:&Hx ...
- Android事件分发理解
Android事件分发机制是个难点和重点,结合下各家,写点自己的理解.. 首先抛出一个小问题,写一个button的点击事件 button.setOnClickListener(new OnClickL ...
- GET请求和POST请求的区别
request获取请求参数 最为常见的客户端传递参数方式有两种: 浏览器地址栏直接输入:一定是GET请求: 超链接:一定是GET请求: 表单:可以是GET,也可以是POST,这取决与<form& ...
- Nodejs cluster模块深入探究
由表及里 HTTP服务器用于响应来自客户端的请求,当客户端请求数逐渐增大时服务端的处理机制有多种,如tomcat的多线程.nginx的事件循环等.而对于node而言,由于其也采用事件循环和异步I/O机 ...