欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

html初体验2

程序员文章站 2022-03-07 18:28:31
...

1.选择器分类

1)通配符选择器, *
2)id选择器, #id名 ,不会重复，只对一个有效果
3)class选择器, .类名,类名可以重复
4)标签选择器， 对所有的这个标签有效果
5)子代选择器, 父选择器>子选择器，匹配一级所有
6)后代选择器, 父选择器 子选择器,匹配递减级所有

margin的细节
大盒子套小盒子：不要使用margin，使用padding或者定位(position)
当写了*{margin:auto;padding:0px}时，margin调整内部div与父div时没有效果
在父div写padding有效，可以调整内部div与父div的距离
记得box-sizing:border-box;去除padding撑大的影响
没有浮动的盒子无法margin浮动的盒子
父子盒子嵌套的时候，子盒子不要去使用margin父盒子
容易出现问题，比如兄弟节点有浮动，就会出现margin不了的情况
推荐使用父级padding或子级定位来实现布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:auto;
            padding:0px;
        }
        #box1{
            width:350px;
            height:auto;
            border:1px solid red;
            /*padding: 50px;
            box-sizing:border-box;*/
        }
        #box2 {
            background-color: orange;
            float:left;
            width: 100px;
            height: 100px;

        }
        #box3 {
            background-color: royalblue;
            float:left;
            width: 100px;
            height: 100px;
        }
        #box4 {
            background-color: chartreuse;
            clear:both;
            width: 100px;
            height: 100px;
            position:relative;
            top:20px;
            margin-top:50px;
        }
    </style>
</head>
<body>
<div id="box1">
    <div id="box2">2222222</div>
    <div id="box3">33333333</div>
    <div id="box4">4444444</div>
    <div id="box5" style="margin-top:20px;">555555555</div>
</div>
</body>
</html>

html初体验2
在父容器box1,添加
/* 设置内边距 /
padding: 50px;
/* 去掉padding撑大的效果 */
box-sizing:border-box;
html初体验2
补充:链接的target属性
_blank 重新打开一个新的空白页签
_self 替换自己当前的页签
下面两个用于iframe比较容易体现
_parent 替换父级所在页签
_top 替换*所在的页签

2.position定位

2.1固定定位
fixed固定定位,固定在浏览器,不受滚动条的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1 {
            background-color: deepskyblue;
            width:190px;
            height: 320px;
            position:fixed;
            right:0px;
            bottom:200px;
        }
    </style>
</head>
<body>
fixed
<div id="box1">
    <a href="https://www.gg.com" target="_top">X</a>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

html初体验2
2.2相对定位
relative相对定位,相对于自己原来的位置定位
相对定位只是视觉上发生了移动,但是实际的位置并没有发生移动,还是用的原来的位置
如果对后续的元素造成了影响,那么就使用margin进行调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        #win {
            width: 200px;
            height: 100px;
            background-color: red;
            /*
             todo 相对定位
                 细节：虽然位置视觉上改变了，但是实际上没有改变
                 如果对后续的元素造成了影响了，那么就使用margin调整
            */
            position: relative;
            top: 10px;
        }
    </style>
</head>
<body>
<div id="win"></div>
<div id="win2">111</div>
</body>
</html>

html初体验2
明显win这个div对后面的这个win2 div造成了影响,因为它是相对于自己原来的位置定位

2.3 绝对定位
absolute绝对定位,
绝对定位是更具父容器左上角进行定位,前提是父容器要有定位属性
如果父容器没有的话,就往上(祖先)找,直到浏览器(最后一个了),根据它进行左上角定位
注意:绝对定位是可以定位出去的
如果绝对定位互相覆盖的话,使用z-index大的优先排在上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1 {
            background-color: chartreuse;
            width:100px;
            height: 100px;
            position:absolute;
            left:100px;
            top:500px;
            z-index: 2;
        }
        #box2 {
            background-color: orange;
            width:100px;
            height: 100px;
            position:absolute;
            left:110px;
            top:510px;
            z-index: 1;
        }
    </style>
</head>
<body>

    <div id="box" style="border:1px solid red;">
        aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa<br>
        <div id="box1"></div>
        <div id="box2"></div>
    </div>
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

