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 ...
随机推荐
- bzoj1563: [NOI2009]诗人小G
Description Input Output 对于每组数据,若最小的不协调度不超过1018,则第一行一个数表示不协调度若最小的不协调度超过1018,则输出"Too hard to arr ...
- adb设备，根据serial获取vid pid
使用adb devices命令,可以轻松获取到所有连接到PC的adb设备的serial值. 但是adb命令无法获取adb usb设备的vendor id和product id. 本程序根据adb协议, ...
- Jcrop 做图片剪裁 在IE中无法显示问题解决办法
我遇到的Jcrop做剪裁无法显示的问题 是在IE8下发生的(在 firfox he chrome 中是显示正常的) 解决办法 是在一个图片加载完成后在 初始化 Jcrop:1.预加载图片的方法 var ...
- HTML/W3C-WHATWG-Differences
Differences between the W3C HTML 5.1 specification and the WHATWG LS The W3C HTML 5.1 specification: ...
- 【转】图说Android的8年演变史
原文网址:http://tech.gmw.cn/2016-02/17/content_18916338_14.htm 图说Android的8年演变史 我有话说 0 2011年10月谷歌 ...
- 关于DocumentCompleted事件
关于DocumentCompleted事件,MSDN给出的解释是在文档加载完毕后执行,但是在我的程序中DocumentCompleted却被多次调用,查了一下资料,大概出现了以下几种情况. 1.Web ...
- Remove Linked List Elements——LeetCode
Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...
- HDOJ 2026 首字母变大写
Problem Description 输入一个英文句子,将每个单词的第一个字母改成大写字母. Input 输入数据包含多个测试实例,每个测试实例是一个长度不超过100的英文句子,占一行. Outpu ...
- hdu 4608 I-number 大整数
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4608 #include <cstdio> #include <cmath> # ...
- A - 棋盘问题
地图看起来不太大,可以试试深搜,试一下.. 还是比较简单的搜索,竟然一下就过................... #include<stdio.h> #include<) ...