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

jsp学习---css基础知识学习,float,position,padding,div,margin的更多相关文章

  1. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  2. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  3. CSS学习---css基础知识0105

    CSS, Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 举例:颜色,大小,高度.宽度.内外边距.边框.浮动.定位.字 ...

  4. CSS基础知识学习笔记

    1.css基本样式讲解 1.1 css背景background-attachment:背景图像是否固定或者随着页面的其余部分滚动background-color:设置元素的背景颜色background ...

  5. python之 前端HTML/CSS基础知识学习笔记

    1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </ht ...

  6. 前端学习——css基础知识，选择器与html模板、值得收藏的html标签

    一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...

  7. c++学习day01基础知识学习

    一.代码示例解析: #include <iostream> int main() { using namespace std; cout << "come up an ...

  8. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  9. Web学习篇之---css基础知识（一）

    css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...

随机推荐

  1. centos-系统语言检查设置安装

    查看当前系统语言 登陆linux系统打开操作终端之后,输入 echo $LANG可以查看当前使用的系统语言. 查看安装的语言包 查看是否有中文语言包可以在终端输入 locale命令,如有zh cn 表 ...

  2. urllib2.open(req).read() 报403的错误：怎么办？

    http://www.douban.com/group/topic/18095751/ heads = {'Accept':'text/html,application/xhtml+xml,appli ...

  3. C++模板类的使用

    1.定义模板类 通过类似于下面的语法可以定义一个模板类: template<typename T> class Job : public virtual RefBase { public: ...

  4. linux网络环境下socket套接字编程（UDP文件传输）

    今天我们来介绍一下在linux网络环境下使用socket套接字实现两个进程下文件的上传,下载,和退出操作! 在socket套接字编程中,我们当然可以基于TCP的传输协议来进行传输,但是在文件的传输中, ...

  5. Spring学习 Ioc篇（一 ）

    一直以来忙于项目的开发,Spring虽然不用,一直想系统地学习一下,想看看它的源码,都没有时间,这段时间比较充裕,就索性先把Spring学习下,熟悉各个功能再去探究它内部的实现.就从Ioc篇开始学习. ...

  6. C# 形参中有默认值

    形参有默认值,表是该参数可以传,可以不传. 例如: private void button2_Click(object sender, EventArgs e) { textBox2.Text += ...

  7. [Tex学习笔记]矩阵输入中的省略号

    \usepackage{enumerate,mathdots} $\iddots$

  8. sql语句，怎么查看一个表中的所有约束

    sql语句,怎么查看一个表中的所有约束,比如,一个student表,有唯一,外键,主键,用sql语句怎么查看student表中的所有约束呢? select * from sysobjects wher ...

  9. eclipse 工程默认编码修改 JSP编码修改

    1. Window->Preferences->General->Workspace->Text file encoding 将其改为UFT-8  新建的文件即为UTF-8编码 ...

  10. I2C控制器的Verilog建模之二

    前言:接着上一篇的I2C写操作,今天要实现一个I2C的读操作.虽然在ADV7181B配置内部寄存器时没有必要使用到读操作,但是为了进一步确认寄存器是否在I2C写模块下被正确配置,这一步是必不可少的. ...