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 ...
随机推荐
- tomcat架构分析-索引
出处:http://gearever.iteye.com tomcat架构分析 (概览) tomcat架构分析 (容器类) tomcat架构分析 (valve机制) tomcat架构分析 (valve ...
- Zephyr-开发流程
开发流程 前提1:检查你的Linux主机满足入门指南中规定的最低要求. 具体请参考 : 物联网操作系统-Zephyr 前提2: 确保SDK的环境变量和zephyr项目的环境变量. 终端执行: $ e ...
- C# DataGridView 导出 Excel(根据Excel版本显示选择不同后缀格式xls或xlsx)
/// <summary> /// DataGridView导出至Excel,解决问题:打开Excel文件格式与扩展名指定格式不一致 /// </summary> /// &l ...
- Android Wear开发 - 数据通讯 - 第四节 : 数据封装(解决不能序列化问题)
一. 前言 背景 一开始笔者在研究数据发送与接收的时候,看到Wear数据类DataMap除了可以put基本类型外,还有个fromBundle方法来构建一个DataMap对象.所以一口气的将原本功能上的 ...
- VS2010中fatal error LNK1123错误的解决方案
问题描述: 在VS2010项目编译时会出现如下错误:LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 解决方案: 查找是否有两个cvtres.exe ...
- 「Poetize4」玉蟾宫
描述 Description 这片土地被分成N*M个格子,每个格子里写着'R'或者'F',R代表这块土地被赐予了rainbow,F代表这块土地被赐予了freda.现在freda要在这里卖萌...它要找 ...
- Qt入门（16）——组装窗口部件
这个例子显示了创建几个窗口部件并用信号和槽把它们连接起来,和如何处理重新定义大小事件. #include <qapplication.h> #include <qpushbutton ...
- 【转】爱普生打印机L358
原文网址:http://www.chiphell.com/thread-838403-1-1.html 儿子幼儿园老是要打印作业,就决定用他的压岁钱买个打印机,主要以文件打印为主,兼顾照片.昨天网上一 ...
- 高效算法——C 分饼
My birthday is coming up and traditionally I’m serving pie. Not just one pie, no, I have a number N ...
- 《精通CSS：高级Web标准解决方案》学习笔记（下）
1. background-position: left center; 两个参数分别是x和y轴方向的position 2. background-position: 10% 20%; 用百分数表示时 ...