day2

作者: 君_5372 | 来源:发表于2018-07-10 20:33 被阅读0次
    1.常用的HTML标签
    `h1~h6` 标题标签 独占一行 粗体 (逐渐变小)
    `p` 段落标签 成段展示 独占一行
    `img` 图片标签 特殊单标签
    `src`--单标签的属性
       功能:指定图片所在位置
    `alt`--当图片加载不出来,用来描述图片的
    `ul` 无序列表
    `li` 列表项
    `a` 链接标签
    `herf`--指定你所要访问的网址
    `dl`--定义列表
    `dt`--定义的术语
    `dd`--定义的描述
    
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>6级标题</h6>
    
    01.png
     `<p>hello world</p>`
    
    02.png
     <img src="[images/test.jpg](images/test.jpg)" alt="这个一个美女"> <br> 
    <input type="text"><button>百度一下</button> |
    
    03.png
    <ul>
               <li>小米手机</li>
               <li>华为手机</li>
               <li>苹果手机</li>
               <li>苹果手机</li>
               
           </ul>
    <a href="[https://www.jianshu.com/](https://www.jianshu.com/)">简书</a> 
    <div>div</div>
    <dl>
               <dt>HTML</dt>
               <dd>负责网页的结构</dd>
           </dl>
    
    
    04.png
    2.css样式
    `color`--文字的颜色
    `line-height`--行高会文本在行高中垂直居中
    `background-color`:设置背景颜色
    `text-align`:设置文本的对齐方向
    `font-size`:设置字体大小
     `margin:0;padding:0 `样式重置 (写样式前首先要进行样式重置)
    
     p{
                background-color: pink;
                height:50px;
                line-height: 50px;
                color:#fff;
                text-align: center;
                font-size: 12px;
            }
     <p>不下巨海无以的无上珠宝,不入污泥无以生境界莲花</p>
    
    05.png
    3.css常用选择器
    `p{} `元素选择器  慎重使用
    `.+ClassName{}`
    特点:
    1.可以给多个标签相同的class名
    2.可以给一个标签多个class名
    `#+idName{}`
    特点:每一个id名都是唯一的
    --写样式的时候不要使用id选择器
    伪类选择器
    `element:hover{}`
    
    4.盒子模型
    `margin`--可以改变元素的位置
    `borde`r -- 改变元素的宽度
    `padding` --改变元素的`width,height`
    
     div{
                width:100px;
                height:100px;
                background:red;
                margin-left: 100px;
                margin-top: 100px;
    
                border-width: 10px;
                border-style: solid;
                border-color: black;
    
                padding-left:20px;
                padding-right:20px;
                padding-top: 30px;
                padding-bottom: 30px;
            }
    
    06.png
    5.水平居中
    `margin-left: auto;`
    `margin-right: auto;`
        元素水平居中
    
     div{
                text-align: center;
                width:200px;
                height:200px;
                background-color: red;
                margin-left: auto;
                margin-right: auto;
            }
    
    07.png

    相关文章

      网友评论

          本文标题:day2

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