html初体验2
明显z-idnex大的放在上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width:500px;
            height: 400px;
            margin:50px auto 0;
            background-color: orange;
            position:relative;
        }
        #box1 {
            width:100px;
            height: 30px;
            background-color: chartreuse;
            position:absolute;
            left:430px;
            top:190px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="box1"></div>
    </div>
</body>
</html>

明显可以定位出去

3.矢量图

步骤1 访问https://www.iconfont.cn/登陆
步骤2 找一些需要的图片，添加到项目
步骤3 添加完后，下载到本地，然后解压
步骤4 把最后一个目录完整赋值
步骤5 导入link css文件
步骤6 找到每个图片的代码，如:
步骤7 class=“iconfont” iconfont为css文件中的类样式

taobao.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝网 - 淘！我喜欢</title>
    <!-- 设置页签 -->
    <link rel="shortcut icon" href="../images/0704/favicon2.ico">
    <!-- 导入外部css样式表 -->
    <link rel="stylesheet" href="taobao.css">
    <link rel="stylesheet" href="myicon/iconfont.css">
</head>
<body>
<!-- 头部部分 -->
<div id="head">
    <div id="head_content">
        <ul class="fl">
            <li class="a_color2" style=" position: relative;
    right: 6px;">
                <a style="color:#3C3C3C;position:relative;right: 2px;">
                    *
                    <i class="iconfont down">&#xe605;</i>
                </a>
                <div class="div1" style="overflow-y: scroll;height:210px;width:256px;" id="city">
                    <a href="javascript:;">全球</a>
                    <a href="javascript:;">*</a>
                    <a href="javascript:;">*</a>
                    <a href="javascript:;">澳门</a>
                    <a href="javascript:;">韩国</a>
                    <a href="javascript:;">马来西亚</a>
                    <a href="javascript:;">澳大利亚</a>
                    <a href="javascript:;">新西兰</a>
                    <a href="javascript:;">加拿大</a>
                    <a href="javascript:;">美国</a>
                    <a href="javascript:;">日本</a>
                </div>
            </li>
            <li style="position:relative;right: 6px;">
                <a href="javascript:;" style="color:#F22E00;">亲，请登录</a>
            </li>
            <li style="margin-right: 8px;position: relative;right:8px;">
                <a href="javascript:;" class="a_color1">免费注册</a>
            </li>
            <li style="position: relative;left:-4px;"><a href="javascript:;" class="a_color1">手机逛淘宝</a></li>
        </ul>
        <ul class="fr">
            <li class="a_color2" style="position:relative;left:-22px;">
                <a href="javascript:;">
                    我的淘宝
                </a>
                <i class="iconfont down">&#xe605;</i>
                <div class="div1">
                    <a href="javascript:;">已买到的宝贝</a>
                    <a href="javascript:;">我的足迹</a>
                </div>
            </li>
            <li style="position: relative;left: -19px;">
                <a href="javascript:;" class="a_color1">
                    <i class="iconfont down" style="color:#FF4400;">&#xe61c;</i>购物车
                </a>
                <i class="iconfont down">&#xe605;</i>
            </li>
            <li class="a_color2" style="position: relative;left:-21px;">
                <a href="javascript:;" id="favorite">
                    <i class="iconfont down" style="color:#9C9C9C;position: relative;left:2px;top:0px;font-size: 14px;">&#xe676;</i>
                    收藏夹
                    <div class="div1">
                        <a href="javascript:;">收藏的宝贝</a>
                        <a href="javascript:;">收藏的店铺</a>
                    </div>
                </a>
                <i class="iconfont down">&#xe605;</i>
            </li>
            <li style="position: relative;left:-20px;">
                <a href="javascript:;" class="a_color1">商品分类</a>
            </li>
            <li id="line" style="margin-right: 7px;"></li>
            <li class="a_color2" style="position:relative;left:-5px;">
                <a href="javascript:;">
                    千牛卖家中心
                </a>
                <i class="iconfont down">&#xe605;</i>
                <div class="div1" style="height:200px;">
                    <a href="javascript:;">免费开店</a>
                    <a href="javascript:;">已卖出的宝贝</a>
                    <a href="javascript:;">出售中的宝贝</a>
                    <a href="javascript:;">卖家服务市场</a>
                    <a href="javascript:;">卖家培训中心</a>
                    <a href="javascript:;">体检中心</a>
                    <a href="javascript:;">问商友</a>
                </div>
            </li>
            <li class="a_color2 divChange1" style="position:relative;left: -4px;">
                <a href="javascript:;">
                    联系客服
                </a>
                <i class="iconfont down">&#xe605;</i>
                <div class="div1">
                    <a href="javascript:;">消费者客服</a>
                    <a href="javascript:;">卖家客服</a>
                </div>
            </li>
            <li class="a_color2" id="websiteMap">
                <a href="javascript:;">
                    <i class="iconfont down" style="color:#FF4400;"> &#xe62b;</i>
                    网站导航
                </a>
                <i class="iconfont down">&#xe605;</i>
                <div class="div1" id="websiteMap_content">
                    <!-- 网站导航的内容:四部分 -->
                    <!-- 第一部分 -->
                    <div class="websiteMap_content" style="height:309px;">
                        <div>
                            <!-- 头部 -->
                            <h4 style="color:#fc4200">主题市场</h4>
                            <!-- 内容 -->
                            <ul id="theme" class="bazaar">
                                <li><a href="javascript:;">女装
                                    <i class="hot" style="position: absolute;top:0px;right:0px;"></i></a></li>
                                <li><a href="javascript:;">男装</a></li>
                                <li><a href="javascript:;">内衣</a></li>
                                <li><a href="javascript:;">鞋靴</a></li>
                                <li><a href="javascript:;">箱包</a></li>
                                <li><a href="javascript:;">婴童</a></li>
                                <li><a href="javascript:;">家电</a><i class="new"></i></li>
                                <li><a href="javascript:;">数码</a></li>
                                <li><a href="javascript:;">手机</a></li>
                                <li><a href="javascript:;">美妆</a></li>
                                <li><a href="javascript:;">珠宝</a></li>
                                <li><a href="javascript:;">眼镜</a></li>
                                <li><a href="javascript:;">手表</a></li>
                                <li><a href="javascript:;">运动</a></li>
                                <li><a href="javascript:;">户外</a></li>
                                <li><a href="javascript:;">乐器</a></li>
                                <li><a href="javascript:;">游戏</a></li>
                                <li><a href="javascript:;">动漫</a></li>
                                <li><a href="javascript:;">影视</a></li>
                                <li><a href="javascript:;">美食</a></li>
                                <li><a href="javascript:;">鲜花</a></li>
                                <li><a href="javascript:;">宠物</a></li>
                                <li><a href="javascript:;">农资</a></li>
                                <li><a href="javascript:;">房产</a></li>
                                <li><a href="javascript:;">装修</a></li>
                                <li><a href="javascript:;">建材</a></li>
                                <li><a href="javascript:;">家居</a><i class="hot"></i></li>
                                <li><a href="javascript:;">百货</a></li>
                                <li><a href="javascript:;">汽车</a></li>
                                <li><a href="javascript:;" style="width:52px;">二手车</a></li>
                                <li><a href="javascript:;">办公</a></li>
                                <li><a href="javascript:;">定制</a></li>
                                <li><a href="javascript:;">教育</a></li>
                                <li><a href="javascript:;">卡劵</a></li>
                                <li><a href="javascript:;">本地</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- 第二部分:特色市场 -->
                    <div class="websiteMap_content" style="height: 279px;">
                        <div>
                            <!-- 头部 -->
                            <h4 style="color: #A6BD47;">特色市场</h4>
                            <!-- 内容 -->
                            <ul id="feature" class="bazaar">
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="websiteMap_content" style="height: 249px;">
                    </div>
                    <div class="websiteMap_content" style="height:219px;">
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

