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 ...
随机推荐
- bzoj3047: Freda的传呼机 && 2125: 最短路
Description 为了随时与rainbow快速交流,Freda制造了两部传呼机.Freda和rainbow所在的地方有N座房屋.M条双向光缆.每条光缆连接两座房屋,传呼机发出的信号只能沿着光缆传 ...
- Java中间件
传统的HTML已经满足不了如今web系统的诸多的功能需求,建立一个交互式的Web,便诞生了各种Web开发语言,如ASP,JSP,PHP等,这些语言与传统的语言有着密切的联系,如JSP基于Java语言. ...
- 转： 静态模式makefile中$(cobjs): $(obj)/%.o: $(src)/%.c
4.12 静态模式静态模式规则是这样一个规则:规则存在多个目标,并且不同的目标可以根据目标文件的名字来自动构造出依赖文件.静态模式规则比多目标规则更通用,它不需要多个目标具有相同的依赖.但是静态模式规 ...
- 通过GetManifestResourceStream加载文件出现错误提示“null值”对于“stream”无效[转]
本文解决了我的问题,收藏一下. 原文地址:http://blog.sina.com.cn/s/blog_a67799f601010atz.html 在做Mobile开发时,需要引入图片,用到了这个方法 ...
- Unity3d 项目管理 版本管理
Unity3d中项目管理 版本管理 如果在提交文件的时候发现提示有"先更新,再提交的"提示的时候,这是因为,A提交了一个版本文件,版本是13,那么你还在修改版本为12的文件 ...
- codeforces C. k-Tree
思路:dp[i][j]表示和为i,最大值为j的方案数. #include <cstdio> #include <cstring> #include <algorithm& ...
- Spring基础介绍
Spring属于轻量级还是重量级框架? 这需针对使用Spring的功能而言,比如我们常使用其核心服务整合SSH,这样则为轻量级. 如果使用其大部分服务则可以理解为重量级. 普通JAVA项目环境 ...
- zabbix 默认item采集使用被动模式 需要改为主动模式
数据采集的工作模式可以分为被动模式(服务器端到客户端采集数据) 主动模式(客户端主动上报数据到服务器端) 服务器配置: DBHost=192.168.32.55 DBName= zabbix DBUs ...
- mysql 监控长事务
mysql> desc information_schema.innodb_trx -> ; +----------------------------+----------------- ...
- 【Linux】鸟哥的Linux私房菜基础学习篇整理（八）
1. useradd [-u UID] [-g 初始用户组] [-G 次要用户组] [-mM]\ [-c 说明栏] [-d 主文件夹绝对路径] [-r] [-s shell] 用户账号名:新增用户 ...