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未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
随机推荐
- IOS QuartzCore核心动画框架
IOS QuartzCore核心动画框架 核心动画框架 使用核心动画需要引入的框架:#import CALayer: CoreAnimation CALayer就是UIView上的图层,很多的CALa ...
- N.O.W,O.R,N.E.V.E.R--12days to LNOI2015
双向链表 单调队列,双端队列 单调栈 堆 带权并查集 hash 表 双hash 树状数组 线段树合并 平衡树 Treap 随机平衡二叉树 Scapegoat Tree 替罪羊树 朝鲜树 块状数组,块状 ...
- linux hadoop 集群安装步骤
http://blog.csdn.net/xjavasunjava/article/details/12013677 1,时间同步hadoop集群的每台机器的时间不能相差太大. 安装集群前最好进行一下 ...
- oracle积累继续
选出当天的日期的数据 select * from test_table where to_char(datetime, 'yyyy-mm-dd')=to_char(sysdate,'yyyy-mm-d ...
- Node.js事件发射器
在Node很多对象发出事件,例如net.Server每个同级连接到它,一个fs.readStream发出打开文件事件时,每次都发出一个事件. 它发出事件的所有对象都是events.EventEmitt ...
- BZOJ 1033 杀蚂蚁
Description 最近,佳佳迷上了一款好玩的小游戏:antbuster.游戏规则非常简单:在一张地图上,左上角是蚂蚁窝,右下角是蛋糕,蚂蚁会源源不断地从窝里爬出来,试图把蛋糕搬回蚂蚁窝.而你的任 ...
- NXP LPC11xx I2C Slave 从机程序
/**************************************************************************** * $Id:: i2cslave.c 363 ...
- MySql的rpm安装
MySQL 5.5(rpm格式)在Linux 上安装 Linux系统上安装MySQL 5.5prm 1.准备工作 从MySQL官网上分别下载mysql服务器端于客户端包. 下载步骤:Downloads ...
- 对于唯一索引使用唯一条件搜索, InnoDB 只锁定找到的index record,不是它之前的区间
| test100 | CREATE TABLE `test100` ( `sn` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增编号', `phoneNo` ...
- 网络流(二分)：BZOJ 3993: [SDOI2015]星际战争
Description 3333年,在银河系的某星球上,X军团和Y军团正在激烈 地作战.在战斗的某一阶段,Y军团一共派遣了N个巨型机器人进攻X军团的阵地,其中第i个巨型机器人的装甲值为Ai.当一个巨型 ...