小白学前端08

两列布局:
1.容器div水平居中:定义宽度,将水平外边距设置为auto
    width:920px --适合分辨率1024*768的屏幕(不过920px是怎么确定出来的呢?)
    margin:0 auto -- 实现水平居中

用css进行布局有几种不同的方式,包括绝对定位和使用负的边距值
    基于浮动的布局是最容易使用的,也是最可靠的,只需设置希望定位的元素的宽度然后将它向左或向右浮动
    但浮动的元素不再占据文档流中的任何空间,也就不再对包围它们的块框产生任何影响,故需进行清理
    
    一般将两列都向左浮动,然后使用外边距或内边距在两列之间创建一个隔离带
    为了防止浮动元素一列退到另一列的下面(太挤了),不使用水平外边距或内边距来建立隔离带而是一个元素向左一个向右

2. 每一列设置想要的宽度,次要内容向左,主内容向右,主内容添一点内边距,来避免文本紧挨着元素的右边缘

三列布局:

时间: 2024-10-14 06:11:43

小白学前端08的相关文章

小白学前端20

也许今天都是一个空指针吧 1.大致的理解了struts2,因为毕业的需要,不过感觉其实一直都是,啊,java耶.就立马兴致冲冲的去学java,好像学会了java之后自己就会是一个程序员,自己就能牛逼起来了之后啊,啊,javascript耶,于是又焕发出无尽的激情学习js,还看着那么多的博客,拿起eloquent js以为自己也能成为一个合格的前端工程师..现在呢,我还是不知道 只不过好像慢慢理解了什么是编程,什么又是一个程序员,当然,还只是一种雾里看花的模糊感啊.. 2.COA7玩完了全部的任务

小白学前端07

2017-05-12 16:02:53: 1.小技巧:在<style type="text/css"><!--.../*your css code*/--></style>利用这样的写法可以实现若包围css代码的两边style写错,则css code会被自动注释 2.几种简写模式:background: #94B8E9 url(img/pixy-rollover.gif) no-repeat left top;---无次序要求     backgro

小白学前端06

回顾一下这几天吧: 非常后悔的行为: 一口气看完一遍head first html就一头开始想着做网页,实则很多技巧就像刚刚开始学编程就生搬硬套的写算法,不是这样不可行,而是这样的学习曲线很陡峭,很容易让自己产生很大的挫败感: 例如:一开始自己就模仿别人的导航栏(很简单吧),可是单单想出让图片,文本在块级元素中进行居中就费了好大的劲,实则呢,这是一个简简单单的百度经验或者就是要看的下一本书css mastery里面的小例子, 两点: 1.先自己思考,一遍不行,第二遍,但是第二遍不行,就应该sta

小白学前端12

1.var string = "you are";var text = string;string = "best";console.log(text);  //输出"you are"变量为一存储空间,但text=string不是说text指向string的存储空间,而是text新建一个存储空间来存储string的值 var string = {0:"you are"};var text = string;string[0]=

小白学前端03

上午的小插曲试着把昨天的那个c语言问题解一下: 1 #include<stdio.h> 2 void writeToFile(int variable); 3 void showVariableResult(void); 4 int main(){ 5 int i=0; 6 for(;i<100;i++){ 7 i=i*2; 8 writeToFile(i); 9 } 10 showVariableResult(); 11 return 0; 12 } 13 14 //只对数值产生作用,

[触动精灵]零基础小白学触动5-8

零基础小白学触动 - 05 - 触动常用函数 点击 滑动 原理 其实都可以分解成 按下=> 等待一定时间或者移动动作=>  松开 点击: tSLib库的函数tap(x,y) 后面还有2个参数 可以自己看手册  https://www.zybuluo.com/miniknife/note/293935#函数tap-点击 滑动  moveTo(x1,y1,x2,y2,step)   详细的   https://www.zybuluo.com/miniknife/note/293935#函数move

小白学 Python 爬虫(27):自动化测试框架 Selenium 从入门到放弃(上)

人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Linux基础入门 小白学 Python 爬虫(4):前置准备(三)Docker基础入门 小白学 Python 爬虫(5):前置准备(四)数据库基础 小白学 Python 爬虫(6):前置准备(五)爬虫框架的安装 小白学 Python 爬虫(7):HTTP 基础 小白学 Python 爬虫(8):网页基

小白学 Python 爬虫(28):自动化测试框架 Selenium 从入门到放弃(下)

人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Linux基础入门 小白学 Python 爬虫(4):前置准备(三)Docker基础入门 小白学 Python 爬虫(5):前置准备(四)数据库基础 小白学 Python 爬虫(6):前置准备(五)爬虫框架的安装 小白学 Python 爬虫(7):HTTP 基础 小白学 Python 爬虫(8):网页基

1101: 零起点学算法08——简单的输入和计算(a+b)

1101: 零起点学算法08--简单的输入和计算(a+b) Time Limit: 1 Sec  Memory Limit: 128 MB   64bit IO Format: %lldSubmitted: 3669  Accepted: 1997[Submit][Status][Web Board] Description 前面7道题做下来,对输出和计算有点感觉了吧? 不过很可惜的是前面的做法,好像太死了,写了一个计算3+4的程序,计算5+6又得改程序,计算机真的只能这么实现,那么我们比计算机