Python学习笔记第二十二周(前端知识点补充)

目录:

  一、伪类

  二、样式

   1、字体

   2、背景图片

   3、margin和padding

   4、列表属性

   5、float

   6、clear

   7、position

   8、text-decoration(a标签下划线去除)

   9、vertical-align

内容:

  一、伪类

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> a:link{
background-color:red; }
a:hover{
background-color:blue;
}
a:visited{
background-color: #dddddd;
}
a:active{
background-color:green;
}
p:after{
content: 'ppp';
}
p:before{
content: 'aaa';
}
</style>
</head>
<body>
<!--伪类-->
<a href="http://www.baidu.com">baidu</a>
<p>hello p &nbsp;</p>
</body>
</html>

  二、样式

  1、字体格式:

    letter-spacing: 字母之间的间距

    word-spacing: 单词之间的间距(重要)

    text-transform:capitalize  首字母大写

  2、背景图片

    background-position:center center 表示居中

  3、margin和padding

  注意:在div嵌套中,如果外面的div标签没有内容,设置里面div的margin的时候,会发现左右是你想要的效果,但是上下会有问题,这个问题是div塌陷问题,通常需要在div中标注内容或者在外面div中加border解决div塌陷问题

  4、列表属性

  ul,ol{

    list-style:decimal-leading-zero;

    list-style:none;

    list-style:circle;

    list-style:upper-alpha;

    list-style:disc;

  }

ul{
/*list-style: decimal-leading-zero;*/ 显示数字
/*list-style:none;*/ 无任何样式
/*list-style:circle;*/ 显示为序列为空心圆
/*list-style:upper-alpha; 显示序列为A B C*/
list-style:disc; 普通显示 }

 

  5、float

  float设计之初是为了文本环绕图片而设计的,所以虽然div标签会悬浮,它还是会把其他div标签内的文本挤出自己所占的空间

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color:red;
height:30px;
width:50px;
}
#i2{
background-color:yellow;
height:30px;
float: left;
width:50px;
}
#i3{
background-color:green;
height:70px;
width:200px;
}
</style>
</head>
<body>
<div id="i1">1111</div>
<div id="i2">222</div>
<div id="i3">333</div>
</body>
</html>

  

  6、clear

  clear:none|left|right|both

  取值:

  none: 默认值,允许两边都可以有浮动对象

  left:不允许左边有浮动对象

  right:不允许右边有浮动对象

  both:不允许有浮动对象

  备注:

  与clear达到同样的效果,可以在父级标签加overflow:hidden属性

  

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
background-color:blue;
}
.menu1{
width:100px;
hegith:50px;
color:gold;
float:left;
}
.menu2{
width:100px;
hegith:50px;
color:gold;
float:left;
}
.bottom{
background-color: green;
text-align: center;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu1">菜单一</div>
<div class="menu2">菜单二</div>
<div class="clear"></div>
</div>
<div class="bottom">底部</div>
</body>
</html>

  7、position

  取值:

  static:默认值

  fixed

  relative:relative紧跟着设置top和left,它会相较它之前的位置移动

  absolute:如果它一直找不到一个父类的position为非static,它会参照html整体的位置进行移动,如果找到会按照该父类进行移动

  例子:relatvie效果,可以看到div2的位置没有被div3取代,说明relative不是一个脱离操作,它只是按照它自己的位置相对移动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color:red;
height:30px;
width:50px;
}
#i2{
background-color:yellow;
height:30px;
width:50px;
position: relative;
left:100px;
top:100px;
}
#i3{
background-color:green;
height:70px;
width:200px;
}
</style>
</head>
<body>
<div id="i1">1111</div>
<div id="i2">222</div>
<div id="i3">333</div>
</body>
</html>

relative效果

  8、text-decoration(a标签下划线去除)

  text-decoration:none 去掉a标签下面的横向,但是a标签仍然有超链接功能

           underline 默认的,增加下划线

  9、vertical-align 这个属性在图片对应的标签上设置

    表示文本的垂直居中

    top:表示文本和图片头部保持水平

    bottom:表示文本和图片底部保持水平

    middle:表示文本与图片中部保持水平

    数字: 可以任意修改和图片的位置

 

上一篇:Spark基本架构


下一篇:POJ2127 LICS模板