2022.6.17日志

一、主题：完成关于我们页面和登录页面

二、知识点
1.文字下面的下划线

"text-decoration: underline;"

2.使文章中的一些字体不同要用spa标签包含这些问题在用css要是美化

3.使图片填充页面（防止图片太小不足与平铺整体yemian）

background-size: cover;

4.使背景透明

background: rgba(138, 151, 168, 0.5);

5.边框变圆

border-radius: 10px;

6、弹性布局：

display: flex;
    align-items: center;
    justify-content: center;

7、透明度：

background-color: rgba(0, 0, 0, 0.1);

opacity: 0.8;

三.项目页面

嵌套页头页脚
1、页头

<iframe class="inhead" src="head.html" width="1500px"></iframe>

2、页脚

<iframe class="infooter" src="footer.html"></iframe>

3、设置页头页脚样式

.inhead{
                height: 120px;
                border: 0;
            }
            .infooter{
                width: 1500px;
                height: 220px;
                border: 0;
                margin-top: -8px;
            }

主要运用知识下边框下滑虚线 并调整间距

.xhx{
                border-bottom: 1px dashed lightgray;
                margin-top: 10px;
                padding-top: 10px;
            }

下拉框

<select name="" id="" style="margin-left: 35px;">
                    <option value="">河南省</option>
                </select>
                <select name="" id="">
                    <option value="">南阳市</option>
                </select>
                <select name="" id=""style="margin-left: 35px;">
                    <option value="">河南省</option>
                </select>
                <select name="" id="">
                    <option value="">南阳市</option>
                </select>
                <select name="" id="">
                    <option value="">金水区</option>
                </select>

文本框

<textarea name="" id="" cols="30" rows="10" placeholder="贺卡留言:最多30个字，生日牌:最多8个字，请在“贺卡留言”中注明."  style="margin-top: -20px;"></textarea>

文本框中的提醒文字
 

 placeholder=“”

实现步骤

1，用div搭建大型框架使各个部分分成一个一个小部分

在用label和input标签设置主要内容

再用css样式美化

其中主要的有就是把图片和文字设置同一水平线

解决方法：用两个div分别包含文字和图片再使两个div浮动

为了不影响下面步骤要用style="clear: both;"清除浮动

登录页面步骤

1.先给body设置背景图和平铺

2.用div包含需要的内容，css样式美化

如

<div class="dl">
                    <div class="yhm">
                        <label for="">用户名：</label>
                        <input type="text">
                    </div>
                    <div class="mm">
                        <label for="">密&nbsp;&nbsp;&nbsp;码：</label>
                        <input type="text">
                    </div>
                    <div class="btn">
                        <input type="button" value="登录">
                        <input type="button" value="重置">
                    </div>
                </div>
label{
            color: aliceblue;
        }
        input{
            border-radius: 10px;
            height: 30px;
            background-color: #b6b1c4;
            border: 1px solid #b6b1c4;
        }
        .btn input{
            height: 40px;
            width: 150px;
            margin-left: 20px;
            background-color: #7194cf;
            color: white;
            font-size: 20px;
        }

四、问题

1.搭建页尾部框架（a,div,span,img,footer等）
（1）问题：如何是框架并列
方法：使两个div框架浮动并齐
（2）问题：如何把字体化线
方法：用text-decoration: line-through;"