简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 联系方式页面-2018年4月30日8点30分
Blogger Information
Blog 32
fans 0
comment 0
visits 23737
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
联系方式页面-2018年4月30日8点30分
小李广花荣
Original
973 people have browsed it

  1. 下面将展示我写的联系方式页面代码及效果图

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="static/css/header.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <link rel="stylesheet" href="static/css/single.css">
</head>
<body>
<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="index.html">首页</a></li>
            <li class="item"><a href="news.html">新闻</a></li>
            <li class="item"><a href="contact.html">联系方式</a></li>
        </ul>
    </div>
</div>
<div class="container">
    <div class="banner">
        <img src="static/images/banner.jpg" alt="">
    </div>
    <div class="wrap">
        <div class="main">
            <h3>联系方式</h3>
            <dl>
                <dt>电话: +86-010-56778899</dt>

                <dt>手机: +86-13801090876321</dt>

                <dt>地址: 北京市通州区京沈高速旁</dt>

                <dt>微信: 与手机同号</dt>
            </dl>
        </div>
    </div>
    <div class="left">
        <h3>栏目</h3>
        <div class="category">
            <ul>
                <li><a href="">公司新闻</a></li>
                <li><a href="">最新产品</a></li>
                <li><a href="">关于我们</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </div>

    </div>

</div>
<div class="footer">
    <div class="content">
        <p>
            <a href="">我的博客</a>
            <a href="">山东省</a>
            <a href="">21111</a>
        </p>
    </div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

.container {
    width: 1000px;

    margin: 5px auto;
    overflow: hidden;
}

.wrap {

    width: inherit;

    min-height: 800px;
}



.left {
    width: 280px;
    min-height: 800px;
}

.wrap, .left, .right {
    float: left;
}


.left {

    margin-left: -100%;
}

.main {
    padding-left: 280px;
    margin:  10px 100px auto;
}

.main h3 {

    text-align: center;
    border-bottom: 1px solid;

}



/*左侧样式*/
.left h3 {
    margin: 10px auto;
    text-align: center;
    border-bottom: 1px solid;
}

.left ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.left li a {
    display: inline-block;
    width: 100%;
    height: 50px;
    background-color: black;
    color: white;
    text-decoration-line: none;
    line-height: 50px;
    text-align: center;
}

.left li a:hover {
    background-color: red;
    font-size: 1.1em;
}
.main dl{
    padding: 0 20px;
    text-align: left;
    line-height: 1.5em;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ图片20190505181357.png

上面运用了双飞翼布局，去掉了右侧模块

2.本文学到了很多的东西

 （1）双飞翼的布局

  （2）简单企业站的规划运用

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！