HTML+CSS 制作联系人页面（可自适应）

最新推荐文章于 2024-06-07 14:09:03 发布

啵雨的博客

最新推荐文章于 2024-06-07 14:09:03 发布

阅读量4.8w

点赞数 11

分类专栏： HTML+CSS 小demo效果练习

原文链接：https://www.bilibili.com/video/BV1qT4y1u78q

版权

HTML+CSS 小demo效果练习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML+CSS 制作联系人页面

原视频链接
在这里插入图片描述

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限制图片最大高度是有必要的。