仿写安利中国纯静态页面

最新推荐文章于 2022-08-02 11:01:51 发布

初露微微

最新推荐文章于 2022-08-02 11:01:51 发布

阅读量401

点赞数

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

本文链接：https://blog.csdn.net/wy1948/article/details/125647679

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、前言

学习html+css中，目前阶段为静态页面的编写。

二、html页面代码

这里面主要是div标签的使用和嵌套，ul和li无序列表的使用，img的插入。

<!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="../css/安利中国.CSS" />
  </head>
  <body>
    <!-- logo区域 -->
    <div class="logo layout">
      <div class="lef">
        <img src="../img/4.png" alt="" />
      </div>
      <div class="rig">
        <div class="top">
          <!-- 无序列表 -->
          <ul>
            <li id="shu">安利海外购</li>
            <li>掌上安利</li>
            <li id="shu">安利悦享会</li>
            <li>安利植物研发中心</li>
            <li>各地店铺</li>
            <li id="shu">安利易联网</li>
          </ul>
        </div>
        <div class="bot">
          <!-- 提示文本 -->
          <input type="text" placeholder="搜索" />
        </div>
      </div>
    </div>
    <!-- 目录区域 -->
    <div class="menu">
      <div class="ban layout">
        <ul>
          <li>
            走进安利
            <span></span>
          </li>
          <li>
            产品展馆
            <span></span>
          </li>
          <li>
            公司资讯
            <span></span>
          </li>
          <li>
            企业责任
            <span></span>
          </li>
          <li>
            安利云购
            <span></span>
          </li>
          <li>
            其他
            <span></span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 轮播图区域 -->
    <div class="banner">
      <div class="bigimg layout"></div>
    </div>
    <!-- 热点新闻 -->
    <div class="hotnews layout">
      <div class="top">热点焦点</div>
      <div class="bot">
        <div class="lef">
          <img src="../img/year.png" alt="" />
        </div>
        <div class="cen">
          <p class="p1">颜总新年祝福到！2019一起创！</p>
          <p class="p2">
            2019年啦!在朋友圈说了“再见2018,<br />你好2019”后新的一年...
          </p>
        </div>
        <div class="rig">
          <ul>
            <li id="yuandian">
              未来已来安利2.0向你say
              hi!——安利全球执行副总裁及安利大中华总裁颜志荣先生新年专访
            </li>
            <li>看好健康产业发展前景安利亮相首届中国进博会</li>
            <li>安利式创业:一部手机一个兴趣—群朋友</li>
            <li>潘睦邻(Milind Pant ）先生加入安利并担任首席执行官</li>
            <li>致敬理查:他看待世界的方式，本就与众不同</li>
          </ul>
          <p class="p3">查看更多</p>
        </div>
      </div>
    </div>

    <!-- 底部图片部分 -->
    <div class="pic layout">
      <div class="lef">
        <img src="../img/images/安利（中国）官方网站_03.jpg" alt="" />
        <p>《总裁零距离》微站</p>
      </div>
      <div class="cen">
        <img src="../img/images/安利（中国）官方网站_05.jpg" alt="" />
        <p>安利，值得选择</p>
      </div>
      <div class="rig">
        <img src="../img/images/安利（中国）官方网站_07.jpg" alt="" />
        <p>安利微购热辣上线，车轻创业走起!</p>
      </div>
    </div>
    <!-- 底部文字区域 -->
    <div class="footer">
      <div class="top layout">
        <ul id="ul">
          <li>安利公益基金会</li>
          <li>安利培训中心</li>
          <li>安利云购</li>
          <li>安利轻创业平台</li>
        </ul>
        <ul>
          <li>直销信息披露</li>
          <li>安利教育网</li>
          <li>网站导航</li>
          <li>安利全球官方网站</li>
        </ul>
        <ul>
          <li>联系我们</li>
          <li>隐私政策</li>
          <li>国家工商总局直销行业管理</li>
          <li>企业证照</li>
        </ul>
      </div>
      <div class="bot layout">
        <p class="pbot">
          版权为安利(中国)日用品有限公司所有未经许可不得转载或链接，粤ICP备<span>05013154</span>号
        </p>
      </div>
    </div>
  </body>
</html>

三、css代码

这里主要是一些前期的固定属性设置，内外边距margin和padding的使用取值，段落p标签的一些设置，行高对齐方式，背景图片的平铺和位置…

/* 清除页面自带边距 */
*{margin: 0;padding: 0;}
/* 清除列表项的样式，取消前面的小圆点、数字 */
ul,ol>li{
    list-style: none;
}
/* 取消a标签自带下划线 */
a{text-decoration: none;}
/* 调整图片的对齐方式，解决图片下方三个像素的留白问题 */
img{
    vertical-align: top;
    /* display: block;
    让两个元素类型都是一样，变成块元素 */
}
input{
    /* 取消输入框选中的时候的黑框 */
    outline: none;
}
/* 设置版心公共属性 */
.layout{
    width: 970px;
    margin: 0 auto;
}
/* logo区域 */
.logo{
    height: 111px;
}
.logo>.lef{
    width: 222px;
    height: 111px;
    /* background-color: yellow; */
    float: left;
   
}
.logo>.rig{
    width: 620px;
    height: 111px;
    /* background-color: antiquewhite; */
    float: right;
}
.rig>.top{
    width: 567px;
    height: 56px;
    /* background-color: aqua; */
    float: right;

}
.rig>.bot{
    width: 567px;
    height: 56px;
    /* background-color: hotpink; */
    float: right;
}
.rig .top ul>li{
    color: #ababab;
    float: left;
    /* 设置上下左右内边距 */
    padding: 0px 16px;
    /* 设置行高 */
    line-height: 56px;
    font-size: 12px;
    background-image: url(../img/2.png);
    background-repeat: no-repeat;
    /* 设置右侧居中位置 */
    background-position: right center;
}
/* 取消最后多出的背景 */
#shu{
    color: #ed164b;
    background-image: none;
}
.rig .bot input{
    width: 237px;
    height: 29px;
    border: 1px solid #ababab;
    float: right;   
    /* 首行缩进 */
    text-indent: 14px;
    background-image: url(../img/放大镜.png);
    background-repeat: no-repeat;
    background-position: 95% center;
}
/* 目录区域 */
.menu{
    height: 54px;
    background-color: #143a61;
}
.menu>.ban{
    height: 54px;
    /* background-color: rebeccapurple; */
    
}
.menu .ban ul>li{
    width: 149px;
    float: left;
    color: white;
    font-size: 19px;
    line-height: 54px;
    font-style: "华文行楷";
}
/* 三角形 */
.menu .ban ul>li>span{
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    border-top: 5px solid #869aae;
    /* 设置相对定位 */
    position: relative;
    top: 15px;
}
/* 轮播图区域 */
.banner{
    height: 378px;
    background-color: #e5e5e5;
}
.banner>.bigimg{
    height: 378px;
    background-image: url(../img/bigimg.png);
    background-repeat: no-repeat;
}
/* 热点新闻区域 */
.hotnews{
    height: 237px;
    /* background-color: aqua; */
    border: 1px solid gray;
    margin-top: 24px;
}
.hotnews>.top{
    height: 39px;
    /* background-color: yellow; */
    line-height: 39px;
    font-size: 17px;
    padding-left: 11px;
}
.hotnews>.bot{
    height: 198px;
    /* background-color: #869aae; */
}
.hotnews .bot>.lef{
    width: 276px;
    height: 198px;
    /* background-color: red; */
    float: left;
}
.hotnews .bot .lef>img{
    /* float: right; */
    margin: 1px 17px 22px 10px;
}
.hotnews .bot>.cen{
    width: 266px;
    height: 145px;
    /* background-color: hotpink; */
    border-right: 1px solid gray;
    float: left;
}
.hotnews .bot>.rig{
    width: 427px;
    height: 198px;
    /* background-color: oldlace; */
    float: left;
}
.hotnews .cen>.p1{
    font-size: 20px;
    line-height: 32px;
    /* font-weight: bold; */
    margin-right: 35px;
}
.hotnews .cen>.p2{
    font-size: 9px;
    line-height: 20px;
    /* font-weight: bold; */
    margin-right: 35px;
    color: #666666;
    margin-top: 15px;
}
.hotnews .rig ul>li{
   padding-left: 14px;
   color: #666666;
   font-size: 11px;
   line-height: 26px;
   background-image: url(../img/棱形.png);
   background-repeat: no-repeat;
   background-position: 3px center;
}
/* 设置三个小圆点 */
#yuandian{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hotnews .rig>.p3{
    font-size: 12px;
    float: right;
    margin-right: 32px;
    margin-top:  32px;
    border-bottom: 1px solid red;
}
/* 底部图片部分 */
.pic{
    height: 216px;
    /* background-color: red; */
    margin-top: 20px;
    margin-bottom: 34px;
}
.pic>.lef{
    width: 307px;
    height: 214px;
    /* background-color: aqua; */
    border: 1px solid #cccccc;
    float: left;
}
.pic>.cen{
    width: 307px;
    height: 214px;
    /* background-color: indianred; */
    border: 1px solid #cccccc;
    float: left;
    /* 左右间距 */
    margin-right: 21px;
    margin-left: 21px;
}
.pic>.rig{
    width: 307px;
    height: 214px;
    border: 1px solid #cccccc;
    /* background-color: antiquewhite; */
    float: left;

}
.pic .lef>p{
    /* 解决图片下方三个像素的留白问题vertical-align: top; */
    /* background-color: yellow; */
    line-height: 36px;
    font-size: 17px;
    /* /* padding-left: 27px; */
    /* margin-left: 27px;  */
    /* 首行缩进 */
    text-indent: 25px;
}
.pic .cen>p{
    /* 解决图片下方三个像素的留白问题vertical-align: top; */
    /* background-color: yellow; */
    line-height: 36px;
    font-size: 17px;
    /* /* padding-left: 27px; */
    /* margin-left: 27px;  */
    /* 首行缩进 */
    text-indent: 25px;
}
.pic .rig>p{
    /* 解决图片下方三个像素的留白问题vertical-align: top; */
    /* background-color: yellow; */
    line-height: 36px;
    font-size: 17px;
    /* /* padding-left: 27px; */
    /* margin-left: 27px;  */
    /* 首行缩进 */
    text-indent: 25px;
}
/* 底部文字区域 */
.footer{
    height: 270px;
    background-color: #fbfbfb;
    border-top: 1px solid #cccccc;
}
.footer>.top{
    /* background-color: yellow; */
    height: 145px;
    border-bottom: 1px solid #cccccc;
}
.footer .top ul>li{
    width: 241px;
    float: left;
    line-height: 36px;
    font-size: 16px;
    color: #336699;

}
 #ul{
    margin-top: 40px;
}
.footer>.bot{
    /* background-color: green; */
    height: 63px;
}
.footer .bot>p{
    font-size: 13px;
    line-height: 58px;
    color: #666666;
}
.pbot>span{
    color: #0088cc;
}