备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

CSS基础和实例（上）

2017-11-21 926
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

上一篇简单的过了一遍HTML的常用标签，这一篇继续CSS。


例1 CSS的标签选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title ></ title >
     <!--<link rel="stylesheet" href="common.css" />-->
     < style >
         /*标签选择器，找到所有的标签应用以下样式*/
         div{
             color: green;
         }
         /*id选择器，找到标签id等于i1的标签，应用以下样式*/
         #i1{
             font-size: 56px;
             /* color: green; */
         }
         /*class选择器，找到class=c1的所有标签，应用一下样式*/
         .c1{
             background-color: red;
         }
         /*层级选择器，找到 class=c2 下的div下的p下的class=c3标签，应用以下样式*/
         /*.c2 div p a{*/
             /**/
         /*}*/
         .c2 div p .c3{
             background-color: red;
         }
         /*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/
         .c4,.c5,.c6{
             background-color: aqua;
         }
     </ style >
</ head >
< body >
     < div  class = "c4" >1</ div >
     < div  class = "c5" >1</ div >
     < div  class = "c6" >1</ div >
     < div  class = "c2" >
         < div ></ div >
         < div >
             < p >
                 < span >oo</ span >
                 < a  class = "c3" >uu</ a >
             </ p >
         </ div >
     </ div >
     < div  class = "c3" >sdfsdf</ div >
     < span  class = "c1" >1</ span >
     < div  class = "c1" >2</ div >
     < a  class = "c1" >3</ a >
     < a  id = "i1" >baidu</ a >
     < div >99</ div >
     < div >99</ div >
     < div >99</ div >
     < div >
         < div >asdf</ div >
     </ div >
</ body >
</ html >

wKiom1h8RRyCXX3UAABNaKzRGic339.jpg



例2 加载CSS文件

创建一个css文件，把style内容写进去


wKiom1h8Rh2CXKFsAAA-8YQninU309.jpg

wKiom1h8Rh2C82DDAABWyYdP9V0514.jpg

在html文件里面导入这个css文件，效果和直接写是一样的

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title ></ title >
     < link  rel = "stylesheet"  href = "common.css"  />
</ head >
< body >
     < div >asdfasdfsdf</ div >
</ body >
</ html >



wKioL1h8Rh6Dr-GFAABaTRlCRns386.jpg


例3 float的使用

如果不用float，那么因为<div>是块级标签，他会自动变成两行,使用float之后，漂浮起来变成一行，具体的理解是，css是分层级的，一个是标准层，一个是浮动层；他float之后就漂浮到标准标签的外面的一层了（浮动层），那么这个float的标签后面的标签，如果没有float的话，会自动往上跑（标准层），这样的结果有可能导致浮动的标签遮挡了后面没有浮动的标签。同时这个float的标签如果他的上面是一个标准的标签，他会自动紧贴上面；如果他的上面是一个浮动的，他会跟着浮动到同一行，如果塞不下才会跑到下面一行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title ></ title >
     < style >
         .c1{
             color: red;
             /*background-color: #FF69B4;*/
             /*background-color: rgb(25,180,10);*/
             /*background-color: red;*/
             font-size: 32px;
             height: 150px;
             width: 500px; /* 按照父亲相对占比*/
         }
     </ style >
</ head >
< body >
     < div  class = "c1" >test1</ div >
     < div  style = "width: 500px;" >
         < div  style = "width: 20%;background-color: antiquewhite;float: left" >test2</ div >
         < div  style = "width: 80%;background-color: palegoldenrod;float: left" >test3</ div >
     </ div >
</ body >
</ html >


wKioL1h8Ryvgcy3QAABLvgJjCxo039.jpg


例4. 加载背景图片

使用背景图片的时候需要指定高度，宽带；一个使用技巧是通过Chrome的F12，可以滚轮编辑数字像素


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title ></ title >
     < style >
         .img{
             background-image: url("4.gif");
             height: 200px;
             width: 400px;
             background-repeat: no-repeat;
         }
         .img2{
             background-image: url("2.jpg");
             height: 50px;
             width: 50px;
             background-position: 84px -58px;
         }
     </ style >
</ head >
< body >
     < div  class = "img" ></ div >
     < div  class = "img2" ></ div >
</ body >
</ html >

wKioL1h8TRGCEkL9AAA7XSBZNNI855.jpg

wKiom1h8TRKxAW4oAACCr3RVlS0455.jpg



