I AM MAO.YOUR FRIEND.WELCOME TO HERE.

每一个不曾起舞的日子都是对生命的辜负

实现常见的技术产品官网的页面架构及样式布局

点击我查看代码
点击我查看Demo

学习笔记:

1、
类似margin顺序:a,b,c,d;上右下左
2、
html: 粗体斜体强调文本强调文本
3、


type: text文本域 password密码 radio单选按钮 checkbox复选框 submit提交按钮
4、

定义元素的标签,一般为输入标题。
5、
下拉框:
6、
选择器:[class*=’col-‘] 选择类名中含有col-的所有元素
7、
隐藏元素:
display:none;隐藏元素后不占据任何空间,相当于消失。
visibility:hidden;隐藏元素后依旧占据空间,影响布局。
8、
css伪类:before和:after
p:before{
content:”哈哈”;
background-color:red;
color:black;
font-weight:blod;

}
p:before指在每个

元素之前插入内容,并设置插入内容的样式。
如果不需要内容,只配合样式,那么content也不能为空,需要这样写 content : “”;
这些添加不会改变文档的内容,不会出现在DOM中,不可复制
:after指在指定元素后面添加内容。
9、
eg:当不触发div1时,div2不可见,当触发div1时,div2可见。

.div2{
     width:100px;
     height:100px;
     display:none;

}
.div1:hover  .div2{
     display:block;

}

10、
eg:绘制一个头部向右的白色三角形:

div{
     width:0;
     height:0;
     border-width:15px 20px 15px 20px;
     border-style:solid;
     border-color:transparent transparent transparent #fff;
     //上右下左分别为透明 透明 透明 白色

}

11、
合并单元格(电话 占两格):

<h4>横跨两列的单元格:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

15、

标签用于对表格中的列进行组合,以便对其进行格式化。
如需对全部列应用样式, 标签很有用,这样就不需要对各个单元和各行重复应用样式了。

标签只能在 table 元素中使用。
所有主流浏览器都支持 标签。
Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。

<table>
    <caption>网站排名</caption>
    <colgroup>
        <col class="colgroup">
        <col class="colgroup">
        <col class="colgroup">
    </colgroup>
    <thead class="table-head">
        <tr>
            <td>排名</td>
            <td>网站</td>
            <td>热度</td>
        </tr>
    </thead>
    <tbody class="table-content">
        <tr>
            <td>1.</td>
            <td>百度前端技术学院</td>
            <td>13000</td>
        </tr>
        <tr>
            <td>2.</td>
            <td>百度前端技术学院</td>
            <td>12000</td>
        </tr>
    </tbody>
</table>

这样就可以通过.colgroup对每一列单元格进行样式更改。