HTML-CSS常见属性

最新推荐文章于 2024-07-15 14:54:05 发布

追梦女孩ii

最新推荐文章于 2024-07-15 14:54:05 发布

阅读量378

点赞数 6

分类专栏： HTML 文章标签： css css3 前端 html python 数据分析 numpy

本文链接：https://blog.csdn.net/m0_61566562/article/details/140032678

版权

HTML 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #box {
            width: 200px;
            height: 100px;
            background: orange;

            /*      文本属性      */
            color: green;
            font-size: 30px;
            font-family: "黑体";

            /*      加粗      */
            /*      font-weight  : bold / bolder / normal                */
            font-weight:bold;
            /*      下划线      */
            /*      text-decoration  : None / underline /                 */
            text-decoration: underline;
            /*      斜体      */
            font-style: italic;
            font-style:oblique;

            /*      水平居中      */
            text-align: center;
            /*      垂直居中      */
            line-height: 100px;


            /*      列表属性      */
            ul {
            /* list-style-image:url('images/1.png')*/
            /*  list-style: none/square              */
                list-style: none;
            /*       padding  内边距 可设置为0     */
                padding: 0;
            }


            /*    背景    */
        #box2 {
            width: 200px;
            height: 200px;
            border: 1px solid blue;

            /*       background: orange;     */
            /*    背景图    */
            background-image: url('images/1.png');
            /* 重复 */
            background-repeat:no-repeat;
            background-repeat:repeat-x;
            background-repeat:repeat-y;

            /* 大图片 */
            background-image: url('images/盒子模型.jpg');
            background-attachment: fixed;
            background-attachment: scroll;

        }

        body {
            height: 2000px
        }
    </style>

</head>
<body>
    <div id = "box"> box </div>
    <hr>
    <ul>
        <li>榴莲</li>
        <li>苹果</li>
        <li>山竹</li>
        <li>荔枝</li>
    </ul>

    <hr>
    <div id = "box2">  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #box {
            width: 200px;
            height: 100px;
            background: orange;

            /*      文本属性      */
            color: green;
            font-size: 30px;
            font-family: "黑体";

            /*      加粗      */
            /*      font-weight  : bold / bolder / normal                */
            font-weight:bold;
            /*      下划线      */
            /*      text-decoration  : None / underline /                 */
            text-decoration: underline;
            /*      斜体      */
            font-style: italic;
            font-style:oblique;

            /*      水平居中      */
            text-align: center;
            /*      垂直居中      */
            line-height: 100px;


            /*      列表属性      */
            ul {
            /* list-style-image:url('images/1.png')*/
            /*  list-style: none/square              */
                list-style: none;
            /*       padding  内边距 可设置为0     */
                padding: 0;
            }


            /*    背景    */
        #box2 {
            width: 200px;
            height: 200px;
            border: 1px solid blue;

            /*       background: orange;     */
            /*    背景图    */
            background-image: url('images/1.png');
            /* 重复 */
            background-repeat:no-repeat;
            background-repeat:repeat-x;
            background-repeat:repeat-y;

            /* 大图片 */
            background-image: url('images/盒子模型.jpg');
            background-attachment: fixed;
            background-attachment: scroll;

        }

        body {
            height: 2000px
        }
    </style>

</head>
<body>
    <div id = "box"> box </div>
    <hr>
    <ul>
        <li>榴莲</li>
        <li>苹果</li>
        <li>山竹</li>
        <li>荔枝</li>
    </ul>

    <hr>
    <div id = "box2">  </div>
</body>
</html>