列5 边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body >
     < div  style = "height: 70px;border: 1px solid blue;" >
         < div  style = "height: 30px;background-color: green;" ></ div >
     </ div >
     < div  style = "height: 100px;background-color: #ddd;border: 1px solid red;" >
         < div  style = "margin-top: 30px;margin-left: 100px;" >
             < input  />
             < input  />
             < input  />
         </ div >
     </ div >
</ body >
</ html >


注意那三个input距离上边和左边的距离

wKiom1h8VPuA5C6rAABgC12BgbA066.jpg


列6 clear的使用

clear可以禁止float, 默认一个float的标签后面跟着的标签会跟着float起来，可以指定clear来控制是否漂浮

这里有一个很不错的文章解释了float和clear的使用

前面已经说了

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。如果使用了clear，那么在float那一层里面 他会把横向排列的div再变成纵向的，但是不影响标准层的排列

http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html


例如；红色

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title >Title</ title >
</ head >
< body >
< div  style = "height: 200px; width:100px; border: 1px solid ; background-color: red;" ></ div >
< div  style = "height: 60px; width: 80px; border: 1px solid ; background-color: black; float:left" ></ div >
< div  style = "height: 90px; width:500px;border: 1px solid ; background-color: blue;float:left;clear: left" ></ div >
< div  style = "height: 90px; width:500px;border: 1px solid ; background-color: yellow;" ></ div >
</ body >
</ html >

wKioL1lBzgCyZRPGAABfTsVFP84536.jpg



例7 position的使用 首先看fixed的使用，固定标签在屏幕的某个位置，即使拖动滚轮 他也在那里不会动。fixed以后，效果和float类似，他就漂浮起来了（想象立体空间），这样导致他后面的div会自动往上跑，造成一部分遮挡。可以通过调整margin来正常显示

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body >
     < div  style = "height: 1000px;background-color: #ddd;" ></ div >
     < div  style = "position: fixed;right:200px;bottom: 100px;" >返回顶部</ div >
</ body >
</ html >

wKiom1h8WFWh7wx_AAA5IHb1ie8700.jpg


例8 position的使用场景2，外面使用relative，里面用absolute，这样的可以保证 111始终在父div的固定位置, 这个absolute的位置可以为正数，也可以为负数（跑出去边框）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body >
     < div  style = "height: 500px;width: 400px;border: 1px solid red;position: relative" >
         < div  style = "height: 200px;background-color: red;" >
             < div  style = "position: absolute;bottom: 0;right: 0;" >111</ div >
         </ div >
     </ div >
</ body >
</ html >

wKiom1h8WPSjrUuRAABKMbbA_So607.jpg


例9加载图片,和背景图使用类似，也需要指定高度和宽度

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body >
     < img  src = "2.jpg"  style = "height: 500px;width: 200px;" >
</ body >
</ html >


例10 一个模拟对话框的界面

  • display:none 隐藏标签

  • 如果希望实现弹出框一个居中的效果，可以指定top： 50%，left：50%，这样左上角就居中了，然后根据弹出框的尺寸，左移动一半，下移动一半

  • 如有多层，可以指定z-index来觉得谁在谁上面，z-index越大，这个div就越在上面


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title ></ title >
     < style >
         .hide {
             display: none;
         }
         .modal{
             width: 400px;
             height: 300px;
             background-color: #dddddd;
             position: fixed;
             top: 50%;
             left: 50%;
             margin-left: -200px;
             margin-top: -150px;
             z-index: 10;
         }
         .shadow{
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             /*background-color: black;*/
             /*opacity: 0.4;*/
             background-color: rgba(0,0,0,.6);
              z-index: 9;
         }
     </ style >
</ head >
< body >
     < input  type = "button"  value = "添加"  />
     < div  class = "shadow" ></ div >
     < div  class = "modal" >
         < input  type = "text" />
         < input  type = "text" />
         < input  type = "text" />
         < input  type = "text" />
     </ div >
     < div  style = "height: 2000px;" >
     </ div >
</ body >
</ html >

wKiom1h8Xa-gZboFAABdr67Zym8347.jpg

例11. 菜单高亮效果

布局一般分为三大块：header,body和foot

根据需求可以left float或者right float

cursor是鼠标放上去的效果

.w里面 margin：0 auto可以保证在拖曳浏览器大小的时候，整个页面始终居中显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title ></ title >
     < style >
         body{
             margin: 0;
         }
         ul{
             margin: 0;
             list-style-type: none;
         }
         ul li{
             float: left;
             padding: 0 8px 0 8px;
             color: white;
             cursor: pointer;
         }
         /*当鼠标移动到li标签上时，自动应用以下样式*/
         ul li:hover{
             background-color: blueviolet;
         }
         .pg-header{
             height: 44px;
             background-color: #2459a2;
             line-height: 44px;
         }
         .w{
             width: 980px;
             margin: 0 auto;
             background-color: red;
         }
     </ style >
