今天又是充满希望的一天，实训第三天。美滋滋○|￣|_ (╯‵□′)╯︵┻━┻。还是html css。

本文链接：https://blog.csdn.net/zjy1070168724/article/details/75040219

今天是实训的第三天，学习已慢慢进入正轨。
刚开始接着昨天学习内容学习选择器。
元素选择器
1.子元素选择器
H1>strong{color: red;}
找到h1下的直接子元素是strong的
H1 strong{color: red;}
迭代找好下面的所有strong，即找到儿子辈，又找孙子辈。
2.相邻兄弟元素选择器
H1+p{color: red;}
获取div后面的第一个兄弟元素
图片引入

background-image: url(img/验证码.png);
Background-size: 100% 100%;/填充的大小/
background-repeat: no-repeat; /不重复/
background-repeat: repeat-x;/水平重复/
background-repeat: repeat-y;/竖直重复/
background-position: center center;/背景图片定位，两个参数我们可以写百分比或具体像素或设定好的参数/
Align
text-align: center;/文字水平居中/
Line-height:100px;/文字垂直居中，文字搞等于外边距高/
margin:10% auto;/div水平居中，第一个参数为距离顶端高度，auto：自动左右两个边进行居中/
CSS样式
text-decoration: none; /没有样式/
text-decoration: underline; /下划线/
text-decoration: overline; /上划线/
text-decoration: line-through; /横穿线/
text-decoration: blink; /文本闪烁/
text-decoration: overline underline;/既有上划线又有下划线/
.text{font-family: “微软雅黑”;”宋体,仿宋_gb2312”}
/如果第一个字体不识别，则使用第二个字体/
列表样式
list-style-type: none; 没有样式
list-style-image: url(img/按钮.png); 加图片
list-style-position: inside; 位置
list-style-type: circle; 添加圆圈标识
半透明：
opacity: 0.3; 数值从零到一，一为正常值。
Border-left：10px dashed;左边界宽度为10的虚线
内边距：内部文字距离边框的距离。
Padding-right 右内边距
Padding-left 左内边距
Padding-top 上内边距
Padding-bottom 下内边距
外边距：div到外边框的距离
Margin-top 上边距
Margin-left 左边距
Margin-right 右边距
Margin-bottom 下边距
如下一个样例，有问题别找我orz。。。

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                border: 1px solid blue;
                text-align: center;
            }
            #ss
            {
                margin-bottom: 20px; 实现上下表框相差20px
            }
        </style>
    </head>
    <body>
        <div id="ss">
            wogan
        </div>
        <div id="sm">
            wocc
        </div>
    </body>

浮动
float-right:该区域“浮起”让下个区域放到该位置。要一起浮动。
今天通过一天学习了解了许多知识，但是需要进一步熟悉。

用浮动的知识做了一个简单格式
代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #p2{
                height: 250px;
            }
            #p1{

                background-image: url(img/按钮.png);
                width: 150px;
                height: 250px;
                border: 2px solid black;
                float: left;
            }

        </style>

    </head>
    <body>
     <h1>新闻哈哈</h1>




     <div id="p2">
        <div id="p1">

        </div>
        <h2>gaosiqing</h2>
        <p>qqqqqqqqq</p>
        <p>qqqqqqqqqqqqqqqq</p>
        <p>qqqqqqqqq</h3>
     </div>

     <ul type="circle">
        <li>less practise</li>
        <li>data</li>

    </body>
</html>