html学习笔记——ife task0001
花了两三天大概看完html和css基本用法，但到自己布局的时候还是很懵不知道从哪里入手啊，就找了个简单的任务（ife2015 spring）试一下。
之前不涉及到布局的跳过，从涉及到position和float的开始，这一块看的有点晕，结合下面的例子搞懂了。
例：用两种方法来实现一个背景色为红色、宽度为960px的<DIV>在浏览器中居中。我用了三种方法。代码如下：
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="task0001_css.css">
<title>task0001</title>
<style type="text/css">
a:link {text-decoration: none;}
a:visited {color: black;}
a.hover{text-decoration:underline;}
a:active {color:yellow;}
</style>
</head>
<body>
<h1> MyGitbubAccountName:SMQ</h1>
<ul>
<li>
<a href="https://github.com/baidu-ife/ife/tree/master/2015_spring/task/task0001"><span>homepage</span></a>
</li>
<li>
<a href="http://www.douban.com" target="_blank"><span>douban</span></a>
</ul>
<h2>这是二级标题</h2>
<p>这里有一个文字段落这里有一个文字段落
这里有一个文字段落这里有一个文字段落
</p>
<div class="box1">div1</div><br>
<div class="centerbox">
<div class="box2">div2</div>
</div><br>
<div class="box3">div3</div>
</body>
</html>
h1 {color: blue}
h2 {font-size: 14px}
p {
font-size: 20px;
color: #FFFF00;
background-color: gray;
text-indent: 50px;
text-decoration: blink underline;
text-transform: capitalize;
text-align:left;
word-spacing: 3px;
}
.box1{ background-color:red;
width: 960px;
position: relative; /*如果用absolute 换行符br就没用了*/
left:50%;
margin-left: -480px; /*画图看为什么可以这样，总结*/
}
.centerbox{
width: 960px;
position: relative;
left: 50%;
}
.box2 {
background-color:blue;
position: relative;
left: -50%;
}
.box3{
background-color:blue;
width: 960px;
margin: auto;
}
box1 box2 box3 分别对应三种实现方法。注意属性不能用数字开头，一开始我直接命名为123无效。
先说box1:使用position:relative对div元素相对定位，是相对于他本来的位置，即浏览器界面的最左端来说的，然后用left:50%将其左移50%，是相对整个浏览器界面的50%，然后再用margin-left: -480px把div移到中间位置。
box2:先设定一个往左移了50%的父元素，然后在子元素中使用left:-50%移到中间。
box3:使用margin:auto让浏览器自动设置外边距。
例：用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化
一种用浮动，一种用绝对定位实现。
/*用浮动实现：*/
.c1 {
float:left;
background-color:yellow;
width: 200px;
height: 300px;
}
.c2 {
background-color:blue;
width: 100%;
height: 300px;
}
.c3{
clear:both;
background-color:green;
height: 50px;
}
/*用绝对定位实现*/
#c{
position:relative;
}
.c1{
position:absolute;
background:yellow;
width: 200px;
height:300px;
top:;
left:;
}
.c2{
background:blue;
margin-left: 200px; /*两列布局只需要一个absolute??
没有position时不能用width=100%会出错*/
height:300px;
}
.c3{
position: absolute;
width:100%;
background: green;
top: 300px;
height:50px;
}
还有用flex实现：
<!DOCTYPE html>
<html lang="zh-EN">
<head>
<meta charset="UTF-8">
<title>first</title>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<!--<div id="center1">背景红色，宽度960px</div>
<div id="center2">背景红色，宽度960px</div>-->
<div id="wrap1">
<div class="a1">diva</div>
<div class="b1">divb</div>
</div>
<div id="wrap2">
<div class="c1">divc</div>
</div> </body>
</html>
#wrap1 {
display: flex;
flex-direction: row;
}
.a1 {
background-color: red;
display: flex;
flex: 0 1 300px;
}
.b1 {
background-color: blue;
display: flex;
flex: 1 1 auto;
}
#wrap2 {
display: flex;
flex-direction: column;
}
.c1 {
background-color: yellow;
display: flex;
}
例：用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化。
还是用浮动+margin 和 绝对定位实现，但是我的浮动实现有问题，还没有找到解决方法。
两种方法的代码：
/*父盒子+绝对定位实现*/
/*#column3{
position:relative;
}
#left{
position:absolute;
top:0;
left:0;
background:yellow;
width: 200px;
}
#right{
position:absolute;
top:0;
right:0;
background:green;
width:200px;
}
#middle{
margin-left:200px;
background:red;
}*/
/*浮动实现，代码和网上很多人的一样，但是实现出来有问题*/
#column3{
width:100%; margin:0 auto;
}
#left{
float:left;
background:yellow;
width:100px;
height:100px;
}
#middle{
margin-left:110px;
margin-right:110px;
background:green;
height:100px;
}
#right{
float: right;
background:red;
width:100px;
height:100px;
}
用浮动实现的截图：
总有一块不上去，不知道是怎么回事啊。。。
http://www.iyunlu.com/view/css-xhtml/55.html 一篇讲的很好的博客，主要解决的是高度塌陷问题，可我在火狐浏览器中没有遇到。。。。现在还看不太懂，好不容易搞懂浮动脱离于文档流了/相对定位和绝对定位的关系了。用flex布局实现：
#col32 {
display: flex;
flex-direction: row;
}
.a2 {
display: flex;
background-color: red;
flex: 0 1 10em;
height: 50px;
order: -1;
}
.b2{
display: flex;
background-color: blue;
flex: 1 1 auto;
height: 50px;
}
.c2 {
display: flex;
background-color: yellow;
flex: 0 1 12em;
}
例：实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化。
#wrap{
background:red;
overflow:hidden;
}
.box{
float:left;
margin: 10px;
width: 150px;
height: 70px;
background:blue;
}
用flex实现：
.wrapper {
background-color: red;
display: flex;
flex: 1 0 auto;
height: 300px;
justify-content: flex-start;
flex-wrap: wrap;
overflow: hidden;
}
.box {
background-color: blue;
display: flex;
flex: 0 1 160px;
height: 80px;
margin: 0 10px;
}
圣杯布局和双飞翼布局(用盒模型实现)：http://www.cnblogs.com/tinyphp/p/4742922.html, http://www.cnblogs.com/tinyphp/p/4743674.html这两篇文章写得非常全面了，自己也实现了一遍，以后没事的时候再拉出来试试。要反复写加深理解。
用flex布局（弹性布局）实现圣杯布局：
#column3{
display: flex;
flex-direction: row;
}
#left{
display:flex;
flex: 0 0 12em;
background:red;
order:-1;
}
#middle{
display:flex;
flex:;
background:green;
}
#right{
display:flex;
flex: 0 0 12em;
background: yellow;
}
html学习笔记——ife task0001的更多相关文章
- 23 DesignPatterns学习笔记：C++语言实现 --- 2.2 Adapter
23 DesignPatterns学习笔记:C++语言实现 --- 2.2 Adapter 2016-07-22 (www.cnblogs.com/icmzn) 模式理解
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
随机推荐
- Android一些日常的错误
一.加载.so出现的一些问题 1. so文件 放进了优先级低的ABI目录 问题:如果你的项目中,有其他优先级更好的ABI目录,但是你把ABI文件方法放到了优先级低的目录,最后导致你的ABI文件无法被加 ...
- js中的块级作用域
概述 函数是js中最常见的作用域单元, 声明在一个函数内部的变量或函数会在所处的作用域中隐藏起来, 这是有意为之的非常好的设计原则. 但是随着js的发展, 我们有了某个代码块(通常指{..}内部)隐藏 ...
- Create-React-App项目外使用它的eslint配置
概述 使用Create-React-App脚手架感觉它的eslint配置有点好用,于是考虑不用Create-React-App脚手架该怎么使用这些配置. 我于是eject了Create-React-A ...
- Qt之实现网络下发配置的半透明友好提示界面
一.说明 在使用Qt开发的网管客户端程序中,网管客户端主要负责显示设备信息以及对设备下发配置信息等,如配置设备名字.更新设备程序等:由于在网管客户端程序的操作要先经过服务器处理,再由服务器将该命令转发 ...
- Eclipse上搭建Spring的开发环境
一.安装Spring Tool Suite插件 如图: 点击Finish之后等待安装,安装完之后弹窗点击yes重启Eclipse,重启后显示如下界面: 二.搭建Spring开发环境 1.导入jar包到 ...
- ReentrantLock实现原理分析
ReentrantLock主要利用CAS+CLH队列来实现.它支持公平锁和非公平锁,两者的实现类似. CAS:Compare and Swap,比较并交换.CAS有3个操作数:内存值V.预期值A.要修 ...
- CSS 基础：HTML 标记与文档结构(1)<思维导图>
这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...
- 读vue-0.6-text-parser.js源码
提取字符串中的表达式 var BINDING_RE = /\{\{(.+?)\}\}/; function parse(text) { // 找不到返回null if (!BINDING_RE.tes ...
- 和我一起打造个简单搜索之SpringDataElasticSearch关键词高亮
前面几篇文章详细讲解了 ElasticSearch 的搭建以及使用 SpringDataElasticSearch 来完成搜索查询,但是搜索一般都会有搜索关键字高亮的功能,今天我们把它给加上. 系列文 ...
- 协程及Python中的协程
1 协程 1.1协程的概念 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程.(其实并没有说明白~) 我觉得单说协程,比较抽象,如果对线程有一定了解 ...