您的位置：首页 > Web前端 > CSS

前端基础快速学习-CSS（2）

2017-03-29 00:00 651 查看
继续CSS的常见使用。

例1. 输出一个购物车效果的text对话框

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
<!DOCTYPE html>

<
html
lang
=
"en"
>

<
head
>

<
meta
 
charset
=
"UTF-8"
>

<
title
></
title
>

<
style
>

.inp{

border: 0;

border-left: 1px solid #dddddd;

border-right: 1px solid #dddddd;

height: 25px;

margin: 0;

padding: 0;

float: left;

}

.sp{

display: inline-block;

height: 25px;

width: 25px;

text-align: center;

line-height: 25px;

float: left;

}

</
style
>

</
head
>

<
body
>

<
div
 
style
=
"border: 1px solid #dddddd;display: inline-block;"
>

<
div
 
class
=
"sp"
>-</
div
>

<
input
 
class
=
"inp"
 
type
=
"text"
 
/>

<
div
 
class
=
"sp"
>+</
div
>

</
div
>

</
body
>

</
html
>

1
<br>





例2 如果图片挂了，可以通过<alt>自动用文字显示内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>

<
html
 
lang
=
"en"
>

<
head
>

<
meta
 
charset
=
"UTF-8"
>

<
title
></
title
>

<
style
>

img{

border: 0;

}

</
style
>

</
head
>

<
body
>

<
div
>

<
div
 
class
=
"item"
>

<
a
 
href
=
"http://www.etiantian.org"
>

<
img
 
src
=
"2.jp"
 
alt
=
"图片"
>

</
a
>

</
div
>

</
div
>

</
body
>

</
html
>

效果图





例3 设置input标签的默认值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>

<
html
 
lang
=
"en"
>

<
head
>

<
meta
 
charset
=
"UTF-8"
>

<
title
></
title
>

</
head
>

<
body
>

<
textarea
>123</
textarea
>

<
input
 
type
=
"text"
 
value
=
"222"
/>

<
select
>

<
option
>上海</
option
>

<
option
 
selected
=
"selected"
>广州</
option
>

<
option
>北京</
option
>

</
select
>

男：<
input
 
type
=
"radio"
 
name
=
"g1"
  
/>

女：<
input
 
type
=
"radio"
 
name
=
"g1"
 
checked
=
"checked"
/>

<
input
 
type
=
"checkbox"
 
name
=
"c1"
 
checked
=
"checked"
 
/>

<
input
 
type
=
"checkbox"
 
name
=
"c1"
  
/>

<
input
 
type
=
"checkbox"
 
name
=
"c1"
  
checked
=
"checked"
/>

<
input
 
type
=
"checkbox"
 
name
=
"c1"
 
/>

</
body
>

</
html
>





例4 !important 强制覆盖, 当冲突时，以!important的设置为准

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>

<
html
 
lang
=
"en"
>

<
head
>

<
meta
 
charset
=
"UTF-8"
>

<
title
></
title
>

<
style
>

.hide{

display: none !important;

}

.c1{

color: red !important;

}

.c2{

color: green;

}

</
style
>

</
head
>

<
body
>

<
div
 
class
=
"c1 c2"
>red</
div
>

</
body
>

</
html
>





例5 class选择器还可以进一步根据属性选择，比如只有class='c1',alex='a'的标签才是红色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>

<
html
 
lang
=
"en"
>

<
head
>

<
meta
 
charset
=
"UTF-8"
>

<
title
></
title
>

<
style
>

.c1[alex='a']{

color: red;

}

</
style
>

</
head
>

<
body
>

<
div
>

<
div
 
class
=
"c1"
 
alex
=
"a"
>1</
div
>

<
div
 
class
=
"c1"
 
alex
=
"b"
>2</
div
>

<
div
 
class
=
"c1"
>3</
div
>

<
div
 
class
=
"c1"
 
alex
=
"a"
>4</
div
>

</
div
>

</
body
>

</
html
>





例6 当一个标签使用fixed的时候，他会和没有使用的重叠在一起，因此在.pg-body里面指定了margin-top 48px (第一个标签的高度）以便隔开

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
>

.pg-header{

position: fixed;

top: 0;

left: 0;

right: 0;

height: 48px;

background-color: #2459a2;

}

.pg-body{

height: 2000px;

margin-top: 48px;

}

</
style
>

</
head
>

<
body
>

<
div
 
class
=
"pg-header"
>header</
div
>

<
div
 
class
=
"pg-body"
>body</
div
>

</
body
>

</
html
>





例7 利用外部relative，内部absolute的特性在input后面加个小图标

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
<!DOCTYPE html>

<
html
 
lang
=
"en"
>

<
head
>

<
meta
 
charset
=
"UTF-8"
>

<
title
></
title
>

<
style
>

.icon-name{

background-image: url('i_name.jpg');

height: 16px;

width: 16px;

display: inline-block;

}

.icon-pwd{

background-image: url('i_pwd.jpg');

height: 16px;

width: 16px;

display: inline-block;

}

</
style
>

</
head
>

<
body
>

<
div
 
style
=
"width: 200px;position: relative"
>


<
input
 
style
=
"width: 180px;padding-right: 20px;"
 
/>

<
span
 
class
=
"icon-name"
 
style
=
"position: absolute;top:2px;right: 0;"
></
span
>

</
div
>

<
div
 
style
=
"width: 200px;position: relative"
>

<
input
 
style
=
"width: 180px;padding-right: 20px;"
 
/>

<
span
 
class
=
"icon-pwd"
 
style
=
"position: absolute;top:2px;right: 0;"
></
span
>

</
div
>

</
body
>

</
html
>





例8 after和 before的使用

当我们使用hover,after或者before的时候，当选择了对应的class，他会自动应用；一个常见场景是外部的div没有float，而内部的div有float，导致外部不能撑开，这个时候可以考虑在后面加个隐形的点，然后设置clear：both来取消漂浮

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
<!DOCTYPE html>

<
html
 
lang
=
"en"
>

<
head
>

<
meta
 
charset
=
"UTF-8"
>

<
title
></
title
>

<
style
>

.c1:hover{

background-color: #2459a2;

}

.c2:before{

content: '666';

}

.c2:after {

content: '777';

}

.left{

float: left;

}

.item{

background-color: red;

}

.clearfix:after{

content: '.';

clear: both;

display: block;

visibility: hidden;

height: 0;

}

</
style
>

</
head
>

<
body
>

<
div
 
class
=
"c1"
>ddd</
div
>

<
div
 
class
=
"c2"
>888</
div
>

<
div
 
style
=
"background-color: red"
 
class
=
"clearfix"
>

<
div
 
class
=
"left"
 
style
=
"height: 100px;background-color: green"
>1</
div
>

<
div
 
class
=
"left"
>2</
div
>

</
div
>

</
body
>

</
html
>





如果不使用clearfix，那么外层的div其实被绿色部分撑住了，不会包括2；可以在F12下面选中div查看范围来确认





列9 巧妙的设置小三角，注意inline-block的使用，把块级标签当做内联标签使用，同时又能设置高度

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
>

<
style
>

.icon{

display: inline-block;

border-top: 15px solid green;

border-right: 15px solid red;

border-bottom: 15px solid transparent;

border-left: 15px solid transparent;

}

</
style
>

</
head
>

<
body
>

<
div
 
class
=
"icon"
></
div
>

</
body
>

</
html
>









登录乐搏学院官网http://www.learnbo.com/

或关注我们的官方微博微信，还有更多惊喜哦~


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航