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换行显示.
jsp学习---css基础知识学习,float,position,padding,div,margin的更多相关文章
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- CSS基础知识之float
前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...
- CSS学习---css基础知识0105
CSS, Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 举例:颜色,大小,高度.宽度.内外边距.边框.浮动.定位.字 ...
- CSS基础知识学习笔记
1.css基本样式讲解 1.1 css背景background-attachment:背景图像是否固定或者随着页面的其余部分滚动background-color:设置元素的背景颜色background ...
- python之 前端HTML/CSS基础知识学习笔记
1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </ht ...
- 前端学习——css基础知识，选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
- c++学习day01基础知识学习
一.代码示例解析: #include <iostream> int main() { using namespace std; cout << "come up an ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- Web学习篇之---css基础知识（一）
css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...
随机推荐
- Joint Deep Learning for Pedestrian Detection笔记
1.结构图 Introduction Feature extraction, deformation handling, occlusion handling, and classification ...
- python---list列表
Python 列表(List) 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型 ...
- [zz]Lessons from Pixar: Why Software Developers Should Be Storytellers
http://firstround.com/article/lessons-from-pixar-why-software-developers-should-be-story-tellers Whe ...
- activiti自定义流程之整合（七）：完成我的申请任务
在上一篇的获得我的申请中,可以看到js代码中还包含了预览和完成任务的代码,既然上一篇已经罗列了相关代码,这里也就不重复. 那么需要补充的是,在上边的完成任务的js代码中,我们还调用了getTaskFo ...
- java io流 创建文件、写入数据、设置输出位置
java io流 创建文件 写入数据 改变system.out.print的输出位置 //创建文件 //写入数据 //改变system.out.print的输出位置 import java.io.*; ...
- Java 开发必会的 Linux 命令
作为一个Java开发人员,有些常用的Linux命令必须掌握.即时平时开发过程中不使用Linux(Unix)或者mac系统,也需要熟练掌握Linux命令.因为很多服务器上都是Linux系统.所以,要和服 ...
- logstash 因为jdk版本不对造成索引时间戳失败
版本 logstash 1.5.0 RC2 JDK 1.7.15 Logstash推荐使用JDK 1.7.75 每次启动都是会有部分的数据无法替换日志中的时间戳,导致日志时间戳被认定为当前读取时间. ...
- C++使用VARIANT实现二维数组的操作
C++使用VARIANT实现二维数组的操作 VARIANT变量是COM组件之间互相通信的重要的参数变量之一,它可以容纳多种不同的类型,如short.long.double等,包括各类指针和数组.组件之 ...
- Python复习笔记-字典和文件操作
抽时间回顾2年前自己做过的python工具,突然感觉不像自己写的,看来好久没用过python的字典和文件操作了,查询资料和网页,整理如下: 一.字典 键值对的集合(map) 字典是以大括号“{}”包围 ...
- 关于oracle中to_char和to_date的用法
一.24小时的形式显示出来要用HH24 select to_char(sysdate,'yyyy-MM-dd HH24:mi:ss') from dual; select to_date('200 ...