<!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的更多相关文章

  1. css.day04

    1. box   盒子模型 <p>   <span>   <hr/>   <div> css+   div  p  span css+  xhtml b ...

  2. CSS Day04 css核心基础

    1.在HTML中引入CSS的方法 (1)行内式 行内式即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.  例如:  <h1 style=“colo ...

  3. 2020年12月-第02阶段-前端基础-CSS Day04

    1. 浮动(float) 记忆 能够说出 CSS 的布局的三种机制 理解 能够说出普通流在布局中的特点 能够说出我们为什么用浮动 能够说出我们为什么要清除浮动 应用 能够利用浮动完成导航栏案例 能够清 ...

  4. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  5. 【day04】css

    一.CSS2.0[Cascading Style Sheets]层叠样式表  1.什么是CSS:修饰网页元素(标记)外观(比如给文字加颜色,大小,字体)的,W3C规定尽量用CSS样式替代XHTML属性 ...

  6. day04 orm操作

    day04 orm操作 昨日内容回顾 小白必会三板斧 request对象方法 静态文件 请求方式 python链接数据库 django链接数据库 小白必会三板斧 HttpResponse :返回前端浏 ...

  7. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  8. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  9. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

随机推荐

  1. IOS--UISlider的使用方法

    IOS--UISlider的使用方法 // UISlider的常用方法 UISlider *oneSlider = [[UISlider alloc] init]; // 最常用 oneSlider. ...

  2. [151225] Python3 实现最大堆、堆排序，解决TopK问题

    参考资料: 1.算法导论,第6章,堆排序 堆排序学习笔记及堆排序算法的python实现 - 51CTO博客 堆排序 Heap Sort - cnblogs 小根堆实现优先队列:Python实现 -cn ...

  3. SharePoint DataFormWebPart 通过Caml和xslt聚合内容

    以下是一个例子,SPDataSource用于查询内容,DatasourceMode属性指定查询范围(网站集,网站,列表),SelectCommand是Caml查询:Xsl展示内容,下面列子是用tabl ...

  4. Git初体验

    http://www.cnblogs.com/yejiurui/archive/2013/07/29/3223153.html

  5. Qt Style Sheets Examples（官方例子目录，很全）

    Contents Style Sheet Usage Customizing the Foreground and Background Colors Customizing Using Dynami ...

  6. fdisk磁盘分区

    http://www.cr173.com/html/4336_1.html http://www.51cto.com/art/200602/20328.htm

  7. BZOJ1726: [Usaco2006 Nov]Roadblocks第二短路

    1726: [Usaco2006 Nov]Roadblocks第二短路 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 768  Solved: 369[S ...

  8. C语言基础课程 第二课 HelloWorld不为菜鸟所知的秘密

    1    愉快的开端hello world    4 1.1    include头文件包含    4 1.2    main函数    4 1.3    注释    4 1.4    {}括号,程序 ...

  9. 图论（floyd算法）：NOI2007 社交网络

    [NOI2007] 社交网络 ★★   输入文件:network1.in   输出文件:network1.out   简单对比 时间限制:1 s   内存限制:128 MB [问题描述] 在社交网络( ...

  10. 数据结构(线段树)：BZOJ 3126: [Usaco2013 Open]Photo

    3126: [Usaco2013 Open]Photo Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 222  Solved: 116 Descrip ...