尚合手机首页

最新推荐文章于 2024-10-04 00:46:18 发布

改名字要2个币

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量133

点赞数 2

文章标签：前端 css3 bootstrap javascript

本文链接：https://blog.csdn.net/m0_58545472/article/details/130381052

版权

主要技术有HTML5+CSS3+bootstrap(轮播图)

效果图（轮播图会动）

bootstrap压缩包和图片的连接在最下方

文件夹存放图

HTML5部分

<!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>

    <!-- bootstrap轮播图框架,文件引入顺序不要变 
            bootstrap压缩包和需要的图片在下方，解压到指定文件夹就行-->
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
    <script src="./bootstrap-3.4.1-dist/js/jquery-3.6.4.js"></script>
    <script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>

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

</head>
<body>

  <!-- 头部 -->
    <header>
        <div class="header_main">
            <div class="header_left"></div>
            <div class="header_right">
                <input type="search" class="susokuan" placeholder="请输入关键字..." name="top">
                <div class="fadajing"></div>
            </div>  
        </div>
    </header>

    <!-- 脖子 -->
    <nav >
        <div class="nav_main">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">智能手机</a></li>
                <li><a href="#">平板电脑</a></li>
                <li><a href="#">配件</a></li>
                <li><a href="#">服务支持</a></li>
                <li><a href="#">关于尚合</a></li>
            </ul>
        </div>
    </nav>

    <!-- 轮播图 -->
    <section>
        <div class="section_main">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>
              
                <!-- Wrapper for slides 图片-->
                <div class="carousel-inner" role="listbox">
                  <div class="item active">
                    <img src="./images/捕获.PNG" alt="...">
                    <div class="carousel-caption">
                      <!-- 图片下方可以写文字 -->
                    </div>
                  </div>
                  <div class="item">
                    <img src="./images/捕获.PNG" alt="...">
                    <div class="carousel-caption">
                      <!-- 图片下方可以写文字 -->
                    </div>
                  </div>
                  <div class="item">
                    <img src="./images/捕获.PNG" alt="...">
                    <div class="carousel-caption">
                      <!-- 图片下方可以写文字 -->
                    </div>
                  </div>
                
                </div>
              
                <!-- Controls 箭头-->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
        </div>
    </section>

    <!-- 轮播图下面的东西 -->
    <div class="info">
        <div class="info_main">
            <div class="info_left"><b>最新公告：</b>尚合Aone智能手机入网证已经获工信部门审批下发。尚合官方</div>
            <div class="info_right"></div>
        </div>
    </div>

    <!-- 腿 -->
    <div class="price">
      <ul class="price_main">
        <li>
          <h3>新品发布</h3>
          <div></div>
        </li>

        <li>
          <h3>新闻中心</h3>
          <div>
            <dl>
              <dt><b>致歉公告</b></dt>
              <dd>首批尚合Aonet已全部售馨!</dd>
              <dd>【媒体报导】国产高性价比 尚合Aonet四核手机评测</dd>
              <dd>我司产品已经通过了国家强制性产品3C认证</dd>
              <dd>尚合Aone智能手机入网证已经获工信部门审批下发.</dd>
              <dd>我司通过ISO9001:2008国际质量管理体系认证.
              </dd>
            </dl>
          </div>
        </li>

        <li>
          <h3>技术与支持</h3>
          <div class="price_last">
            <ul>
              <li>售后服务</li>
              <li>投诉与建议</li>
              <li>联保网点</li>
              <li>常见问题</li>
            </ul>
            <p>深圳市汇聚众合科技发展有限公司</p>
            <p>服务热线：400-633-7922</p>
          </div>
        </li>

      </ul>
    </div>

    <!-- 脚 -->
    <footer>
        <ul>
          <li>
            <a href="">尚合首页</a>
            <a href="">返回首页</a>
          </li>
          <li>
            <a href="">智能手机</a>
            <a href="">Aone-T</a>
            <a href="">Aone</a>
          </li>
          <li>
            <a href="">平板电脑</a>
            <a href="">尚PAD S200</a>
            <a href="">尚PAD S100</a>
            <a href="">尚PAD SH-Q7</a>
            <a href="">尚PAD SH-Q5</a>
          </li>
          <li>
            <a href="">配件中心</a>
            <a href="">Aone 智能手机</a>
          </li>
          <li>
            <a href="#">服务与支持</a>
            <a href="">售后服务</a>
            <a href="">联保网点</a>
            <a href="">投诉与建议</a>
            <a href="">常见问题FAQ</a>
            <a href="">订单查询</a>
            <a href="">下载专区</a>
          </li>
          <li>
            <a href="#">服务与支持</a>
            <a href="">平板电脑</a>
            <a href="">尚PAD S200</a>
            <a href="">尚PAD S100</a>
            <a href="">尚PAD SH-Q7</a>
            <a href="">尚PAD SH-Q5</a>
          </li>
          <li>
            <a href="#">服务与支持</a>
            <a href="">平板电脑</a>
            <a href="">尚PAD S200</a>
            <a href="">尚PAD S100</a>
            <a href="">尚PAD SH-Q7</a>
            <a href="">尚PAD SH-Q5</a>
          </li>
          <li>
            <a href="#">服务与支持</a>
            <a href="">平板电脑</a>
            <a href="">尚PAD S200</a>
            <a href="">尚PAD S100</a>
            <a href="">尚PAD SH-Q7</a>
            <a href="">尚PAD SH-Q5</a>
          </li>
          <a href="#top" class="top"></a>
        </ul>
        <div class="footer_info">
          <p>2011-2012版权所有 深圳市汇聚众合科技发展有限公司 （品牌：尚合-SAMHAVE） 
            服务热线：400-633-7922</p>
          <p>
            经营许可证编号：粤ICP备11077821号-1
        </p>
        <div class="footer_info_img"></div>
        </div>
    </footer>

