css.day04.eg
<!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>外边距合并</title>
<style type="text/css">
.top{width:300px; height:150px; background-color:#F00; margin-bottom:50px;}
.bottom{width:300px; height:150px; background-color:#0F0; margin-top:100px;}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
<!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>外边距合并</title>
<style type="text/css">
.father{width:300px; height:150px; background-color:#F00; overflow:hidden;}
.son{width:100px; height:50px; background-color:#0F0; margin-top:50px; }
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
<!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>浮动</title>
<style type="text/css">
.top,.bottom{width:300px; height:150px; background-color:#F00;}
.top{float:left;}
.bottom{background-color:#0F0; float:right;}
</style>
</head>
<body>
<div class="top">
</div>
<div class="bottom"></div>
</body>
</html>
<!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>浮动</title>
<style type="text/css">
.one,.two{width:200px; height:100px; background-color:#900; float:left;}
.two{background-color:#0F0;}
.three{width:200px; height:120px; background-color:#00F;}
</style>
</head>
<body>
<div class="one">
</div>
<div class="two">
</div>
<div class="three"></div>
</body>
</html>
<!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>导航栏</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c;}
a{color:#3c3c3c; text-decoration:none;}
ul{list-style:none; margin:50px auto; width:660px;}
ul li{float:left; width:110px; height:42px;}
ul li a{ display:block; width:110px; height:42px; text-align:center; line-height:42px;}
ul li a:hover{background-color:red;}
</style>
</head>
<body>
<ul>
<li><a href="#">网址大全</a></li>
<li><a href="#">电视剧</a></li>
<li><a href="#">最新电影</a></li>
<li><a href="#">网址大全</a></li>
<li><a href="#">热门游戏</a></li>
<li><a href="#">小游戏</a></li>
</ul>
</body>
</html>
<!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>导航栏</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; color:#3c3c3c; font-family:"微软雅黑"}
a{color:#3c3c3c; text-decoration:none;}
.box{width:500px; height:300px; border:1px solid #093; margin:50px auto;}
.box ul{list-style:none; margin:30px 10px;}
.box ul li{float:left; width:80px; height:40px; text-align:center; line-height:40px;}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">百度一下</a></li>
</ul>
</div>
</body>
</html>
<!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>auto</title>
<style type="text/css">
.box{width:800px; border:1px solid #f00; margin:0 auto;}
.in{width:200px; height:200px; background-color:#F00; margin-left:auto;}
</style>
</head>
<body>
<div class="box">
<div class="in"></div>
</div>
</body>
</html>
<!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>一列固定宽度且居中</title>
<style type="text/css">
body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#3c3c3c;}
a:hover{color:#f00; text-decoration:underline;}
.top{width:1180px; height:80px; background-color:#F00; margin:0 auto;}
.nav{width:1180px; height:35px; background-color:#0F0; margin:0 auto;}
.banner{width:100%; height:300px; background-color:#00F;}
.main{width:1180px; height:500px; background-color:#FF0; margin:0 auto;}
.footer{width:1180px; height:120px; background-color:#0FF; margin:0 auto;}
</style>
</head>
<body>
<div class="top"></div>
<div class="nav"></div>
<div class="banner"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
<!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>两列固定宽度</title>
<style type="text/css">
body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#3c3c3c;}
a:hover{color:#f00; text-decoration:underline;}
#top,#nav,#banner,#main,#footer{width:1000px; margin:1px auto;}
#top{height:80px; background-color:#F00;}
#nav{height:35px; background-color:#0f0;}
#banner{height:150px; background-color:#00F;}
.left{width:300px; height:500px; background-color:#099; float:left; }
.right{width:699px; height:500px; background-color:#396; float:right;}
</style>
</head>
<body>
<div id="top"></div>
<div id="nav"></div>
<div id="banner"></div>
<div id="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
<!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>浮动</title>
<style type="text/css">
body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#690;}
a:hover{color:#fff; text-decoration:none;}
ul{list-style:none;}
.banner{width:760px; height:150px; margin:0 auto; background-image:url(banner_bg.jpg);}
.nav{height:32px; width:760px; margin:0 auto; background-image:url(button1_bg.jpg);}
.nav li{float:left; width:80px; height:32px; background:url(button1.jpg) no-repeat;}
.nav a{display:block; width:80px; height:32px; text-align:center; line-height:32px;}
.nav a:hover{background:url(button2.jpg) no-repeat;}
.main{height:500px; background-color:#6C6; width:760px; margin:0 auto;}
</style>
</head>
<body>
<div class="banner">
<img src="banner1.jpg" width="600" height="150" />
</div> <!--这是banner部分-->
<div class="nav">
<ul>
<li><a href="#">首页导读</a></li>
<li><a href="#">首页导读</a></li>
<li><a href="#">首页导读</a></li>
<li><a href="#">首页导读</a></li>
<li><a href="#">首页导读</a></li>
<li><a href="#">首页导读</a></li>
</ul>
</div> <!-- 这是nav 部分 -->
<div class="main">
</div>
</body>
</html>
转载请备注。
css.day04.eg的更多相关文章
- css.day04
1. box 盒子模型 <p> <span> <hr/> <div> css+ div p span css+ xhtml b ...
- CSS Day04 css核心基础
1.在HTML中引入CSS的方法 (1)行内式 行内式即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用. 例如: <h1 style=“colo ...
- 2020年12月-第02阶段-前端基础-CSS Day04
1. 浮动(float) 记忆 能够说出 CSS 的布局的三种机制 理解 能够说出普通流在布局中的特点 能够说出我们为什么用浮动 能够说出我们为什么要清除浮动 应用 能够利用浮动完成导航栏案例 能够清 ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 【day04】css
一.CSS2.0[Cascading Style Sheets]层叠样式表 1.什么是CSS:修饰网页元素(标记)外观(比如给文字加颜色,大小,字体)的,W3C规定尽量用CSS样式替代XHTML属性 ...
- day04 orm操作
day04 orm操作 昨日内容回顾 小白必会三板斧 request对象方法 静态文件 请求方式 python链接数据库 django链接数据库 小白必会三板斧 HttpResponse :返回前端浏 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
随机推荐
- NSEnumerator用法小结
NSEnumerator 3)枚举 (NSEnumerator)遍历数组每个索引处的对象,你可以编写一个0到[array count]的循环,而NSEnumerator用来描述这种集合迭代运算的方 ...
- LeapMotion预览——什么是LeapMotion
LeapMotion预览 这个就是LeapMotion: 原文转自: LeapMotion预览 LeapMotion 官网:http://leapmotion.com/ 开发者:https://d ...
- JavaScript DES 加密
最近做网页数据加密工作, 使用CryptoJS v3.1.2 这个JavaScript脚本,网上比较有质量的文章实在太少,经验证加密结果与Asp.net DES加密结果一致 参考文章 https:// ...
- 理解Java机制最受欢迎的8幅图
原文链接: Top 8 Diagrams for Understanding Java 翻译人员: 铁锚 翻译时间: 2013年10月29日 世间总是一图胜过千万言! 下面的8幅图来自于 Progr ...
- Maven实战二
简述: 现需要 在Eclipse中配置Maven插件 安装maven应用,配置Maven环境变量 建立Maven管理的工程 用Maven导入Gson包, 编写简易Json输出程序 步骤: 1. 首先到 ...
- 【模拟】Codeforces 671B Robin Hood
题目链接: http://codeforces.com/problemset/problem/671/B 题目大意: N个人,每个人有Ci钱,现在有一个人劫富济贫,从最富的人之一拿走1元,再给最穷的人 ...
- C数组的相关知识
数组的定义:具有相同数据类型的集合.在内存中开辟连续的存贮空间,从上往下,依次存储 补充:内存是以字节位单位的存储空间,内存中的每一个字节都唯一对应一个编号.这个编号就是地址.只要是存在内存中的数据都 ...
- HDOJ 1846 Brave Game
Problem Description 十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中 ...
- MySQL选用可重复读之前一定要想到的事情
原文地址:http://blog.itpub.net/29254281/viewspace-1398273/ MySQL选用可重复读隔离级别之前一定要想到的事情.间隙锁 MySQL在使用之前有三个务必 ...
- [Locked] Paint Fence
Paint Fence There is a fence with n posts, each post can be painted with one of the k colors. You ha ...