css基本属性-伸缩盒及浮动导航

程序员文章站 2022-03-03 23:38:55

...

css基本属性-伸缩盒及浮动导航

css基本属性


<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 字体，大小，粗细，字形 */
        p:nth-child(1) {
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;
            font-weight: bold;
            font-style: italic;
        }

        /* 字符间距 */
        p:nth-child(2) {
            letter-spacing: .5rem;
        }

        /* 单词间距 */
        p:nth-child(3) {
            word-spacing: .5rem;
        }

        /* 透明度 */
        p:nth-child(4) {
            opacity: .3;
        }

        /* 内容溢出 scroll 滚动，auto 自动 */
        p:nth-child(5) {
            width: 70px;
            height: 35px;
            overflow-y: hidden;
            border: 1px solid olive;
            background-color: #ccc;
        }

        /* 文字同一行显示，超出隐藏，溢出文本显示省略号 */
        p:nth-child(6) {
            width: 90px;
            overflow-x: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        /* 内容居中 */
        p:nth-child(7) {
            width: 200px;
            height: 50px;
            background-color: palevioletred;
            border: 1px solid purple;
            text-align: center;
            line-height: 50px;
        }

        /* 文本修饰 */
        p:nth-child(8) {
            background-color: #ccc;
            /* 文本缩进 */
            text-indent: 2rem;
            width: 120px;
            /* 长单词超过边界换行 */
            word-wrap: break-word;
        }

        p:nth-child(8)>span {
            /* 红色下划线  */
            text-decoration: underline red;
            /* 删除线 */
            /* text-decoration: line-through purple; */
        }
        ul {
            list-style-type:decimal;
        }

        body{
            /* 等价 */
            /* background-color: #f6f6f6;
                background-image: url(https://www.w3school.com.cn/i/eg_bg_01.gif);
                background-repeat: no-repeat;
                background-position: center;
                background-attachment: fixed; */
            background: #f6f6f6 url(https://www.w3school.com.cn/i/eg_bg_01.gif) no-repeat center fixed;
        }
        body>ul{
            width:200px;
            /* 转有序列表 */
            list-style: decimal;
            /* list-style: inside url(https://www.w3school.com.cn/i/eg_arrow.gif); */
            /* 等价 */
            list-style-position: inside;
            list-style-image: url(https://www.w3school.com.cn/i/eg_arrow.gif);
        }
        body>ul>li{
            background-color: salmon;
            padding: 8px;
        }
    </style>
</head>

<body>
    <p>Test text one.</p>
    <p>Test text two.</p>
    <p>Test text three.</p>
    <p>Test text four.</p>
    <p>Test text five.</p>
    <p>Test text six.</p>
    <p>Test text seven.</p>
    <p>test <span>texttesttesttexttest</span> eight.</p>
    <ul>
        <li>list-style-one</li>
        <li>list-style-two</li>
        <li>list-style-three</li>
    </ul>
</body>

</html>

css基本属性-伸缩盒及浮动导航

伸缩盒及浮动定位导航


<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body>header {
            margin: 0 auto;
            width: 600px;
        }

        nav>ul {
            display: flex;
            height: 35px;
            justify-content: center;
            align-items: center;
            background-color: thistle;
        }

        nav>ul>li {
            padding: 5px 10px;
            position: relative;
        }

        ul>li {
            list-style: none;
        }

        ul>li>ul {
            position: absolute;
            left: -30px;
            top: 32px;
            width: 70px;
            display: none;
        }

        ul>li:hover>ul {
            display: block;
        }

        ul>li>ul>li {
            background-color: tomato;
            padding: 5px 8px;
        }

        ul>li>ul>li:hover {
            background-color: violet;
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="" title="首页">首页</a></li>
                <li><a href="" title="分类">分类</a>
                    <ul>
                        <li>分类一</li>
                        <li>分类二</li>
                        <li>分类三</li>
                    </ul>
                </li>
                <li><a href="" title="标签">标签</a></li>
                <li><a href="" title="留言">留言</a></li>
            </ul>
        </nav>
    </header>
</body>

</html>

css基本属性-伸缩盒及浮动导航

上一篇： php yield是什么意思？

下一篇： php如何实现简单购物车