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换行显示.

  • 相关阅读:
    【设计】B端图表设计
    用 SpringBoot,亲自打造一个在线题库系统
    玩点创意编程,发现另一个世界
    Spring Security 基本介绍,初窥路径
    一个课程,11个项目!爬虫初体验,快来!
    黑三兵后现缓涨很危险 出现急涨有转机
    JavaScript对象之get/set方法
    ES6-ES11新特性
    js常见设计模式
    再谈promise
  • 原文地址:https://www.cnblogs.com/amosli/p/3634959.html
Copyright © 2011-2022 走看看