简单静态页面实现完整代码（html+css）--安利首页

最新推荐文章于 2024-05-17 00:26:08 发布

coffee girl~

最新推荐文章于 2024-05-17 00:26:08 发布

阅读量3.3k

点赞数 5

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/cunhong/article/details/124951776

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

静态页面图片
html代码
css代码
总结

静态页面图片

图片来源于@蒻蒻博主（我犯懒了，没有自己下载，嘿嘿嘿）
图片来源于@蒻蒻博主

html代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安利</title>
    <link rel="stylesheet" href="anli.css">
</head>

<body>
    <div class="header common">
        <div class="logo"></div>
        <div class="headerright">
            <ul>
                <li><a class="col">安利海外购</a></li>
                <li><a>掌上安利</a></li>
                <li><a class="col">安利悦享荟</a></li>
                <li><a>安利植物研发中心</a></li>
                <li><a>各地店铺</a></li>
                <li><a class="last col">安利易联网</a></li>
            </ul>
            <div class="search">
                <input type="text" placeholder="搜索" class="left">
                <input type="submit" value="" class="right"></input>
            </div>
        </div>
    </div>
    <div class="nav">
        <ul class="common">
            <li>走进安利</li>
            <li>产品展馆</li>
            <li>公司资讯</li>
            <li>企业责任</li>
            <li>安利云购</li>
            <li>其他</li>
        </ul>
    </div>
    <div class="banner"></div>
    <div class="list common">
        <div>
            <img src="../img/p1.png">
            <!-- img无repeat属性,background有repeat属性，且难以调节调整p标签位置 -->
            <p>《总裁零距离》微站</p>
        </div>
        <div>
            <img src="../img/P2.png">
            <p>安利，值得选择</p>
        </div>
        <div class="end">
            <img src="../img/p3.png">
            <p>安利式体验，全新为您</p>
        </div>
    </div>
    <div class="footer">
        <div class="common">
            <!-- 如无div,ul是100%的宽 -->
            <ul>
                <li>安利公益基金会</li>
                <li>安利培训中心</li>
                <li>安利云购</li>
                <li>安利轻创业平台</li>
                <li>直销信息披露</li>
                <li>安利教育网</li>
                <li>网址导航</li>
                <li>安利全球官方网站</li>
                <li>联系我们</li>
                <li>企业证照</li>
                <li>隐私声明条例</li>
                <li>国家工商总局直销行业管理</li>
            </ul>
            <p>版权为安利（中国）日用品有限公司所有未经许可不得转载或链接，粤<span style="color: #c6b2da;">ICP05013154</span>备号</p>
        </div>


    </div>
</body>

</html>

css代码


```css
* {
    padding: 0;
    margin: 0;
}

.common {
    width: 807px;
    margin: 0 auto;
}

.header {
    height: 92px;
    border-top: 1px solid #bfbfbf;
    /* background-color: yellow;  */
}

.logo {
    width: 217px;
    height: 92px;
    background-image: url(../img/anlilogo.png);
    float: left;
}

.headerright {
    float: right;
}

/* 整体向右浮动 */
.headerright ul {
    list-style-type: none;
    padding-top: 8px;
    height: 38px;
    line-height: 38px;
}

.headerright ul li {
    float: left;
}

.headerright li a {
    padding-left: 11px;
    padding-right: 11px;
    /* 或者padding: 0 11px; */
    font-size: 11px;
    border-right: 1px solid #b2c7ea;
    color: #ababab;
}

/* a链接只是不可以设置宽高，可以设置padding,border */
.headerright .col {
    color: #eb6ca1;
}

/* 注意优先级 */
.headerright .last {
    padding-right: 0;
    border: 0;
}

.search {
    float: right;
    width: 195px;
    height: 23px;
    border: 1px solid #d1d1d1;
}

.search input {
    border: 0;
    outline: none;
    /* 去除input边框 */
}

.search button {
    border: 0;
}

.search .left {
    padding-left: 12px;
    width: 167px;
    height: 23px;
    float: left;
}

.search .right {
    float: right;
    height: 23px;
    width: 16px;
    background: url(../img/searchlogo.png) no-repeat left center;
}

.nav {
    height: 44px;
    /* width: 100%; */
    background: #0c345c;
    border-top: 1px solid #657588;
    border-bottom: 1px solid #657588;
}

.nav ul {
    list-style-type: none;
    height: 44px;
    line-height: 44px;
}

.nav ul li {
    float: left;
    list-style-type: none;
    color: white;
    font-size: 13px;
    padding-right: 63px;
}

.banner {
    /* width: 100%; */
    height: 316px;
    background: url(../img/banner.png) no-repeat center;
}

.list {
    margin-top: 42px;
    height: 178px;
    /* background: yellow; */
}

.list div {
    float: left;
    height: 176px;
    width: 254px;
    border: 1px solid #ffffff;
    margin-right: 15px;
}

.list div p {
    font-size: 13px;
    padding-left: 29px;
    height: 41px;
    line-height: 41px;
    /* padding: 0; */
}

.list .end {
    margin-right: 0;
}

.list div img {
    display: block;
}

/* 解决p标签和img之间缝隙 */
.footer {
    border-top: 1px solid #cccccc;
    height: 181px;
    background: url(../img/bgjb.png);
    /* 背景图片作为背景色，1px */
}

.footer ul {
    height: 69px;
    border: 1px solid #ecebeb;
    line-height: 23px;
    padding-top: 25px;
    padding-bottom: 26px;
    list-style-type: none;
}

.footer li {
    padding-left: 24px;
    width: 176px;
    float: left;
    font-size: 11px;
    color: #000078;
}

.footer p {
    padding-top: 20px;
    padding-left: 24px;
    font-size: 10px;
    color: #000000;
}