day02

作者: 叶子巨蟹 | 来源:发表于2018-07-10 20:19 被阅读0次

今天学到了什么

1.常用的标题

1.1标题等级

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

1.2插入图片

创建一个文件夹放入所需图片


01.png
<img src="images/test.jpg" alt="">

1.3创建输入框

 <input type="text"><button>百度一下</button>

1.4无序标签

<ul>
        <li>小米手机</li>
        <li>华为手机</li>
        <li>苹果手机</li>
 </ul>

1.5网页链接

 <ahref="https://www.jianshu.com/">百度</a>

2.CSS

 <style>
        P{
            background-color:pink;
            height:50px;
            line-height: 50px;
            color:greenyellow;
            text-align:center;
            font-size:12px;
        }
        </style>
</head>
<body>
    <p>青春打马而过,我们落花成伤</p>
</body>
</html>

3.常用选择器

<style>
    .one{
        color: greenyellow;
    }
    .two{
        background:#eee;
    }
    #three{
        color:yellow;
    }
    h1:hover{
        color:green;
    }
    </style>
</head>
<body>
    <p class="one two">hello world</p>
    <p class="one">hello world</p>
    <p class="one">hello world</p>
    <p id="three">hello world</p>
    <p>hello world</p>
    <h1>hover</h1>
</body>
</html>

4.盒子模型

<style>
        div{
            width:100px;
            height:100px;
            background: red;
            margin-left: 100px;
            margin-top: 100px;

            border-width: 100px;
            border-style: solid;
            border-color: black;

            padding-left: 20px;
            padding-right: 20px;
            padding-top: 30px;
            padding-bottom: 30px;

        }
    </style>
</head>
<body>
    <div>

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

5.水平居中

<style>
        div{
            text-align: center;
            width: 200px;
            height:200px;       
            background-color: red;
            margin-left: auto;
            margin-right:auto;
             }
    </style>
</head>
<body>
    <div>hellow world</div>
    
</body>
</html>

6.样式重置

  <style>
        *{
            margin: 0;padding: 0;}
    </style>
</head>
<body>
    <p>p</p>
    <h1>h1</h1>
    <div>div</div>
    <input type="text">
    
</body>
</html>

相关文章

网友评论

      本文标题:day02

      本文链接:https://www.haomeiwen.com/subject/jhmqpftx.html