</ head >
< body >
     < div  class = "pg-header" >
         < div  class = "w" >
             < ul >
                 < li >菜单一</ li >
                 < li >菜单二</ li >
                 < li >菜单三</ li >
                 < li >菜单三</ li >
                 < li >菜单三</ li >
                 < li >菜单三</ li >
                 < li >菜单三</ li >
                 < li >菜单三</ li >
             </ ul >
         </ div >
     </ div >
     < div  class = "pg-body" ></ div >
     < div  class = "pg-footer" ></ div >
</ body >
</ html >

wKioL1h8XiCQfFKVAAA5WUJ8p3Y073.jpg






本文转自 beanxyz 51CTO博客，原文链接：http://blog.51cto.com/beanxyz/1892249，如需转载请自行联系原作者

文章标签：
前端开发
Web App开发
关键词：
CSS实例
CSS基础
CSS基础实例
余二五
目录
相关文章
1024小神
|
1月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
1024小神
17 0
极客小俊
|
7月前
|
JavaScript 前端开发 开发者
哈哈哈 原来使用jQuery+CSS就可以实现图片自动切换轮播效果是那么简单的事情 搞了个小米商城官网淡入淡出自动轮播图效果来看看也挺好玩的 附上实例完整代码
使用jQuery+CSS实现图片自动切换轮播效果
极客小俊
98 0
哈哈哈 原来使用jQuery+CSS就可以实现图片自动切换轮播效果是那么简单的事情 搞了个小米商城官网淡入淡出自动轮播图效果来看看也挺好玩的 附上实例完整代码
&amp;ACE&amp;
|
4月前
|
前端开发 容器
CSS BFC是什么，应用实例
CSS BFC是什么，应用实例
&amp;ACE&amp;
24 0
热烈的马
|
4月前
|
移动开发 前端开发 HTML5
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例（超详细必看 附源码）
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例（超详细必看 附源码）
热烈的马
53 0
camellia。
|
4月前
|
XML 前端开发 小程序
css实例（一）鼠标hover下拉菜单
红框标注位置，有一个小尖尖角，这个使用样式是这样实现的。 css 复制代码
camellia。
55 0
豆约翰
|
11月前
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
豆约翰
164 0
豆约翰
|
11月前
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局（下）
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局（下）
豆约翰
167 0
豆约翰
|
11月前
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局（上）
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局
豆约翰
17588 10
豆约翰
|
11月前
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型（下）
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型（下）
豆约翰
167 0
豆约翰
|
11月前
|
Web App开发 前端开发 开发者
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型（上）
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型
豆约翰
232 0

热门文章

最新文章

  • 1
    《手把手教你》系列技巧篇（十八）-java+ selenium自动化测试-元素定位大法之By css中卷（详细教程）
  • 2
    【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
  • 3
    《手把手教你》系列技巧篇（十七）-java+ selenium自动化测试-元素定位大法之By css上卷（详细教程）
  • 4
    前端代码整洁与规范之CSS篇
  • 5
    《手把手教你》系列技巧篇（十九）-java+ selenium自动化测试-元素定位大法之By css下卷（详细教程）
  • 6
    Tailwind CSS如何在vue项目中使用
  • 7
    【掰开揉碎】详解 CSS3 Grid 布局
  • 8
    【前端设计】HTML+CSS+JavaScript基本特性
  • 9
    CSS 中BFC是什么？
  • 10
    解密CSS单位：px、em、vh的区别与应用
  • 1
    CSS字型
    23
  • 2
    css元素
    13
  • 3
    如何使用代理IP通过HTML和CSS采集数据
    12
  • 4
    《CSS 简易速速上手小册》第6章：高级 CSS 技巧（2024 最新版）
    15
  • 5
    CSS cursor的一些相关属性
    12
  • 6
    css怎样设置下滑线？
    10
  • 7
    css中几种隐藏元素的方法
    10
  • 8
    js实用方法记录-动态加载css/js
    12
  • 9
    【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
    43
  • 10
    【CSS进阶】巧用伪元素before和after制作绚丽效果（下）
    11

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • HTML5 新特性教程

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 现代Javascript高级教程
  • 低代码开发师（初级）实战教程

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • CSS基础教程
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）