</body>

<!-- 设置轮播图跳转时间，$是jquery -->
<script>
    $('.carousel').carousel({
  interval: 2000
})
</script>

</html>

css3部分

*{
    margin: 0;
    padding: 0;
}

/* 头部 */
header{
    width: 100%;
    height: 100px;
}
header .header_main{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
header .header_left {
    width: 183px;
    height: 100px;
    background: url(./images/logo.png) no-repeat center;
    float: left;
    position: absolute;
    left: 30px;
}
header .header_right{
    float: right;
    width: 170px;
    height: 30px;
    position: relative;
    top: 40px;
    right: 30px;
}
header .header_right .susokuan{
    width: 140px;
    height: 100%;
    float: left;
    border: 1px solid #ccc;
    outline: none;
    padding-left: 7px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
header .header_right .fadajing{
    border: 1px solid #ccc;
    border-left: none;
    width: 30px;
    height: 30px;
    float: right;
    background: url(./images/图层\ 1_精灵看图.png) no-repeat center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background-size: 100%;
}

/* 脖子 */
nav{
    width: 100%;
    height: 80px;
    background-color: #e7e7e7;
    /* 引入bootstrap.css后会发现section和nav之间有一段body间隙
    ，通关margin-top就能填补 */
    margin-top: -10px;
}
nav .nav_main{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}
nav .nav_main ul{
    list-style: none;
}
nav .nav_main ul li{
    float: left;
    width: 100px;
    height: 80px;
    padding-right: 20px;
    text-align: center;
    line-height: 80px;
}
nav .nav_main ul li a:hover {
    background-color: black;
    color: #fff!important;
}
nav .nav_main ul li a{
    text-decoration: none;
    color: black;
    display: block;
    border-right: 1px solid #ccc;
    width: 100px;
    height: 80px;
}
nav .nav_main ul li:first-child{
    border-left: 1px solid #ccc;
}
nav .nav_main ul li:last-child{
    border-right: 1px solid #ccc;
}

/* 轮播图 */
section{
    width: 100%;
    height: 733px;
}
section .section_main{
    width: 1200px;
    height: 700px;
    margin: 0 auto;
}
/* 轮播图宽高 */
.carousel,
.carousel img{
    width: 1200px;
    height: 733px;
}

/* 轮播图下面的东西 */
.info{
    margin-top: 20px;
    width: 100%;
    height: 60px;
    background-color: #e7e7e7;
}
.info .info_main{
    width: 1220px;
    height: 100%;
    margin: 0 auto;
}
.info .info_main .info_left{
    width: 560px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    float: left;
    font-size: 16px;
}
.info .info_main .info_right{
    width: 100px;
    height: 60px;
    background: url(./images/share.png) no-repeat center;
    float: right;
    position: relative;
    right: 10px;
}
.info .info_main .info_right:hover{
    cursor: pointer;
}

/* 腿 */
.price{
    margin-top: 20px;
    width: 100%;
    height: 400px;
}
.price_main{
    width: 1200px;
    height: 300px;
    margin: 0 auto;
}
/* 这里要用子代选择器，不然它的孙子也会被选中 */
.price_main>li{
    float: left;
    margin-right: 20px;
    list-style: none;
}
.price_main li h3{
    padding-left: 50px;
    position: relative;
    color: #81BC59;
}
.price_main li h3::before{
    content: '';
    width: 20px;
    height: 20px;
    background: url(./images/jiantou.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 3px;
    left: 14px;
}
.price_main>li:first-child{
    width: 360px;
    height: 370px;
    border: 1px solid #ddd;    
}
.price_main>li:first-child div{
    width: 190px;
    height: 250px;
    margin: 30px auto;
    position: relative;
    background: url(./images/shouji.png) no-repeat center;
    background-size: 100%;
}
.price_main>li:first-child div::before{
    content: '';
    display: block;
    width: 30px;
    height: 35px;
    position: absolute;
    top: 120px;
    left: -70px;
    background: url(./images/left_icon.png) no-repeat center;
    background-size: 100%;
}
.price_main>li:first-child div::after{
    content: '';
    display: block;
    width: 30px;
    height: 35px;
    position: absolute;
    top: 120px;
    right: -70px;
    background: url(./images/right_icon.png) no-repeat center;
    background-size: 100%;
}
.price_main>li:nth-child(2){
    width: 440px;
    height: 370px;
    border: 1px solid #ddd;
}
.price_main>li:nth-child(2) dl{
    padding: 0 25px;
}
.price_main>li:nth-child(2) dl dt{
    color: red;
    font-size: 20px;
    margin-bottom: 6px;
}
.price_main>li:nth-child(2) dl dd{
    border-top: 1px dotted #ccc;
    padding: 14px 0;
    font-size: 16px;
}
/* 它的孙子，第三个盒子 */
.price_main>li:last-child{
    width: 360px;
    height: 370px;
    border: 1px solid #ddd;
    margin-right: 0;
}
.price_last ul{
    list-style: none;
    margin-top: 10px;
    margin-bottom: 25px;
}
.price_last ul li{
    font-size: 16px;
    padding: 6px 0 8px 65px;
    position: relative;
}
.price_last ul li::before{
    content: '';
    width: 6px;
    height: 15px;
    position: absolute;
    top: 10px;
    left: 42px;
    background: url(./images/sbg.png) no-repeat center;
    background-size: 100%;
}
.price_last p{
    padding: 6px 0 13px 40px;
    font-size: 16px;
}

/* 脚 */
footer{
    margin-top: 20px;
    width: 100%;
    height: 300px;
    border-bottom: 1px dotted #ccc;
    background-color: #2d2d2d;
}
footer ul{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    list-style: none;
    position: relative;
}
footer .top{
    display: block;
    position: absolute;
    width: 56px;
    height: 30px;
    top: 2px;
    right: 0px;
    background: url(./images/top.png) no-repeat center;
    background-size: 100%;
}
footer ul li{
    float: left;
    width: 140px;
    height: 30px;  
    margin-top: 20px;
}

footer ul li a{
    display: block;
    padding-bottom: 18px;
    font-size: 16px;
    text-decoration: none;
    color: #ccc;
}
footer ul li a:hover{
    color: #fff;
    text-decoration: none;
}
.footer_info{
    width: 1220px;
    margin: 0 auto;
    margin-top: 30px;
}
.footer_info p{
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
}
.footer_info_img{
    width: 46px;
    height: 22px;
    margin: 0 auto;
    background: url(./images/bottom_logo.png) no-repeat center;
    background-size: 100%;
}