<!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. bzoj1233: [Usaco2009Open]干草堆tower

    Description 奶牛们讨厌黑暗. 为了调整牛棚顶的电灯的亮度,Bessie必须建一座干草堆使得她能够爬上去够到灯泡 .一共有N大包的干草(1<=N<=100000)(从1到N编号) ...

  2. STM32启动文件的选择

    移植了同事一个程序,然后死活不能用,发现启动文件错了,明天继续调.真把人折腾死了. stm32给的库文件太琐碎了,正如它的芯片型号一样繁多,例如启动文件: 网上查到的各个文件的解释是: startup ...

  3. js singleton

    方案一:利用闭包的两个作用,可以变通地读到内部的变量. 方案二: 是可以让这些变量始终在内存中. 方案一 var SingletonTester = (function () { //单例方法 fun ...

  4. Flip Game

    http://poj.org/problem?id=1753 #include<cstdio> #include<algorithm> #include<string.h ...

  5. ZOJ 3469 Food Delivery

    题目大意: 有n个人,住在一条直线上.第i个人的坐标是Xi,街上有个外卖餐馆的位置是X,现在餐厅工作人员要给街上的每个人送饭,送完之后再回到餐厅,送饭人的速度是V,每个人有个不满意值,当这个人送餐时间 ...

  6. SRM 404(1-250pt, 1-500pt)

    DIV1 250pt 题意:对于1-9数字三角形如下图,设其为a[i][j],则a[i][j] = (a[i-1][j] + a[i-1][j+1]) % 10.现在对于某个数字三角形, 每行告诉你某 ...

  7. warning: Could not canonicalize hostname: vpn

    warning: Could not canonicalize hostname: vpn vim /etc/hosts 127.0.0.1 hostname

  8. 九度online judge 1543 二叉树

    题目1543:无限完全二叉树的层次遍历 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:389 解决:54 题目描述: 有一棵无限完全二叉树,他的根节点是1/1,且任意一个节点p/q的左儿 ...

  9. HDU 2222 AC自动机 裸题

    题意: 问母串中出现多少个模式串 注意ac自动机的节点总数 #include <stdio.h> #include <string.h> #include <queue& ...

  10. PHP实现大文件的上传设置

    打开php.ini,首先找到 ;;;;;;;;;;;;;;;; ; File Uploads ; ;;;;;;;;;;;;;;;; 区域,有影响文件上传的以下几个参数: file_uploads = ...