李洪强和你一起学习前端之(7)复习

复习:

1.1行高

行高可以继承

1.2行高单位

给单独的盒子设置:

Px　　跟文字大小没有关系

em　　行高和字体大小相乘

%

不带单位

给父盒子设置:

px　　先计算再继承

2em　　先计算再继承

%　　

影响盒子大小: Padding  边框

1.3.2 Padding

取值: 上右下左

1.3.3 Margin

塌陷

给父盒子设置border

给父盒子设置overflow

案例一:

实现效果: 

代码:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b9edb }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2eafa9 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #3c7400 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #d76019 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #ad5cff }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; min-height: 23.0px }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151; min-height: 23.0px }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972; min-height: 23.0px }
p.p13 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972 }
span.s1 { color: #596972 }
span.s2 { color: #2b9edb }
span.s3 { color: #d76019 }
span.s4 { color: #000000 }
span.s5 { color: #929151 }
span.s6 { color: #060606 }
span.s7 { color: #ad5cff }
span.s8 { color: #ff7900 }
span.s9 { color: #3c7400 }
span.s10 { color: #97a700 }
span.s11 { color: #2eafa9 }
span.Apple-tab-span { white-space: pre }

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

/*css初始化*/

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

.box{

width: 260px;

height: 327px;

border: 1px solid #009900;

margin: 20px auto;

background:url(img/bg.gif);

}

.title{

height: 23px;

border-left: 4px solid #c9E143;

margin: 10px 0 0 10px;

/*没有设置宽度可以用padding*/

padding-left: 11px;

/*让文字垂直居中显示*/

line-height: 23px;

color: white;

/*设置不是粗体显示*/

}

h4{

/*设置不是粗体显示*/

font-weight: normal;

}

.list{

width: 222px;

height: 279px;

background: white;

margin-left: 10px;

margin-top: 5px;

padding-left: 9px;

padding-right: 9px;

}

.list li{

height: 30px;

border-bottom: 1px dashed #666666;

line-height: 30px;

background: url(img/tb.gif) no-repeat left 8px;

padding-left: 16px;

}

</style>

</head>

<body>

<div class="box">

<div class="title">

<h4>爱宠知识</h4>

</div>

<ul class="list">

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

<a href="">养猫比养狗健康</a>

</li><li>

<a href="">养猫比养狗健康</a>

</li><li>

<a href="">养猫比养狗健康</a>

</li>

</ul>

</div>

</body>

</html>

案例2:

实现效果: 

代码:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b9edb }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2eafa9 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #3c7400 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606; min-height: 23.0px }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #d76019 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #ad5cff }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151 }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151; min-height: 23.0px }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972; min-height: 23.0px }
span.s1 { color: #596972 }
span.s2 { color: #2b9edb }
span.s3 { color: #d76019 }
span.s4 { color: #929151 }
span.s5 { color: #060606 }
span.s6 { color: #ad5cff }
span.s7 { color: #3c7400 }
span.s8 { color: #97a700 }
span.s9 { color: #ff7900 }
span.s10 { color: #000000 }
span.s11 { color: #2eafa9 }
span.Apple-tab-span { white-space: pre }

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

.box{

width: 208px;

height: 383px;

border: 1px solid #CECECE;

/*居中显示*/

margin: 20px auto;

}

.title{

height: 25px;

background-color: #ECEDEE;

/*设置居中*/

line-height: 25px;

}

h4{

padding-left: 9px;

}

.photo{

width: 180px;

height: 180px;

border: 1px solid #ECEDEE;

margin: 5px auto;

}

.weibo{

/*//让内容居中

margin: 0 auto 是让盒子居中*/

text-align: center;

border-bottom: 1px dashed #D1D1D1;

padding-bottom: 10px;

}

.weibo input{

height: 24px;

width: 70px;

background: url(img/vb.jpg) no-repeat;

margin-bottom: 5px;

}

.friend input{

width: 69px;

height: 23px;

}

.friend{

text-align: center;

}

</style>

</head>

<body>

<div class="box">

<div class="title">

<h4>个人资料</h4>

</div>

<div class="photo">

<img src="img/1.jpg"/>

</div>

<div class="weibo">

<span id="">

V闪闪

</span>

<img src="img/v.jpg"/>

<br />

<input type="button" name="" id="" value="微博" />

</div>

<div class="friend">

<input type="button" name="" id="" value="加好友" />

<input type="button" name="" id="" value="发纸条" />

<input type="button" name="" id="" value="写留言" />

<input type="button" name="" id="" value="加关注" />

</div>

</div>

</body>

</html>

时间： 2024-08-10 02:11:03

李洪强和你一起学习前端之(7)复习的相关文章

李洪强和你一起学习前端之(2)表格、表单、标签语义化

大家早上好!新的一天开始了,学如逆水行舟,不进则退,一起加油吧! 在学习的过程中有任何问题想与我交流的,加我QQ: 990625403 好了,让我们开始今天的学习吧! 温故而知新 1 复习昨天的知识 1.1 单标签 <!--文本内容--> 注释标签  Ctrl +/ <br> 换行标签 <hr> 横线标签 1.2 双标签 <p></p> 段落标签 <hn></hn> n的取值是1-6  标题标签 <font size

李洪强和你一起学习前端之(6)浮动 布局 定位

亲爱的,美好的一天开始了,今天是2017年3月22日,时间真快,三月马上就要结束了, 希望我们不负大好时光,活到老,学到老,吃得苦中苦,方为人上人! CSS基础 1 复习昨天知识 1.1行高 行高可以继承 1.2行高单位 单独的盒子设置: Px  em  % 不带单位 给父盒子设置: Px   2em   % 不带单位 1.3盒模型组成 1.3.1 Border ->border-width ->border-style ->border-color ->Border: borde

李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例

今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元素在一行上显示 ->设置了浮动的元素,影响其后面的元素 作用: 解决了文字图片环绕问题 制作网页导航栏 网页布局 清除浮动 清除浮动的影响 1.2定位 静态定位(static) 绝对定位(absolute)看脸型 绝对定位绝对脱标(不占位置) 行内元素转化为行内块元素 如果父盒子没有设置定位,以浏览器左

李洪强iOS经典面试题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px "Helvetica Neue"; color: #333333; min-height: 20.0px } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px "Helvetica Neue"; color: #333333; background-color: #ffffff } p.p3 { margi

李洪强iOS开发之iOS社区收集

李洪强iOS开发之iOS社区收集 项目 简述 github 全球最大的代码仓库,无论是iOS开发还是Android开发没有人不知道这个网站,它也是一个社区,你可以去follow(关注)某些人或公司. cocoachina 号称全球最热的苹果开发社区,这里有很多关于iOS,mac开发的相关文章,值得收藏的中午社区 Swift 语言指南 这份指南汇集了Swift语言主流学习资源,并以开发者的视角整理编排,虽然看上去只是一篇博文,但是作者每周都在更新,从这个角度来说,我把它归类到社区中. swiftk

李洪强iOS开发之iOS学习方法收集

李洪强iOS开发之iOS学习方法收集 在这里收集一些iOS学习方法,会不断更新 项目 简述 日期 一年多iOS开发总结 作者总结了自己一年多的iOS学习经验,对于iOS初学者来说很多地方是可以借鉴的 2015.01.07 iOS面试基础知识36题 作者收集了iOS基础比较常见的面试题 2015.04.01

李洪强iOS开发之iOS好文章收集

李洪强iOS开发之iOS好文章收集 该文收集朋友们转发或自己的写的技术文章,如果你也有相关的好文章,欢迎留言,当好文章多的时候,我会对这些好文章进行分门别类 文章 简述 日期 直播服务配置 使用 nginx 和 rtmp 插件搭建视频直播和点播服务器 2015-05-12 20:13:00 iOS9适配技巧 图iOS9适配新技巧 2015-09-29 09:01 TextKit分页效果 图文混排 2015年6月1日 iPhone 6 / 6 Plus 设计·适配方案 屏幕适配 2014-11-2

李洪强漫谈iOS开发[C语言-043]-判断较早日期

李洪强漫谈iOS开发[C语言-043]-判断较早日期

李洪强漫谈iOS开发[C语言-041]-计算月份天数

李洪强漫谈iOS开发[C语言-041]-计算月份天数