css.day03.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">
.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的更多相关文章
- 2020年12月-第02阶段-前端基础-CSS Day03
CSS Day03 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 理解: 1.能说出盒子模型有那四部分组成 2.能说出内边距的作用以及对盒子的影响 3 ...
- css.day03
css的分类(位置): css层叠样式表 1.内嵌 样式表 2.行内样式表 3. 外连 css选择器分类 基础选择器 标签 id选择器 类选择器 复合选择器 交集选择器(标签指定式) span.on ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03
HTML5 第三天 一. 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- Day03 javascript详解
day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...
- day03 Django目录结构与reques对象方法
day03 Django目录结构与reques对象方法 今日内容概要 django主要目录结构 创建app注意事项(重点) djago小白必会三板斧 静态文件配置(登录功能) requeste对象方法 ...
- java-前端之css
css样式: <!-- 内联样式:在元素的style属性内写样式 --> <h2 style="color: red;">愿你单枪匹马,亦能所向披靡!< ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
随机推荐
- codevs 4163 hzwer与逆序对
传送门 题目描述 Description hzwer在研究逆序对. 对于数列{a},如果有序数对(I,j)满足:i<j,a[i]>a[j],则(i,j)是一对逆序对. 给定一个数列{a}, ...
- Reducing the Dimensionality of data with neural networks / A fast learing algorithm for deep belief net
Deeplearning原文作者Hinton代码注解 Matlab示例代码为两部分,分别对应不同的论文: . Reducing the Dimensionality of data with neur ...
- STM32F10x 学习笔记5（USART实现串口通讯 1）
STM32F10x 系列单片机中都包含了USART 模块,所谓USART,就是通用同步异步收发器.通用同步异步收发器(USART)提供了一种灵活的方法与使用工业标准NRZ异步串行数据格式的外部设备之间 ...
- 大众点评试水O2O新模式：实体店试穿，扫描二维码付款 现场取货
在餐饮美食行业取得不错的成绩之后,大众点评将触角延伸到了线下的传统商铺,开始涉足线下商品的 O2O 团购.和传统的线上下单,线下消费的 O2O 模式不同.大众点评的 O2O 团购用户,可在店内试穿后通 ...
- delphi OnMouseLeave 事件不灵敏及解决之道（使用TrackMouseEvent函数进行加强）
http://topic.csdn.net/t/20020104/09/456913.html CM_MouseLeave消息好象不太灵敏,当鼠标快速移出窗体时,就收不到这个消息,请问大家有什么好办法 ...
- Instant Complexity(模拟，递归)
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 1535 Accepted: 529 Description Analyz ...
- LA 4726 再看斜率优化
感觉最近一批解题报告没写,现在慢慢补吧,算是noip前攒攒rp了 首先感到深深的自责,因为之前对斜率优化没有深入的理解,只是记住了一般步骤,并没有完全了解为什么这样做 先就这道题目而言 首先这种序列题 ...
- 图论（2-sat）：Priest John's Busiest Day
Priest John's Busiest Day Description John is the only priest in his town. September 1st is the Jo ...
- C#中object sender,EventHandler e有个毛作用
button1_Click(object sender,EventHandler e) { Button button=(Button)sender; button.Text="text p ...
- @protocol 和 category 中如何使用 @property
出题者简介: 孙源(sunnyxx),目前就职于百度 整理者简介:陈奕龙(子循),目前就职于滴滴出行. 转载者:豆电雨(starain)微信:doudianyu 在 protocol 中使用 prop ...