HTML培训NO.4

bioioid_song

已于 2022-02-06 16:16:24 修改

阅读量399

点赞数

文章标签： html css css3

于 2022-02-05 16:16:58 首次发布

本文链接：https://blog.csdn.net/m0_49786709/article/details/122788451

版权

作业总结

input输入框(带搜索按钮)

<style>
#aim{
		position:relative;
        left:100px;
        background:transparent;/*使输入框透明*/
        height:30px;
        width:200px;
        font-size:16px;
        border:1px solid rgb(150,150,150);
        outline:none;
        
        background-image:url(搜索.png);/*设置小图标*/
        background-size:25px 25px;/*小图标的大小*/
        background-position:170px 4px;/*小图标在input的位置*/
        background-repeat:no-repeat;/*背景小图标不重复*/
}
</style>
<body>
<input type="text" placeholder="请输入关键字" id="#aim">
</body>

label自动聚焦
设置label标签的for属性值与表单元素的id属性值对应，当点击label属性时会自动给表单元素聚焦

下拉列表

<body>
<div class="menu">
    <!--三个下拉所属的一个大div-->
    <div class="item">
        <!--不下拉的时候显示的div-->
        <div class="itemvalue">1</div>
        <div class="itembox">
        <!--下拉出来的div-->
        <ul>
            <li>1.1</li>
            <li>1.2</li>
            <li>1.3</li>
            <li>1.4</li>
        </ul>
        </div>
    </div>

    <div class="item">
        <div class="itemvalue">2</div>
        <div class="itembox">
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
        </div>
    </div>
    <div class="item">
        <div class="itemvalue">3</div>
        <div class="itembox">
        <ul>

        </ul>
        </div>
    </div>
</div>
</body>
</html>

<style>
        *{
            /*去除影响*/
            margin: 0;
            padding: 0;
        }
        div.item{
            float:left;/*使得可以在同一行排列*/
            width:20em;
        }
        li{
            list-style: none;
            /*使得列表没有图标*/
        }
        
        .menu{
            width: 100%;/*25%是垂直列表，100%是水平列表*/
            height: auto;
            /*height:auto，是指根据块内内容自动调节高度。
            height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。*/
            margin: 40px auto;/*上下margin为40px，左右居中*/
            position:absolute;
            /*绝对定位*/
        }
        /**/
        .item{
            width: 100%;
            height: auto;
        }
        .item  .itemvalue{
            height: 40px;
            line-height: 40px;
            background-color: rgb(34,67,128);
            color: white;
            padding-left: 10px;
            border-right:green; 
            /* 蓝色边框给item文本h3 */
            border-style:solid;
            border-right-width:1px;
        }
        .item  .itembox{
            width: 100%;
            height: 0px;
            /*没有下拉的时候要设置为0px*/
            overflow: hidden;  /*元素溢出时隐藏*/
        }
        .item:hover  .itembox{
            height: auto;/*box自动高度*/
            /*原来是设置为了0px，设置为自动高度的话就可以撑开*/
        }
        li:hover /*li悬停变色*/
        {
            background-color: tan;
        }
        .item  .itembox  ul{
            width: 100%;
            height: auto;
            background-color: rgb(34,67,128);
            padding: 10px;
        }
    </style>

实现效果在这里插入图片描述

知识学习

id和class选择器

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

#para1{
	text-align:center;
	color:red;
}

class选择器

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。
class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."表示：

.center{text-align:center;}
所有拥有center类的HTML元素均为居中

也可以指定特定的HTML元素使用class。
在以下实例中，所有的p元素使用class = "center"让该元素的文本居中。

p.center{text-align:center}

如何插入样式表

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部区域使用<style>元素来包含CSS
外部引用 - 使用外部 CSS 文件

内联样式表

使用<style>标签在文档头部定义内部样式表。

<head>
<style>
hr{color:sienna;}
p {margin-left:20px;}
body{background-image:url("images/back40.gif");}

内联样式

由于要将表现得内容混杂在一起，内联样式会损失掉样式表得许多优势。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同得样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性：

h3
{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页得头元素中，或在一个外部的css文件中。甚至可以在同一个HTML文件内部引用多个外部样式表。
一版情况下，优先级如下**(内联样式) inline style > (内部样式) Internal style sheel > (外部样式) External style sheet > 浏览器默认样式 **
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

<head>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
</head>
<body>
    <h3>测试！</h3>
</body>

css组合选择器

css样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高

元素选择器：1
类选择器：10
id选择器：100
内联样式：1000
在CSS中包含了四种组合方式：后代选择器(以空格分割)，子元素选择器(以大于号分割)，相邻兄弟选择器(以加号分隔)，普通兄弟选择器(以波浪线分割)。

后代选择器(派生选择器)

选择指定元素的所有指定后代元素，以空格隔开

选择器1 指定元素{
	属性名:属性值;
	......
}

子代选择器

选择指定元素的第一代子元素，以大于号>隔开

相邻兄弟选择器

选择指定元素的下一个指定元素(得相邻，中间不可有其他的元素)，两者有相同的父元素，以 + 隔开。

/*后代选择器*/
        .food li{
            border:green solid 1px;
            
        }
        /*子代选择器*/
        .food2 > li{
            border:blue dotted 1px; 
        }
        /*相邻兄弟选择器*/
        #mydiv + div{
            border:blue solid 2px;
        }

<ul class="food">
        <li>水果
            <ul>
                <li>香蕉</li>
                <li>苹果</li>
                <li>梨</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>白菜</li>
                <li>油菜</li>
                <li>卷心菜</li>
            </ul>
        </li>
    </ul>
    <hr>

    <ul class="food2">
        <!--只作用于水果这一个li，里面的香蕉，苹果，梨都没有受影响-->
        <li>水果
            <ul>
                <li>香蕉</li>
                <li>苹果</li>
                <li>梨</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>白菜</li>
                <li>油菜</li>
                <li>卷心菜</li>
            </ul>
        </li>
    </ul>
    <hr>
    <div>相邻兄弟选择器</div>
    <div id = "mydiv">相邻兄弟选择器</div>
    <!--若此行加上<p>Test</p>，不仅<p>标签内内容不会发生变化，后面的那个<div>内容也不会发生变化
    因为<p>标签的出现，使得div之间不再相连-->
    <div>相邻兄弟选择器</div>
    <div>相邻兄弟选择器</div>