模拟安利首页

Mengxy灬

已于 2022-05-07 09:40:48 修改

阅读量278

点赞数

于 2022-04-05 17:51:35 首次发布

本文链接：https://blog.csdn.net/qq_47548037/article/details/123973560

版权

网页设计安利公司导航菜单产品展示网页布局

关键词由CSDN通过智能技术生成

效果图：

index.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>Document</title>

    <link rel="stylesheet" href="css/index.css" />

  </head>

  <body>

    <div class="header con">

      <div class="logo"></div>

      <div class="header-right">

        <ul>

          <!-- <div></div> -->

          <li><a class="last active">安利海外购</a></li>

          <li><a>掌上安利</a></li>

          <li><a>安利悦享</a></li>

          <li><a class="active">安利海外研发中心</a></li>

          <li><a>各地店铺</a></li>

          <li><a class="active">安利易联网</a></li>

        </ul>

      </div>

      <div class="search">

        <input type="text" placeholder="搜索" class="leftinput" />

        <input type="submit" value="" class="rightinput" />

      </div>

    </div>

    <div class="nav con">

      <div>

        <ul class="navlist con">

          <li>走进安利</li>

          <li>产品展览</li>

          <li>公司咨询</li>

          <li>企业展览</li>

          <li>安利云购</li>

          <li>其他</li>

        </ul>

      </div>

    </div>

    <div class="banner"></div>

    <div class="list con">

      <div class="item">

        <img src="img/安利值得.png" class="img" />

        <p>安利值得选择</p>

      </div>

      <div class="item">

        <img src="img/老人.png" class="img" />

        <p>《总裁零距离》微站</p>

      </div>

      <div class="item">

        <img src="img/安利式体验.png" class="img last" />

        <p>安利式体验，零距离接触</p>

      </div>

    </div>

    <div class="footer">

      <div class="up con">

        <ul class="up_one">

          <li><a>安利公益基金会</a></li>

          <li><a>安利培训</a></li>

          <li><a>安利云购</a></li>

        </ul>

        <ul class="up_one">

          <li><a>直销信息披露</a></li>

          <li><a>安利教育网</a></li>

          <li><a>网站导航</a></li>

        </ul>

        <ul class="up_one">

          <li><a>联系我们</a></li>

          <li><a>企业认证</a></li>

          <li><a>隐私声明条款</a></li>

        </ul>

        <ul class="up_one">

          <li><a>联系我们</a></li>

          <li><a>企业认证</a></li>

          <li><a>隐私声明条款</a></li>

        </ul>

      </div>

      <div class="con">

        <p>

          版权为安利(中国)日用品有限公司所有，未经过许可不得转载或链接，粤ICP备

          <span>05013154</span>

          号

        </p>

      </div>

    </div>

  </body>

</html>

css代码：

* {

  margin: 0;

  padding: 0;

}

ul {

  list-style: none;

}

.con {

  width: 966px;

  margin: 0 auto;

}

.header {

  height: 110px;

  /* background: yellow; */

}

.logo {

  width: 265px;

  height: 110px;

  background-image: url(../img/安利.png);

  float: left;

}

.header-right {

  float: right;

}

.header-right ul {

  height: 44px;

  margin-top: 10px;

  line-height: 44px;

}

.header-right li {

  float: right;

}

.header-right li a {

  border-right: 1px solid #b2c7ea;

  padding: 0 13px;

  font-size: 13px;

  color: gray;

}

.header-right .last {

  border: 0;

  padding-right: 0;

}

.header-right li .active {

  color: red;

}

.search {

  width: 234px;

  height: 28px;

  border: 1px solid gray;

  float: right;

}

.search input {

  border: 0;

  outline: none;

}

.search .leftinput {

  padding-left: 14px;

  float: left;

  width: 195px;

  height: 28px;

}

.search .rightinput {

  float: right;

  width: 24px;

  height: 28px;

  background: url(../img/搜索.png);

  background-repeat: no-repeat;

  /* background-position: right center; */

}

.nav {

  width: 100%;

  height: 53px;

  line-height: 53px;

  border-top: 1px solid black;

  background-color: darkblue;

}

.navlist {

  color: white;

  margin: 0 auto;

}

.navlist li {

  padding-right: 76px;

  float: left;

  text-align: center;

}

.navlist li:hover {

  color: aqua;

  /* background-color: ; */

}

.banner {

  height: 500px;

  background: url(../img/哈弗.png);

  background-repeat: no repeat;

  background-position: center center;

  background-size: cover;

}

.list {

  margin-top: 51px;

  margin-bottom: 35px;

  height: 231px;

  /* background: yellow; */

}

.item {

  height: 229px;

  width: 300px;

  border: 1px solid gray;

  margin-right: 19px;

  float: left;

}

.img {

  width: 300px;

  height: 190px;

}

.item p {

  height: 41px;

  line-height: 41px;



  text-align: center;

  font-size: 15px;

  color: black;

  /* background-color: #f6f7f8; */

}

.item img {

  display: block;

}

.item .last {

  margin-right: 0;

}

.item p:hover {

  color: #3872d6;

}

.footer {

  height: 206px;

  border: 1px solid #cccccc;

}

.up {

  width: 100%;

  margin: 0 auto;

  padding-left: 300px;

  color: #3872d6;

  font-size: 12px;

  /* border-bottom: 1px solid gray; */

}

.up_one {

  padding-left: 50px;

  line-height: 35px;

  padding-bottom: 20px;

  width: 200px;

  float: left;

}

.footer ul {

  border-bottom: 1px solid gray;

}

.footer p {

  height: 61px;

  line-height: 61px;

  padding-left: 30px;

  font-size: 12px;

}

.footer p span {

  color: #3872d6;

}

Mengxy灬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
模拟安利首页

效果图：index.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...
复制链接

扫一扫