web前端学习(三)css学习笔记部分(3)-- css常用操作

5.  CSS常用操作

5.1  对齐

  使用margin属性进行水平对齐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:300px;
height:100px;
margin:0px auto;
background-color: deeppink;
}
</style>
</head>
<body bgcolor="#8fbc8f">
<div> </div>
</body>
</html>

  使用position属性进行左右对齐

  使用float属性进行左右对齐

5.2  分类

5.2.1尺寸操作

属性 设置元素高度
height 设置元素高度
line-height 设置行高(字的大小不变,行高过小字会重叠)
max-height 设置元素最大高度
max-width 设置元素最大宽度(一行字最长不能超过这个数值,如果最后一个单词写不完就会被放到第二行)
min-width 设置元素最小宽度
min-height 设置元素最小高度
width 设置元素宽度(内容元素会自动换行)

5.2.2  分类操作:

属性 描述
clear 设置一个元素的侧面是否允许其他的浮动元素
cursor 规定当指向某元素之上时显示的指针类型
display

设置是否及如何显示元素

display:inline;(在一行里面显示)

float 定义元素在哪个方向浮动
position 把元素放置到一个静态的、相对的、绝对的,固定的位置
visibility

设置元素是否可见或不可见

visibility:hidden;(设置元素不可见)

5.3  导航栏

5.3.1垂直导航栏

关键在于将li设置为水平块级元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
ul{
list-style-type: none;
margin:0px;
padding:0px;
}
a{
display:block;
}
a:link,a:visited{
text-decoration: none;
/*display:block;*//*在这里写这一句也可以,在上面写也可以,不过个人感觉最好还是在上面写*/
/*将链接标签元素展示为块级元素,此类元素前后会带有换行符,自占一行*/
/*<a>是内联元素 必须设置成块级元素block 才能有width和height
不过你可以又定义display:block再定义成display:inline*/
background-color: burlywood;
color:aliceblue;
width:80px;
text-align: center;
}
a:hover,a:active{
background-color: crimson;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">列表1</a></li>
<li><a href="#">列表2</a></li>
<li><a href="#">列表3</a></li>
<li><a href="#">列表4</a></li>
</ul>
</div>
</body>
</html>

5.3.2水平导航栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
ul{
list-style-type: none;
margin:0px;
padding:0px;
}
a{
/*display:inline;*/ }
a:link,a:visited{
text-decoration: none;
/*display:block;*//*在这里写这一句也可以,在上面写也可以,不过个人感觉最好还是在上面写*/
/*将链接标签元素展示为块级元素,此类元素前后会带有换行符,自占一行*/
/*<a>是内联元素 必须设置成块级元素block 才能有width和height
不过你可以又定义display:block再定义成display:inline*/
background-color: burlywood;
color:aliceblue;
width:50px;
height:50px;
padding: 10px 10px;
margin:10px;
/*内联元素的margin不能修改他的上下margin元素的大小,只能修改左右margin,
而padding的上下左右都可以*/
/*通过设置内联元素的padding可以设置内联元素的大小*/
text-align: center;
}
a:hover,a:active{
background-color: crimson;
}
li{
display:inline;
/*内联元素是不能设置宽高的,只能通过修改padding
(padding属于border内部的所以颜色可以跟着改变)和margin来改变
内联元素的视觉大小,*/ /*padding:10px 10px 10px;这一句无效*/ }
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">列表1</a></li>
<li><a href="#">列表222222</a></li>
<li><a href="#">列表3</a></li>
<li><a href="#">列表4</a></li>
</ul>
</div>
</body>
</html>

关于替换元素的相关知识

先提供一个转载链接,关于替换元素和非替换元素知识的

https://segmentfault.com/q/1010000000694623

第二个转载链接同样是关于替换元素和非替换元素的

https://www.cnblogs.com/mmlvj/p/4580502.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换元素</title>
<style>
#divwai{
height:20px;
background-color: aliceblue;
}
#divnei{
height:30px;
background-color: deeppink;
}
#tuwai{
/*height:30px;*/
}
#tu{
height:40px;
/*实践证明,在父元素行高大小已经固定的情况下,
子元素比父元素大的情况并不会撑开父元素。*/
/*padding:30px auto;*/
/*图片标签属性padding不能设置为auto*/
padding: 30px 30px;
/*图片标签可以设置padding属性,padding元素占据的大小*/
/*可以在父元素中占据大小*/
margin:30px auto;
/*图片标签可以设置margin属性,margin元素占据的大小*/
/*可以在父元素中占据大小*/
}
</style>
</head>
<body>
<div id="divwai">
<div id="divnei"> </div>
</div>
<div id="tuwai">
<img src="bg.jpg" alt="图" id="tu">
</div>
<div style="padding:50px;" style="color: rgb(0, 0, 255);">></div>
<div><span style="padding:30px;" style="color: rgb(0, 0, 255);">>
我是行内元素span
</span>
</div>
<!--span元素的padding居然不会撑开自己让自己的边界与其他元素隔开。。。
在与其他元素隔开的时候还是只算原来的字占的大小-->
</body>
</html>

5.3.3导航栏效果

如上面代码。

5.4  图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>imagetest</title>
<style>
body{
margin:10px auto;
width:70%;
height:auto;
background-color: burlywood;
}
.image{
border:0px solid darkgray;
/*此处的边界容易造成布局上的问题,
如果仍要坚持使用的话最好是将这个img包含在一个比他还要大的div中*/
width:25%;
height:auto;
float:left;
/*display:inline;*/
test-align:center;
margin:5px 0px;
}
img{
width:200px;
height:200px;
margin:5px;
opacity: 0.5;
/*opacity用来调整透盒子明度*/
}
.text{
font-size:12px;
margin-bottom:5px;
}
.container{
width:100%;
/*height:auto;*/
/*width:auto;*/
/*margin:auto auto;*/
}
</style>
<!--在设计图片每行多少个的时候,需要学习其他音乐网站的写法,
这里有很多种处理方式,像每行规定好多少个,每一个放在一个div中
具体样式在div中进行处理,间隔用div内部的div的margin进行处理
这是一种处理方式,另外一种就是提前规划好每个图片div的大小,调整其大小
-->
</head>
<body>
<div class="container">
<div class="image">
<a href="#" target="_self">
<img src="bg.jpg" alt="风景"/>
</a>
</div>
<div class="image">
<a href="#" target="_self">
<img src="bg.jpg" alt="风景"/>
</a>
</div>
<div class="image">
<a href="#" target="_self">
<img src="bg.jpg" alt="风景"/>
</a>
</div>
<div class="image">
<a href="#" target="_self">
<img src="bg.jpg" alt="风景"/>
</a>
</div>
<div class="image">
<a href="#" target="_self">
<img src="bg.jpg" alt="风景"/>
</a>
</div>
<div class="image">
<a href="#" target="_self">
<img src="bg.jpg" alt="风景"/>
</a>
</div>
<div class="image">
<a href="#" target="_self">
<img src="bg.jpg" alt="风景"/>
</a>
</div>
<div class="image">
<a href="#" target="_self">
<img src="bg.jpg" alt="风景"/>
</a>
</div>
<div class="image">
<a href="#" target="_self">
<img src="bg.jpg" alt="风景"/>
</a>
</div>
<div style="clear:both">
<!--通过添加这一个clear:both;-->
<!--这个属性设置可以让父元素里面有float元素把父元素撑起来-->
</div>
</div>
</body>
</html>
上一篇:【Android】android图片轮播


下一篇:spring 注入一个以枚举类型对象