<!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">

.box{width:200px; height:100px; border:1px solid #00f; padding:10px;

/* margin-top:100px;

 margin-bottom:200px;

 margin-left:0;

 margin-right:20px;*/

/* margin:100px;*/

/*margin:100px 30px;*/

/*margin:100px 30px 10px;*/

margin:10px 20px 30px 40px;

}

</style>

</head>

<body>

<div class="box"><img src="sohulogo.png" /></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>padding</title>

<style type="text/css">

.box{width:172px; height:88px; border:1px solid #060; margin:100px; padding-top:12px; text-align:center;}

</style>

</head>

<body>

<div class="box"><img src="sohulogo.png" /></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">

.box{width:220px; height:200px; border:1px solid #ccc; padding-left:12px; padding-right:6px;}

</style>

</head>

<body>

<div class="box"></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>padding不会影响盒子大小的情况</title>

<style type="text/css">

.big{width:300px; height:200px; border:1px solid #096; margin:50px;}

.small{border:1px solid #f00; height:100px; padding-left:50px;}

</style>

</head>

<body>

<div class="big">

<div class="small"></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>firebug</title>

<style type="text/css">

.box{width:300px; height:200px; margin:100px; padding:50px; background-color:#093;}

</style>

</head>

<body>

<div class="box"></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,h1{margin:0; padding:0;}

.box{width:300px; height:200px; background-color:#099; text-align:center; margin:0 auto;}

h1{background-color:#963; width:300px;margin:0 auto;}

li{background-color:#F00;}

ul{background-color:#090; margin:0 auto;}

</style>

</head>

<body>

<div class="box">123</div>

<h1>我的标题</h1>

<ul>

    <li>测试</li>

    <li>测试</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:Arial, Helvetica, sans-serif;}

a{ text-decoration:none; color:#3c3c3c;}

a:hover{color:#C60; text-decoration:underline;}

dl{margin:50px auto; width:300px; border:1px solid #ccc;}

dl dt{ height:35px;line-height:35px; padding-left:40px; border-bottom:1px solid #ccc; background:url(img/ic.png) no-repeat  15px center;  font-size:14px;}

dd{padding:15px 0;}

ul{list-style:none; }

ul li{text-align:center; height:25px; line-height:25px; background:url(img/videoNewsLeft.gif) no-repeat 30px center;}

</style>

</head>

<body>

<dl>

    <dt><strong>山东鲁能</strong></dt>

    <dd>

        <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>

    </dd>

</dl>

</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,h1,h3,h4,h2,textarea,input,p{margin:0; padding:0;}

body{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#3c3c3c;}

a{color:#000; text-decoration:none;}

a:hover{color:#F00; text-decoration:underline;}

.box{ width:725px; height:220px; border:1px solid #abc; margin:0 auto; margin-top:100px; padding-left:25px; padding-top:30px;}

.box h3 a{font-weight:normal; color:#F00; text-decoration:underline; margin-left:10px;}

textarea{ width:670px; height:80px; border:1px solid #abc; margin:15px 0; padding:10px; font-size:12px; color:#CCC; resize:none;}

p{margin-top:15px; color:red;}

</style>

</head>

<body>

<div class="box">

        <h3>评论     <img src="data:images/110.jpg" /><a href="#">俺要打分</a></h3>

        <textarea>请输入您对的意见或者建议！！</textarea>

        <input type="image" src="data:images/tj.jpg" />

       <p>暂时没有评论</p>

</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;}

.box{width:300px; margin:100px auto;}

.search{width:175px; height:20px; border:1px solid #ccc; color:#CCC; background:url(search_03.png) no-repeat 5px center; padding-left:25px;}

label{color:#3c3c3c; font-size:14px;}

</style>

</head>

<body>

<div class="box">

<label for="sear">搜索一下：</label><input type="text" value="请输入搜索内容..." class="search" id="sear" /></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; font-family:"微软雅黑"; color:#3c3c3c;}

a{color:#4c4c4c; text-decoration:none;}

a:hover{color:#FF8400;}

.nav{width:100%; height:41px; border-top:3px solid #FF8500; border-bottom:1px solid #ccc; background-color:#fcfcfc;}

.navin{width:980px; height:41px; line-height:41px;margin:0 auto;}

.navin a{ display:inline-block; height:41px; padding:0 10px;}

.navin a:hover{ background-color:#EDEEF0;}

</style>

</head>

<body>

<div class="nav">

    <div class="navin">

        <a href="#">设为首页</a>

        <a href="#">移动客户端</a>

        <a href="#">你好</a>

        <a href="#">pad版</a>

    </div>

</div>

</body>

</html>

css.day03.eg的更多相关文章

  1. 2020年12月-第02阶段-前端基础-CSS Day03

    CSS Day03 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 理解: 1.能说出盒子模型有那四部分组成 2.能说出内边距的作用以及对盒子的影响 3 ...

  2. css.day03

    css的分类(位置): css层叠样式表 1.内嵌 样式表 2.行内样式表 3. 外连 css选择器分类 基础选择器 标签 id选择器 类选择器 复合选择器 交集选择器(标签指定式)  span.on ...

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

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

  4. 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03

    HTML5 第三天 一. 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面 ...

  5. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  6. Day03 javascript详解

    day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...

  7. day03 Django目录结构与reques对象方法

    day03 Django目录结构与reques对象方法 今日内容概要 django主要目录结构 创建app注意事项(重点) djago小白必会三板斧 静态文件配置(登录功能) requeste对象方法 ...

  8. java-前端之css

    css样式: <!-- 内联样式:在元素的style属性内写样式 --> <h2 style="color: red;">愿你单枪匹马,亦能所向披靡!< ...

  9. CSS的未来

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

随机推荐

  1. 将日志写入EventLog

    将日志写入EventLog 面向Windows的编程人员应该不会对Event Log感到陌生,以至于很多人提到日志,首先想到的就是EventLog.EventLog不仅仅记录了Windows系统自身针 ...

  2. springtest+juint开发测试如下：

    项目结构目录如下: UserMapper.java 为接口文件.User 为实体类.UserMapper.xml 为对应mybatis的xml文件.test为对应的测试包 applicationtes ...

  3. c++ 顺序容器学习 - 容器适配器

    摘要: 对 容器适配器 的疑问. 刚开始接触 容器适配器 时,总感觉怪怪的,认为多此一举,顺手搜了搜,原来我在这一点is not alone: STL容器适配器的用途 其中有个老兄说的好,这里 引用一 ...

  4. mt7601 driver

    http://download.csdn.net/detail/u011500307/7011649 http://my.oschina.net/fgq611/blog/180750 http://b ...

  5. nodejs 与 mysql联接

    首先安装Mysql 模块吧 npm install mysql 刚开始在网上搜索了一个测试代码,发现根本就连接不上mysql. varClient=require('mysql').Client, c ...

  6. C#代码实现隐藏任务栏、开始菜单和禁用任务管理

    一:截图,主要是调用系统接口和更改注册表实现功能 二:代码 using System; using System.Collections.Generic; using System.Linq; usi ...

  7. 在eclipse下远程调试hadoop2.0

    在<在eclipse下编译hadoop2.0源码>一文中,我详细介绍了如何在eclipse环境和命令行环境下编译hadoop2.0源代码,并简单介绍了如何构建hadoop环境,这篇文章将着 ...

  8. Hibernate五 HQL查询

    HQL查询一 介绍1.HQL:Hibernate Query Language,是一种完全面向对象的查询语言.使用Hibernate有多重查询方式可供选择:hibernate的HQL查询,也可以使用条 ...

  9. Solr系列一:Solr与Tomcat的整合

    第一次尝试着去写一个系列的教程,希望自己能坚持下去,也希望自己能够通过博客的编写来加深自己对solr搜索的理解. Solr与Tomcat的整合网上有很多教程,我就以我的整合为例来讲述一下我的整合过程, ...

  10. Java GC CMS 日志分析

    https://blogs.oracle.com/poonam/entry/understanding_cms_gc_logs 笔者对其中某几条记录又进行了详细说明,以下是一条完整的CMS日志记录的示 ...