jsp学习---css基础知识学习,float,position,padding,div,margin

1.常用页面布局

效果图:

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
    body{
        margin: 0px;
        /* margin: 0px; 网页内容距离浏览器上下左右的距离都是0像素*/
        /* margin: 5px 10px; 网页内容距离浏览器上下的距离为5,左右的距离都是10像素*/
        /* margin: 0px 5px 10px; 网页内容距离浏览器上为0,下为10,左右的距离都是5像素*/
        /* margin: 0px 1px 2px 3px; 网页内容距离浏览器上右下左(顺时针)分别为0,1,2,3像素*/
        padding:10px;
        /*页面边距为10像素*/
        font-size: 12px;
        /*最常用的字体大小为12像素,小一点为9像素,大一点为14像素*/
        color:red;
        /*设置页面字体颜色*/
        background-color: #ffffee;
        /*页面背景颜色*/
        overflow: hidden;
        /*去掉页面的滚动条*/
    }
</style>
</head>
<body>
    css常用布局<p>
    css常用布局<p>
    css常用布局<p>
    css常用布局<p>
    css常用布局<p>
    css常用布局<p>
</body>
</html>

2.div照片布局

效果图:

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    #img{
        position: realtive;
        background-image: url("../img/beauty.jpg");
        width: 750px;
        height: 1125px;
    }
    #name{
        position: absolute;
        left:111px;
        top: 30px;
    }
</style>

</head>
<body>
    <div id="img">
        <div id="name">足球宝贝!</div>    
    </div>
</body>

这里name是img的孩子,用的position是的绝对位置,但img是相对位置,所以这里将文字显示到了图片上面.

3.div float 和postion

效果图:

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style type="text/css">
    body {
    background-color: #ff33ee;
    }
    #father{
    border:1px;
    }
    #son1{
    position: relative;
    right: -30%;
    }
/*     #son1{
    position: absolute;
    right: 10px;
    } */
</style>

</head>
<body>
    <div id="father">
        <div id="son1">aaa</div>
        <div id="son2">bbb</div>
        <div id="son3">ccc</div>
    </div>
</body>
</html>

注:布局分为相对布局和绝对布局,相对布局实质上还是会占用空间,占用原有一行.绝对布局则是直接替换掉其中一行.

float布局:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style type="text/css">
    body {
        background-color:#ff33ee;
    }
    #father{
        border:1px;
    }
    #son1{
        float:left;
    }
    #son2{
        float:left;
    }
    #son3{
        float:left;
    }
    #clear{
        clear: both;
    }
</style>


</head>
<body>
    <div id="father">
        <div id="son1">aaa</div>
        <div id="son2">bbb</div>
        <div id="son3">ccc</div>
        <div id="clear"></div>
        <div id="son4">ddd</div>
        
    </div>
</body>
</html>

注:div默认是行显示,float的作用是将原本在同一列的div显示到同一行.

这里定义clear是为了清除上面的浮动对后面son4的影响,让son4换行显示.

posted on 2014-03-31 01:14 Hi_Amos 阅读(1076) 评论(0) 编辑收藏举报