HTML+CSS 制作联系人页面(可自适应)

HTML+CSS 制作联系人页面

原视频链接
HTML+CSS 制作联系人页面(可自适应)_第1张图片
HTML+CSS 制作联系人页面(可自适应)_第2张图片
HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title>Document</title>
    <link href="index.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
    //这个引用的是font-awesome图标库 网址为:https://cdnjs.com/libraries/font-awesome 选择css分栏,复制第一个
</head>

<body>
    <div class="contact-page">
        <h2>Get in touch</h2>
        <div class="contact-info">
            <div class="item">
                <i class="icon fas fa-home"></i> 中国。。。。。。。
                //font-awesome 矢量库引用方式 fas fa-xxx
            </div>
            <div class="item">
                <i class="icon fas fa-phone"></i> 1561561651
            </div>
            <div class="item">
                <i class="icon fas fa-envelope"></i> 156156165@qq.com
            </div>
            <div class="item">
                <i class="icon fas fa-clock"></i> 七点半
            </div>
        </div>
        <form action="" class="contact-form">
        //用form表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等,包含 menus、textarea、fieldset、legend 和 label 元素还可以用于用于向服务器传输数据
            <input type="text" class="textb" placeholder="your name">
            <input type="email" class="textb" placeholder="your email">
            <textarea placeholder="your message"></textarea>
            <input type='submit' value='send' class='btn'>
        </form>
    </div>
</body>

</html>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(bg.jpg) no-repeat center;
    background-size: cover;
    //把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
}

.contact-page {
    width: 100%;
    max-width: 1400px;
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

h2 {
    width: 100%;
    margin-bottom: 80px;
    text-transform: uppercase;
    font-size: 40px;
}

.contact-info,
.contact-form {
    flex: 1;
}

.item {
    margin-bottom: 40px;
    font-size: 16px;
}

.item .icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: skyblue;
    color: #fff;
    border-radius: 50%;
    margin-right: 5px;
}

.contact-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.textb {
    width: calc(50% - 10px);
    /* 每一个textb盒子的宽度始终保持父盒子宽度一半减去10px */
    height: 40px;
    background-color: black;
    border: none;
    color: #fff;
    padding: 20px;
    margin-bottom: 20px;
}

textarea {
    width: 100%;
    min-height: 200px;
    max-height: 400px;
    resize: vertical;
    //用户可调整元素的高度。
    background-color: black;
    border: none;
    color: #fff;
    padding: 20px;
    margin-bottom: 20px;
}

.btn {
    margin-left: auto;
    width: 120px;
    height: 40px;
    text-transform: uppercase;
    background-color: skyblue;
    border: none;
    border: 2px solid skyblue;
    transition: 0.3s linear;
    cursor: pointer;
}

.btn:hover {
    background-color: transparent;
    color: skyblue;
}

@media screen and (max-width:800px) {
    .contact-page {
        max-width: 800px;
    }
    h2 {
        font-size: 40px;
        margin-bottom: 40px;
    }
    .contact-info,
    .contact-form {
        flex: 100%
    }
    .textb {
        width: 100%;
    }
}

----------------------------------------------------------------------------------------------------

Css min-height应用地方解释
我们有时设置一个对象盒子时候避免对象没有内容时候不能撑开,但内容多少不能确定所以又不能固定高度,这个时候我们就会需要css来设置min-height最小高度撑高对象盒子。当内容少时候最小高度能将内容显示出,如果内容多余最小高度能装下时候,对象也会再随内容增多而增高。

Css max-height最大高度应用解释
此属性很少使用,可能是为了避免内容太多将高度撑太高影响布局美化统一,这个时候我们设置最大高度限制。比如一个table tr td表格对象里装一个图片,而图片高度不确定,如果太高了不想图片撑破tr td表格,这个时候通过css max-height限制图片最大高度是有必要的。

你可能感兴趣的:(HTML+CSS,小demo效果练习)