taobao.css

* {
    margin: 0px;
    padding: 0px;
}
li {
    list-style-type: none;
}
a {
    text-decoration: none;
}
h4 {
    text-indent: 10px;
    position: relative;
    top: -8px;
    font-family: "宋体";

}

/** 自定义类样式 */
 /* 左浮动 */
.fl {
    float: left;
}
 /* 右浮动 */
.fr {
    float: right;

}
 /* 清除所有浮动效果 */
.cl {
    clear: both;
}
/* 相对定位 */
.rtv {
    position: relative;
}
/* 小动图1 */
.hot{
    display: block;
    width: 9px;
    height: 14px;
    background: url("../images/0704/h.gif");
    position: absolute;
    top:1px;
    right:30px;

}
/* 小动图2 */
.new{
    display: block;
    width: 9px;
    height: 14px;
    background: url("../images/0704/n.gif");
    position: absolute;
    top:1px;
    right:30px;

}

/** 头部部分: */
#head {
    width: 100%;
    height: 36px;
    min-width: 1349px;
    background-color: #F5F5F5;
    margin: auto;
}
/* 头部的内容 */
#head_content {
    width: 1190px;
    height: 35px;
    min-width: 1190px;
    /*outline: 1px solid red;*/
    margin: auto;
}
/* 头部内容的所有的li标签 */
#head_content li {
    float: left;
    line-height: 36px;
    margin-right: 2px;
    position: relative;
    top: -2px;

}
/* 头部内容的ul下的li下的所有的a标签 */
#head_content > ul > li > a {
    display: inline-block;
    font-size: 12px;
    color: #6C6C6C;
    margin-right: 7px;
    font-family: '宋体';
    position: relative;
    left: 4px;
}
/* <i>标签下移动 */
.down {
    position: relative;
    top: 1px;
    left: -3px;
}
/* 单独的一个下划线 */
#line {
    width: 1px;
    height: 12px;
    border-left: 2px solid #E1E1E1;
    position: relative;
    left: -6px;
    top: 12px !important;
}
/** 头部一些的li标签被鼠标悬浮时，链接变色 */
#head_content > ul > li > a:hover {
    color: #F22E00;
}
/** 但是有些i标签的字体颜色不要变化 */
#head_content > ul > li:hover > a > i {
    color: #7A7C7A;
}
/** 收藏夹a标签 */
#favorite:hover > i {
    color: #F22E00 !important;
}
/** 头部一些的li标签被鼠标悬浮时，链接变色，背景色也变*/
.a_color2:hover {
    background-color: #FFFFFF;

}
.a_color2:hover > .div1 {
    display: block;
}
/*
 .div1是隐藏域，鼠标悬浮个别li标签显示内容
 下面是共同的属性,需要的单独再行内样式调整
*/
.div1 {
    display: none;
    width: 85px;
    height: 70px;
    position: absolute;
    top: 35px;
    left: -1px;
    text-align: left;
    padding: 12px 0 0 0;
    box-sizing: border-box;
    /* 头部的边框不要 */
    border: 1px solid #EEEEEE;
    border-top: none;
}
/** 修改右边的“网站导航”的绝对位置
    也就是修改 .div1
*/
#websiteMap_content {
    display: none;
    position: absolute;
    top: 35px;
    left: -1098px;
    width: 1197px;
    height: 311px;
}
.div1 > a {
    width: 100%;
    display: block;
    text-decoration: none;
    color: #6C6C6C;
    font-size: 12px;
    line-height: 26px;
    font-family: "宋体";
    text-indent: 4px;
}
#city > a {
    color: #3C3C3C;
}

