zoukankan      html  css  js  c++  java
  • 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换行显示.

  • 相关阅读:
    PAT 甲级 1051 Pop Sequence (25 分)(模拟栈,较简单)
    PAT 甲级 1050 String Subtraction (20 分) (简单送分,getline(cin,s)的使用)
    PAT 甲级 1049 Counting Ones (30 分)(找规律,较难,想到了一点但没有深入考虑嫌麻烦)***...
    PAT 甲级 1048 Find Coins (25 分)(较简单,开个数组记录一下即可)
    PAT 甲级 1047 Student List for Course (25 分)(cout超时,string scanf printf注意点,字符串哈希反哈希)...
    PAT 甲级 1046 Shortest Distance (20 分)(前缀和,想了一会儿)
    R语言实现金融数据的时间序列分析及建模
    ES6 | class类的基本语法总结
    less使用总结
    umi 的项目中如何修改 favicon
  • 原文地址:https://www.cnblogs.com/amosli/p/3634959.html
Copyright © 2011-2022 走看看