【WEB】百度前端技术学院笔记(二)
http://blog.csdn.net/WHUZXQ/article/details/76695185http://blog.csdn.net/WHUZXQ/article/details/76695185
一.HTML部分
1.header标签
< header> 标签定义文档的页眉(介绍信息)。
标签规定文档的主要内容。
< main > 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
注释:在一个文档中,不能出现一个以上的 < main> 元素。< main> 元素不能是以下元素的后代:< article>、< aside>、< footer>、< header> 或 < nav>。
2.在新窗口中打开链接 target=”_blank”
<a href="http://www.baidu.com" target="_blank">这里有一个链接http://www.baidu.com</a>
3.ul无序列表,ol有序列表
4.下拉选择框或复选框,.下拉选择框selected=”selected”设置默认选中,复选框checked=”checked”设置默认选中
<select>
<option>北京</option>
<option>杭州</option>
<option selected="selected">上海</option>
</select>
`<input type="checkbox" id="sport" checked="checked">
5.table属性不容忽视
<td colspan="2">1000</td>
二.css部分
1.表单的排版
这个的大体思路就是设置左侧提示文字的宽度为定值,然后设置文字右对齐,可是我遇到一个问题,必需添加display:inline-block才可以得到我需要的效果。
经过思考后,发现display:inline-block主要的用处是用来处理行内非替换元素的高宽问题的。行内非替换元素,比如span、a等标签,正常情况下士不能设置宽高的,加上该属性之后,就可以触发让这类标签表现得如块级元素一样,可以设置宽高。因此如果不加这个属性是无法设置宽高的。
2.div之间出现莫名奇妙的缝隙
我检查了两个div的margin,padding,font-size属性,均没有发现问题,最后发现div内包括的元素设置了margin属性,且div
内的子元素并没有把div撑开(margin部分),因此导致了莫名奇妙的空隙。
三.三行布局
分别尝试了双飞翼浮动定位法,圣杯浮动定位法,flex
实现圣杯布局。个人觉得最简单且最好理解的是flex
圣杯布局法。
flex简要介绍可参考:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
<link href="css/task1.css" rel="stylesheet">
</head>
<body>
<div id="content">
<div id="main"></div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
css代码:
html body{
height:100%;
}
body{
display:flex;
flex-direction: column;
flex:1;
}
#content{
flex:1;
display: flex;
height:800px;
}
#left,#right{
flex:0 0 80px;
background-color: blue;
height:800px;
}
#left{
order:-1;
height:800px;
}
#main{
flex:1;
height:800px;
}