HTML入门记录

[toc]

HTML语法基础

HTML语义化

HTML文本元素

a元素

基础路径怎么写

img

列表元素

布局元素

CSS

CSS的几种写法和推荐写法

CSS场景选择器及使用场景

特殊选择器及使用场景

CSS之盒子模型

CSS常用属性

CSS特性之层叠

CSS之可继承的属性

HTML的重要元素

HTML复杂的表格

在浏览器中看到图中的字样, 代表这个css样式是默认样式

default

HTML中的表单元素

CSS之布局相关

CSS之浮动

CSS之定位

CSS之经典的三栏布局

三栏布局: 高度固定, 左右俩侧的盒子宽度为200px, 中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局</title>
    <style>
        .wrapper{
            margin-bottom: 20px;
        }
        /* 浮动实现方式 */
            /* ***********公共属性BEGIN***** */
        .left, .middle, .right{
            height: 400px;
        }
        .left, .right{
            width: 200px;
            background-color: red;
            float: left;
        }
            /* ********公共属性END********* */
        .float .right{
            float: right;
        }
        .float .middle{
            /* 如果html标签顺序是left  middle   right  那么仅仅是left和right做了浮动,
            但程序是从上往下执行,left浮动了,所以middle到了left右边, 但middle是块级元素,
            会默认占满整行,所以right杯挤到到了下面 */
            /* 所以, 我们将html标签顺序改为  left  right  middle */
            background-color: blue;
            margin: 0 200px;
        }

        /* 下面是定位的实现方式 */
        .absolute{
            position: relative;/* 父相 */
            height: 400px;/* 定位也是脱离文档流的,所以要指定高度 */
        }
        .absolute .left{
            position: absolute;/* 子绝 */
            left:0;
            background-color: red;
        }
        .absolute .middle{
            position: absolute;/* 子绝 */
            left: 200px;
            right: 200px;
            background-color: blue
        }
        .absolute .right{
            position: absolute;/* 子绝 */
            right: 0;
            background-color: red;
        }
    </style>
</head>
<body>
    <h1>三栏布局</h1>
    <!-- wrapper   用来做容器 -->
    <div class="wrapper float">
        <h2>浮动实现</h2>
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>
        <!-- 因为middle是有高度的,div会计算middle的高度,所以不必清楚浮动, 下面的内容也可以正常显示 -->
    </div>
    <div class="wrapper absolute">
        <h2>定位实现</h2>
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>
    </div>
</body>
</html>

CSS常见操作之水平垂直居中

CSS高级知识之BFC

float

开发实战