2019-08-20 总结(前端)

导航栏/多级菜单

<ul>
  <li>
    <ul>
        家用电器
        <li>冰箱</li>
        <li>电视</li>
        <li>空调</li>
        <li>音响</li>
    </ul> 
  </li>
</lu>

input滑轮和埋点

<input type="range" min="0" max="100">
<input type="hidden" name="" value="">

特殊符号

[图片上传中...(2.png-409467-1566286788015-0)]

2.png

3.png

4.png

5.png

6.png

CSS: 分为内部样式表和外部样式表.通常情况下,主页都是用内部样式表,其他页面用外部样式表.
主页:首页使用内部样式表保证页面加载完成之后能够正常渲染.在head中添加style标签.在里面写css.
几种选择器:在代码列举了几个常用的

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
        <title></title>
        <style>
            /* ID选择器 */
            #foo {
                font-family: "pt mono";
            }
            /* 通配符选择器 */
            * {
                margin: 0;
                padding: 0;
            }
            h1:hover {
                visibility: hidden;
            }
            /* 标签选择器 */
            h1 {
                font-size: 2em;
                font-style: italic;
                font-stretch: condensed;
                letter-spacing: 10px;
                color: white;
                text-align: center;
                line-height: 80px;
                font-family: "times new roman", "HYj1gf" !important;
                overflow: hidden;
                text-shadow: 4px 4px #000000;
                text-decoration: underline;
            }
            /* 并列关系的类选择器 */
            .one, .two, .three, .four, .five, .six, .seven {
                height: 80px;
            }
            /* 类选择器 */
            .one {
                background-color: #ff0000;
                margin: 20px 50px 0 50px;
            }
            .two {
                background-color: orange;
                margin: 0 100px;
            }
            .three {
                background-color: yellow;
                margin: 0 150px;
            }
            .four {
                background-color: green;
                margin: 0 200px;
            }
            .five {
                background-color: cyan;
                margin: 0 250px;
            }
            .six {
                background-color: blue;
                margin: 0 300px;
            }
            .seven {
                background-color: purple;
                margin: 0 350px 20px 350px;
            }
            body {
                width: 100%;
                /* background-image: url(img/1.gif); */
            }
            p {
                text-indent: 32px;
                width: 720px;
                height: 360px;
                overflow: scroll;
                margin: 0 auto;
                border: 10px double #FFA500;
                border-radius: 10px 20px 30px 40px;
                padding: 0 20px;
            }
            /* 样式表的伪元素 */
            p:first-letter {
                font-size: 64px;
            }
            /* p:first-line {
                font-size: 32px;
            } */
            .photo {
                width: 80px;
                height: 80px;
                margin: 0 auto;
                border-radius: 40px 40px 40px 40px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    </body>
</html>

其他页面:其他页面使用外部样式表实现代码复用保持统一风格,放在一个文件下,用标签link加载.

2019-08-20 总结(前端)

2019-08-20 总结(前端)

注意: 样式冲突1.样式表中书写的作用于同一个标签的样式如果没有任何冲突就会叠加

2.如果作用于同一个标签的样式发生了冲突那么按照以下三条原则决定谁生效：

1. 就近原则

2. 具体性原则（ID选择器 > 类选择器 > 标签选择器 > 通配符选择器）

3. 重要性原则（!important）

推荐阅读更多精彩内容