html初体验2

最新推荐文章于 2024-04-24 23:11:41 发布

墨成诗泪如雨

最新推荐文章于 2024-04-24 23:11:41 发布

阅读量2.8k

点赞数

分类专栏：学习阶段(1)htmlCssJsJq 文章标签： htmlCss

本文链接：https://blog.csdn.net/weixin_43968510/article/details/100297735

版权

学习阶段(1)htmlCssJsJq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

在这里插入图片描述
在父容器box1,添加
/* 设置内边距 /
padding: 50px;
/* 去掉padding撑大的效果 */
box-sizing:border-box;

补充:链接的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>

在这里插入图片描述
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>

在这里插入图片描述
明显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>

在这里插入图片描述
明显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>

在这里插入图片描述

<!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>

在这里插入图片描述
细节:对于背景图片,要设置宽高,必须成块
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.个人案例

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

在这里插入图片描述

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

墨成诗泪如雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html初体验2

1.选择器分类1)通配符选择器, *2)id选择器, #id名 ,不会重复，只对一个有效果3)class选择器, .类名,类名可以重复4)标签选择器，对所有的这个标签有效果5)子代选择器, 父选择器>子选择器，匹配一级所有6)后代选择器, 父选择器子选择器,匹配递减级所有margin的细节大盒子套小盒子：不要使用margin，使用padding或者定位(position)...
复制链接

扫一扫