[H5]CSS3常用操作(对齐、尺寸、分类、图片和导航栏)

最新推荐文章于 2024-07-19 15:46:26 发布

风浅月明

最新推荐文章于 2024-07-19 15:46:26 发布

阅读量2.9k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/wsyx768/article/details/79650134

版权

Web 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

[H5]CSS3常用操作(对齐、尺寸、分类、图片和导航栏)

[index.html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用的对齐、尺寸、分类、导航栏和图片操作</title>
    <link type="text/css" rel="stylesheet" href="indexCSS.css">
</head>
<body>
    <!--CSS常用操作-->
    <!--对齐-->
        <!--margin      进行水平对齐-->
        <!--position    进行左右对齐-->
        <!--float       进行左右对齐-->
        <div class="dClass1">对齐1</div>

    <!--尺寸-->
        <!--height      设置元素的高度-->
        <!--width       设置元素的宽度-->
        <!--line-height 设置行高-->
        <!--max-height  设置元素最大高度-->
        <!--max-width   设置元素最大宽度-->
        <!--min-height  设置元素最小高度-->
        <!--min-width   设置元素最小宽度-->
        <p id="pID1">　
            据新华社21日消息，深化党和国家机构改革方案提出：
            公安边防部队、公安消防部队、公安警卫部队不再列武警部队序列，
            全部退出现役。
        </p>

    <!--分类-->
        <!--clear   设置一个元素的侧面是否允许其它的浮动元素-->
        <!--cursor  规定当指向某元素之上时显示的指针类型-->
        <!--display 设置是否以及如何展示元素-->
        <!--float   定义元素在哪个方向浮动-->
        <!--position    把元素放置到一个静态的、相对的、绝对的、固定的位置-->
        <!--visibility  设置元素是否可见或不可见-->
        <p id="pID2">CSS分类</p>
        <h3 id="hID1">元素是否可见</h3>
        <ul id="uID1">
            <li>早餐</li>
            <li>午餐</li>
            <li>晚餐</li>
        </ul>

    <!--导航栏-->
        <ul id="nID1">
          <li><a href="https://www.baidu.com" target="_blank">导航一</a></li>
            <li><a href="https://www.baidu.com" target="_blank">导航二</a></li>
            <li><a href="https://www.baidu.com" target="_blank">导航三</a></li>
        </ul>

    <!--图片-->
        <!--width       宽度-->
        <!--height      高度-->
        <!--opacity     透明度0~1-->
        <div id="dID1">
            <!--href="#"表示跳转自身-->
            <a href="#" target="_self">
                <!--alt 缺省文字-->
                <img src="picture/lty1.jpg" alt="洛天依">
            </a>
            <div class="titleClass">洛天依壁纸</div>
        </div>
</body>
</html>

[indexCSS.css]

*{
    margin: 0px;
    padding: 0px;
}
/*对齐*/
.dClass1{
    width: 200px;
    height: 50px;
    background-color: green;
    /*使用margin属性进行水平对齐*/
    margin-left: auto;
    margin-right: auto;
    /*!*第一个参数表示上下，第二个参数表示左右*!*/
    /*margin: 0px auto;*/
    /*!*使用position进行左右对齐*!*/
    /*position: absolute;!*绝对布局*!*/
    /*right: 0px;*/
    /*!*使用float进行左右对齐*!*/
    /*float: left;*/
}

/*尺寸*/
#pID1{
    /*元素宽度*/
    /*width: 200px;*/
    /*元素最大宽度*/
    max-width: 250px;
    /*行高 normal:正常的*/
    line-height: 200%;
}

/*分类*/
#pID2{
    color: #FF0000;
    /*指针类型
        url         需使用的自定义光标的 URL。
                    注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
        default 	默认光标（通常是一个箭头）
        auto 	    默认。浏览器设置的光标。
        crosshair 	光标呈现为十字线。
        pointer 	光标呈现为指示链接的指针（一只手）
        move 	    此光标指示某对象可被移动。
        e-resize 	此光标指示矩形框的边缘可被向右（东）移动。
        ne-resize 	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
        nw-resize 	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
        n-resize 	此光标指示矩形框的边缘可被向上（北）移动。
        se-resize 	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
        sw-resize 	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
        s-resize 	此光标指示矩形框的边缘可被向下移动（南）。
        w-resize 	此光标指示矩形框的边缘可被向左移动（西）。
        text 	    此光标指示文本。
        wait 	    此光标指示程序正忙（通常是一只表或沙漏）。
        help 	    此光标指示可用的帮助（通常是一个问号或一个气球）。
    */
    cursor: auto;
}
#hID1{
    /*元素是否可见
        visible 	默认值。元素是可见的。
        hidden 	    元素是不可见的。
        collapse 	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
        inherit 	规定应该从父元素继承 visibility 属性的值。
    */
    visibility: visible;
}
#uID1 li{
    color: green;
    /*如何展示元素
        none 	    此元素不会被显示。
        block 	    此元素将显示为块级元素，此元素前后会带有换行符。
        inline 	    默认。此元素会被显示为内联元素，元素前后没有换行符。
        list-item 	此元素会作为列表显示。
        run-in  	此元素会根据上下文作为块级元素或内联元素显示。
        compact 	此元素会根据上下文作为块级元素或内联元素显示。
        marker
        table 	            此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
        inline-table 	    此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
        table-row-group 	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
        table-header-group 	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
        table-footer-group 	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
        table-row 	        此元素会作为一个表格行显示（类似 <tr>）。
        table-column-group 	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
        table-column 	    此元素会作为一个单元格列显示（类似 <col>）
        table-cell 	        此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
        table-caption 	    此元素会作为一个表格标题显示（类似 <caption>）
    */
    display: inline;/*拓展用来做导航栏*/
}

/*导航栏*/
#nID1{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: orange;
    width: 100px;
    text-align: center;
}
#nID1 li{
    /*没换行符 水平摆放*/
    /*display: inline;*/
    /*padding-left: 8px;*/
    /*padding-right: 8px;*/
}
/*去掉a标签未被点击、已被点击的效果*/
#nID1 a:link, #nID1 a:visited{
    /*去掉下划线*/
    text-decoration: none;
    color: blue;
    background-color: orange;
    text-align: center;
    width: 100px;
    font-weight: bold;
    /*block 此元素将显示为块级元素，此元素前后会带有换行符。*/
    display: block;
}
/*鼠标指向上面时样式发生变化*/
#nID1 a:active, #nID1 a:hover{
    color: white;
    background-color: deepskyblue;
}

/*图片*/
#dID1{
    background-color: aliceblue;
    border: 1px solid #66CCFF;
    width: auto;
    height: auto;
    float: left;
    text-align: center;
    margin: 5px;
}
#dID1 a:hover{
    background-color: #FF0000;
}
#dID1 img{
    width: 250px;
    height: 250px;
    margin: 10px;
    /*透明度   0~1*/
    opacity: 1;
}
#dID1 div.titleClass{
    font-size: 16px;
    margin-bottom: 10px;
}

示意图：