.div1 > a:hover {
    background-color: #F5F5F5;
}
/** 网站导航的内容 */
.websiteMap_content {
    width: 25%;
    float: left;
    /** 隐藏滚动条 */
    overflow: hidden;
}
/** 网站导航鼠标悬浮时触发效果，显示内容数据 */
#websiteMap:hover>#websiteMap_content{
   display: block;
}
/** 市场 */
/* 第一部分：主题市场 */
.bazaar {
    display: block;
    margin-top: -8px;
    margin-left:-8px;
}
.bazaar > li {
    float: left;
    width: 24%;
    padding-top: 6px;
    height: 25px;
    position: relative;
    top: -5px;
    left:8px;
}
.bazaar > li > a {
    display: block;
    height: 25px;
    width:40px;
    color: #3c3c3c;
    font-family: "宋体";
    font-size: 12px;
    line-height: 25px;
    border-radius: 2px;
    margin:0 2px;
    padding: 0 8px;
    box-sizing:border-box;
    /** 用于后代<i>标签定位 */
    position: relative;
}
#theme>li>a:hover{
    background-color: #FF5500;
    color:#FFFFFF;
}

这是矢量图
链接：https://pan.baidu.com/s/18Rrf9cQkiMKfwUJ3opP7_A
提取码：mwl4
复制这段内容后打开百度网盘手机App，操作更方便哦

