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未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
随机推荐
- sql新增后返回主键
对于刚学的人来说有点帮助,新增后返回主键有两种方法: 1,返回自增的主键: INSERT INTO 表名 (字段名1,字段名2,字段名3,…) VALUES (值1,值2,值3,…) SELECT @ ...
- iOS9 未受信任的企业级开发者
升级iOS9,app打不开怎么办?6个步骤让你应对“未受信任的企业及开发者账号” 点开App,弹出未受信任的开发者,记住弹框中冒号后面的大写字母.关闭,进入设置. 进入通用 进入描述文件 找到所对应的 ...
- BZOJ 1025 游戏
Description windy学会了一种游戏.对于1到N这N个数字,都有唯一且不同的1到N的数字与之对应.最开始windy把数字按顺序1,2,3,……,N写一排在纸上.然后再在这一排下面写上它们对 ...
- STM32F10x 学习笔记6（USART实现串口通讯 2）
这次讲讲利用串口收发中断来进行串口通讯.STM32 上为每个串口分配了一个中断.也就是说无论是发送完成还是收到数据或是数据溢出都产生同一个中断.程序需在中断处理函数中读取状态寄存器(USART_SR) ...
- Git基本操作（Windows下）
在开始使用Git之前,我觉得是很有必要了解下Git与其他版本控制系统的差异与文件在Git中的三种状态.可以到下面这个网站看下:Git详解之一 Git起步,了解之后,可以对Git的基本操作有一个更清晰的 ...
- COJ 0288 路径(2015升级版)
路径(2015升级版) 难度级别:D: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 WZJ在生日当天决定在他的领地举行一场马拉松比赛,他的 ...
- HDU 5889 Barricade 【BFS+最小割 网络流】(2016 ACM/ICPC Asia Regional Qingdao Online)
Barricade Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total S ...
- Redis源码阅读笔记（2）——字典（Map）实现原理
因为redis是用c写的,c中没有自带的map,所以redis自己实现了map,来看一下redis是怎么实现的. 1.redis字典基本数据类型 redis是用哈希表作为字典的底层实现,dictht是 ...
- NOI题库1799 最短前缀
1799:最短前缀 总时间限制: 1000ms 内存限制: 65536kB 描述 一个字符串的前缀是从该字符串的第一个字符起始的一个子串.例如 "carbon"的字串是: &quo ...
- [Locked] Wiggle Sort
Wiggle Sort Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= ...