【WEB】百度前端技术学院笔记（一）

最新推荐文章于 2022-08-25 12:18:28 发布

WHUZXQ

最新推荐文章于 2022-08-25 12:18:28 发布

阅读量992

点赞数 1

分类专栏： Web

本文链接：https://blog.csdn.net/WHUZXQ/article/details/76652456

版权

Web 专栏收录该内容

72 篇文章 0 订阅

订阅专栏

【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;
}