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>
web前端学习（三）css学习笔记部分（3）-- css常用操作的更多相关文章
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么？
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- Web前端开发最佳实践（9）：CSS代码太太乱，重复代码太多？你需要精简CSS代码
前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...
- 新手学习Web前端的三个高效学习方法，基础要重视
作为新手,出于对风险的担心,不免在学习一项新技能或者转投一个新行业的时候,有所犹豫与徘徊.毕竟,在这场类似冒险的选择中,我们需要投入时间.精力以及承受相关的经济损失.但是,只有勇敢迈出第一步,才能为生 ...
- web前端开发控件学习笔记之jqgrid+ztree+echarts
版权声明:本文为博主原创文章,转载请注明出处. 作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...
- 2022年Web前端开发流程和学习路线（详尽版）
前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...
- web前端零基础入门学习！前端真不难！
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
- 最适合2018年自学的web前端零基础系统学习视频＋资料
这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...
- 史上最全的web前端开发程序员学习清单！
今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我回答过无数次这种问题了,但是问这个的还是有 ...
随机推荐
- JEECMS 自定义标签
CMS 是”Content Management System” 的缩写,意为” 内容管理系统”. 内容管理系统是企业信息化建设和电子政务的新宠,也是一个相对较新的市场.对于内容管理,业界还没有一个统 ...
- 【转载】Python eval
转载 作者博文地址:https://www.cnblogs.com/liu-shuai/ eval 功能:将字符串str当成有效的表达式来求值并返回计算结果. 语法: eval(source[, gl ...
- <每日一题>题目13：列表的简单问题
''' 分析: python赋值是通过指针来进行的. 很显然第一.三.四次调用都指向同一个列表,并未完成清空, 第二次调用只是指向了另一个列表,也未完成清空,很显然结果是累计的 结果: [0, 1] ...
- Android 开发 屏幕常亮的3个方法
第一种 xml文件中的顶层布局添加属性: android:keepScreenOn="true" 第二种 在Window设置flag: getWindow().addFlags(W ...
- 廖雪峰Java9正则表达式-2正则表达式进阶-5非贪婪匹配
1.贪婪匹配 问题:给定一个字符串表示的数字,判断该数字末尾0的个数? "123000": 3个0 "10100": 2个0 "1001": ...
- 如何使用Tunnel SDK上传/下载MaxCompute复杂类型数据
基于Tunnel SDK如何上传复杂类型数据到MaxCompute?首先介绍一下MaxCompute复杂数据类型: 复杂数据类型 MaxCompute采用基于ODPS2.0的SQL引擎,丰富了对复杂数 ...
- bzoj1706 relays 奶牛接力跑 线性代数
题目描述 FJ的N(2 <= N <= 1,000,000)头奶牛选择了接力跑作为她们的日常锻炼项目.至于进行接力跑的地点 自然是在牧场中现有的T(2 <= T <= 100) ...
- 升级gitk后，Error in startup script: unknown color name "lime"
$ gitkError in startup script: unknown color name "greeen" (processing "-fore" o ...
- dubbo入门学习(二)-----dubbo hello world
一.dubbo hello world入门示例 1.提出需求 某个电商系统,订单服务需要调用用户服务获取某个用户的所有地址: 我们现在需要创建两个服务模块进行测试: 模块 功能 订单服务web模块 创 ...
- 写一个网页进度loading
作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...