HTML与CSS练习一

一、利用html和css作以下界面附上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>豌豆上的公主</title>
    <style>
    /*清除默认内外边距*/
        * {
            padding: 0px;
            margin: 0px;
        }
        /*置背景色   */
        body {
            background: url("images/bg.gif") repeat;
        }
        /* 中间盒子设置 长宽 边框 背景图片 背景色  内边距 字体颜色 盒子居中*/
        div {
            width: 1000px;
            height: 550px;
            border: double 4px red;
            background: url("images/img1.jpg") no-repeat right bottom;
            background-color: #e9fbff;
            padding: 10px;
            color: #6d4629;
            margin: 10px auto;
             /* 段落设置 开头空两格 行高 字体*/
            text-indent: 2em; 
            font: normal normal 14px "宋体";
            line-height: 28px;  
        }
       
        /* 标题设置 居中*/
        h1,h5 {
            text-align: center;
        }
        /* 图片浮动 与文字间隔距离*/
        img {
            float: left;
            margin: 6px;
        }    
    </style> 
</head>
<body>
    <!-- body内容 -->
    <div>
        <h1>豌豆上的公主</h1>
        <h5>作者:安徒生</h5>
        <img src="images/img2.jpg" alt="">
        <p>从前有一位王子，他想找一位公主结婚；但是她必须是一位真正的公主。所以他就走遍了全世界，要想寻到这样的一位公主。可是无论他到什么地方，他总是碰到一些障碍。公主倒有的是，不过他没有办法断定她们究竟是不是真正的公主。她们总是有些地方不大对头。结果，他只好回家来，心中很不快活，因为他是那么渴望着得到一位真正的公主。</p>
        <p>有一天晚上，忽然起了一阵可怕的暴风雨。天空在掣电，在打雷，在下着大雨。这真有点使人害怕！这时，有人在敲门，老国王就走过去开门。
        站在城门外的是一位美丽的公主。可是，天哪！经过了风吹雨打之后，她的样子是多么难看啊！水沿着她的头发和衣服向下面流，流进鞋尖，又从脚跟流出来。她说她是一个真正的公主。
        “是的，这点我们马上就可以考查出来。”老皇后心里想，可是她什么也没说。她走进卧房，把所有的被褥都搬开，在床榻上放了一粒豌豆。于是她取出二十床垫子，把它们压在豌豆上。随后，她又在这些垫子上放了二十床鸭绒被。
        这位公主夜里就睡在这些东西上面。</p>
        <p>早晨大家问她昨晚睡得怎样。“啊，不舒服极了！”公主说，“我差不多整夜没有合上眼！天晓得我床上有件什么东西？有一粒很硬的东西硌着我，弄得我全身发青发紫，这真怕人！”
        现在大家就看出来了，她是一位真正的公主，因为压在这二十床垫子和二十床鸭绒被下面的一粒豌豆，她居然还能感觉得出来。除了真正的公主以外，任何人都不会有这么嫩的皮肤的。
        因此那位王子就选她为妻子了，因为现在他知道他得到了一位真正的公主。</p>
        <p>这粒豌豆因此也就送进了博物馆。如果没有人把它拿走的话，人们现在还可以在那儿看到它呢。</p>
    </div>
</body>
</html>

个人总结

怎么做的在代码里都有注释，这里需要注意的有一下几点：

开头的图片需要使用浮动，并且需要设置一定的外边距，不然图片与文字挨在一起，界面效果会很差、很难看！！！！
使文字垂直居中的方法当时没有记得很清楚，给记成行高等于字体大小了，这是错误的！！！！是行高等于高！！！ line-height=height！！！
因为2的错误，发现了一点新东西！！！
（1）字体大小会影响行高，及行高=字体大小+2px（在行高没有设置的情况下，设置了的话就以设置的为准）；
（2）行高和高度都不会影响字体大小；
（3）行高会影响高度！（如果高度不设置的话）
（4）这个是关于font-size，font，line-height这三个对行间距的影响
a.如果是写font-size和line-height的话，代码前后顺序是无所谓的
b.如果是写font和line-height的话，就得注意了-----因为font是font：font-style font-weight font-size font-family，后两个必写，一般我们不需要前两个的时候都不写了，但是在编写代码的时候，这块会有个小问题影响行间距，具体如下：

如果这样编写的话：
line-height: 28px;  
font: 14px "宋体";

下面是效果：
在这里插入图片描述
但是这样就不会

 /* 第一种方式 必须是这个顺序*/
            font: 14px "宋体";
            line-height: 28px;  
 /* 第二种方式 这个顺序无所谓 就是font要写全*/
            font: normal normal 14px "宋体";
            line-height: 28px;

第一篇博客over，就是第三和第四个问题还需要注意一下~~~

原文链接：https://blog.csdn.net/Wang_jiao_yaa/article/details/93757162