背景图:
背景图作为背景呈现,背景图不占空间. 容器需要自身调整大小,内容文件可以写在背景图之上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片</title>
    <style>
        #win {
             border: 1px solid black;
             width: 1080px;
             height: 516px;
             /*background-image: url(../images/default.jpg); */
             /* background-repeat: no-repeat; */
             /* background-position: 100px 20px; */
             /** url:图片路径 调整图片在盒子中的位置 图片重复(x轴/y轴)*/
             background: url("../images/0704/bd_logo.png") 20px 0px no-repeat;
            /** 图片的大小,以div的宽高调整百分比 */
             background-size: 25% 50%;
        }
    </style>
</head>
<body>
<!-- 图片的形式:占空间 -->
<!--<img src="">-->
<!--<input type="image" src="">-->
<!-- 背景图:不占空间 -->
<div id="win">
    aaa
</div>
</body>
</html>

html初体验2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片2</title>
    <style>
        #win {
            /** 成块 */
            display: block;
            height: 23px;
            width: 76px;
            outline: 1px solid red;
            /** 定位背景图的位置 */
            background: url("../images/0704/down_ex_func2.png") -304px 0px no-repeat;
        }
        #win:hover {
            background-position-y: -23px;
        }
        #win2{
            display: block;
            width: 100%;
            height: 618px;
            border:1px solid red;
            background: url("../images/0704/tm.gif") no-repeat 50% 20%;

        }
    </style>
    <link rel="stylesheet" href="myicon/iconfont.css">
</head>
<body>
<a href="javascript:;" id="win"></a>
<i class="iconfont">&#xe619;</i>
<i class="iconfont" style="color:dodgerblue;">&#xe615;</i>
<a href="javascript:;" id="win2"></a>
</body>
</html>

html初体验2
细节:对于背景图片,要设置宽高,必须成块
display:block;
非块的元素,要想设置宽高,必须成块,或者浮动 display:block ; float:left;

锚链接
1.使用name,但是跳转的必须得是链接
2.使用id,跳转的任意,也可以是链接,所以推荐使用id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点2</title>
</head>
<body>
设置一个锚点链接：<a href="#miao">去找喵星人</a>
...好多<br>我省略了
<h3 id="miao">喵星人基地</h3>
<!--<a id="miao">喵星人基地</a>-->
</body>
</html>

超链接伪类
link: 位访问时
hover:鼠标悬浮触发
active:鼠标点击触发
visited:**后触发,鼠标按下(**后不会再次**)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        a { text-decoration:none;}
        /* 未访问链接时，链接初始颜色 */
        a:link    { color: red;}
        /** 鼠标悬浮时触发 */
        a:hover   { color: blue;}
        /** 鼠标点击时触发 */
        a:active  { color: yellow;}
        /** 访问,**后触发,鼠标按下 */
        a:visited { color: green;}
    </style>
</head>
<body>
<a href="https://www.baidu.com">我是一个超链接</a>
</body>
<script>
    alert(document.document);
</script>
</html>

4.个人案例

存在一些问题,对于上一张,下一张不能点击过快,以及代码可维护性太差,主要了解下布局
一些功能并未实现的很好

html初体验2
html初体验2
项目源码如下:
链接：https://pan.baidu.com/s/1pQsxvM9sr5g5UHlrlIpEOg
提取码：3r75
复制这段内容后打开百度网盘手机App，操作更方便哦

相关标签： htmlCss

上一篇： FCC Spinal Tap Case

下一篇： 原生JS实现最简单的图片懒加载

推荐阅读