第一节课我们了解了这个行业和完成了开发环境的配置，第二节课我们熟悉了像h,p,img,a的基本标签的使用。
同时重点讲了两个重要的属性，
img的src属性，是用来放图片地址的，
a的href属性，是用来放跳转链接的。
属性就是用来描述说明标签的，我喜欢的妹子类型是长头发大眼睛的，长头发和大眼睛就是妹子的属性。
这节课呢我们重点，
1.再说几个常用的标签和属性。
2.用常用的标签和属性堆几个常用的模块。
3.堆几个常用的布局。
俗话说的好，人不识武藤兰，阅尽A片也枉然，今天我们首推HTML界的武藤兰-div.
为啥div的地位这么拽呢，这么说吧，随便打开一个网页，你会发现他就是HTML界的劳模，干的活最多，出现的频率最高。但是，他又是很亲民的，
<div>承蒙道上的兄弟抬爱，姐们我就是出道早一点，拍片勤快一点而已</div>
对就是这么简单，他的作用是，
用来进行页面布局。
怎么搞呢，页面横着排竖着排，网页表现的样子，是css控制的，那么问题来了，
先别想程序，想现实生活，你让同事给你到杯水，你怎么说？是不是说给我倒杯水，然后他把你给他的杯子或者自己选一个杯子，然后把杯子里装什么水。
她是怎么思考的呢？
1.选择一个杯子，你给她的杯子或者她自己选择一个杯子，而不是找个夜壶。
2.把这个杯子给灌满水。
其实写程序就是跟计算机聊天，你就把计算机当成一个傻叉就行了，撩妹的话你兴许一个眼神她就会明白一会一起回家然后去做不可描述的事儿，计算机那二货，你就得这么说，晚上10点我们去某某区某某街道xx号如家888房间，用json牌子的气球，啪啪啪半个小时。
好了，回来，你让某个元素怎么样，比如让div横向排列，你也得分两步
1.选择div，计算机得知道哪个div，一个页面里div多了去了。
2.把div怎么样。
好我们转换成代码，
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#后面的是id类似于人的名字 唯一，页面里面有两个同名的就不知道干谁了*/
#div1{
background: red;//宽高背景色
width: 100px;
height: 100px;
} </style></head><body><div id="div1"></div></body></html>这里说了一个id选择器,#后面跟着名字 html里面 id="xxx",
那都有什么选择器呢，一个代码你就明白了，
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div 是标签选择器，所有的div都被选择，就相当于你刘姨对我的找对象的标准一样，只要是女的就行，所以你懂的这个选择器选择东西太多了不够精确*/
div{ width:100px; height: 100px; background: red;
} /*最起码也得是单身狗*/
.singleGirl{ background: orange;
} #tfGirl{ background: #ff00;
}
#menglu{ width:200px; height: 200px; background: pink;
} </style></head><body><div>我们都是女的</div><div>我们都是女的</div><div class="singleGirl">我们都是女的</div><div class="singleGirl">我们都是女的</div><div class="singleGirl">我们都是女的</div><div class="singleGirl" id="tfGirl">我们都是女的</div><div id="menglu">我们都是女的</div></body></html>div 标签选择器，选择所有女的
.class 选择一类，单身girl
i d选择器 唯一的一个，比如梦露
那同时出现，哪个起作用呢？
计算机也不傻，梦露一出现肯定不用再聊条件了，然后看是不是单身狗，最后是看是不是女的。
选择器鸟了，我们就搞几个经典的布局。
这个面试太常考了，这个就跟你去你丈母娘家提亲，你女朋友她妈问你有房没有一样常见。
俗话说的好，常在河边走哪有不见丈母娘的，
她问你，有房吗？
你说我住单身公寓。我们看下单身公寓布局：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main{ width: 1000px; margin: 0 auto; border: 1px solid #000000;
} </style></head><body>
<div id="main">
今天星期五了，卧糟卧糟卧糟，老子明天不上班 一撸到天亮，再特么睡上一整天，太尼玛爽了!!! </div></body></html>丈母娘说，滚。
第二种答法，阿姨，我有一个一室一厅，
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{ margin:0; padding:0; } .left{ width:200px; background:red; height:200px; position:absolute; left:0; top:0; } .right{ background:yellow; height:200px; padding-left:200px; } </style></head><body><div class="left">
阿姨，我们两个合租的房子，我一直住客厅</div><div class="right">
妈，我们俩合租的房子，我一直住卧室</div></body></html>丈母娘说，小伙子，要对我女儿好点儿，她可是我的掌上明珠啊。
第三种土豪式样答法，阿姨三环内有套两室一厅。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{ margin:0; padding:0; } .left{ width:200px; background:red; height:200px; position:absolute; left:0; top:0; } .center{ background:yellow; height:200px; padding:0 200px; } .right{ width:200px; height:200px; background:red; position:absolute; top:0; right:0; } </style></head><body><div class="left">
阿姨，有空您去我家坐坐，我把主卧留给您</div><div class="center">
阿姨，我睡客厅沙发</div><div class="right">
阿姨，您女儿住次卧</div></body></html>第四种，阿姨我家……
我聪哥.png
好吧，这个布局怎么实现呢？作业，猫厂布局。
实际例子.png
鹅厂布局，
实际例子2.png
这节课实属推倒面试官，手撕HR，干翻后台狗的利器，最后一句，JS大法好，信彬哥，得永生。
作者：会点儿前端的大彬哥
链接：https://www.jianshu.com/p/d50098f9738f
共同学习，写下你的评论
评论加载中...
作者其他优质文章
