HTML5学习：网页开发01

最新推荐文章于 2023-01-11 11:05:53 发布

诺卡先生

最新推荐文章于 2023-01-11 11:05:53 发布

阅读量503

点赞数

分类专栏： HTM5

本文链接：https://blog.csdn.net/weixin_44202489/article/details/109901277

版权

HTM5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、网页开发步骤

1.通栏、版心概念

通栏：始终占满整个屏幕的宽度，不去设置宽度或者 100%；

版心：在ps中进行测量，测量出来是多少就写多少

2.新建站点文件

a：网页文件的规划

首页：index.html

css文件的部署：

重置样式表（用来清除默认的css样式的）

公共样式表（写当前项目公共的部分：头部、底部）

私有样式表（当前页面自己的样式）

3.文件准备

网页样式图例：

点击下载：提取码：aqr1

4、步骤

<body>
    <!-- 头部 -->
    <div id="header">头部</div>

    <!-- 导航 -->
    <div id="nav">导航</div>

    <!-- 轮播 -->
    <div id="banner">轮播</div>

    <!-- 内容 -->
    <div id="con">内容</div>

    <!-- 链接 -->
    <div id="links">链接</div>

    <!-- 底部 -->
    <div id="footer">底部</div>
</body>

5、目录结构

二、源码如下

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 私有样式表一定要引入在最下面 -->
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div id="header">
        <!-- 版心 -->
        <div class="wrapper">
            <h1>
                <img src="../images/logo.png" alt="">
            </h1>
            <form action="" method="">
                <input type="text" value="" placeholder="SEARCH...">
            </form>
        </div>
    </div>

    <!-- 导航 -->
    <div id="nav">
      <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>
          <li><a href="">人才交流</a></li>
          <li class="a_list"><a href="" >人才交流</a></li>
      </ul>
     
    </div>
    
    <!-- 轮播 -->
    <div id="banner"></div>

    <!-- 内容 -->
    <div id="con">
           <!-- 上面 -->
           <div class="contop">
            <div class="con_left">
                <h2>公司新闻</h2>
                <ul>
                    <li><a href="">文本文本</a><span>2020-11-20</span></li>
                    <li><a href="">文本文本</a><span>2020-11-20</span></li>
                    <li><a href="">文本文本</a><span>2020-11-20</span></li>
                    <li><a href="">文本文本</a><span>2020-11-20</span></li>
                    <li><a href="">文本文本</a><span>2020-11-20</span></li>
                    <li><a href="">文本文本</a><span>2020-11-20</span></li>
                </ul>
            </div>
            <div class="con_center">
                <h2>公司简介</h2>
                <p class="p_list">公司成立于1998年</p>
                <p class="p_list2">已经成为电器行业，领军型战略公司</p>
            </div>
            <div class="con_right">
                <h2>人才招聘</h2>
                <img class="img" src="../images/shou.png">
                <img class="img2" src="../images/logo2.png">
            </div>
          </div>
          <div class="dome">
            <div class="dome_left1">
                <h2>市场项目</h2>
                <img src="../images/conbow1.png" alt="">
                <h4>交通轨道：由于主要采用电气牵引，而且轮轨摩擦力较小，与公共...</h4>
            </div>
              <div class="dome_left">
                <img src="../images/conbow2.png" alt="">
                <h4>节能环保：由于不断上涨的能源消耗和我们的专业知识，维持可持续...</h4>
              </div>
              <div class="dome_center">
                <img src="../images/conbow3.png" alt="">
                <h4>航空与船舰：如果你是在公海行驶，你需要确保你的船只的电力系统...</h4>
              </div>
              <div class="dome_right">
                <img src="../images/conbow4.png" alt="">
                <h4>石油、天然气及采矿：在市场中的安全性，可靠性，效率和最短的停机...</h4>
              </div>

          </div>

        </div>
    
    <!-- 链接 -->
    <div id="links">
        <div class="links_left">
            <h1>产品中心</h1>
            <ul class="links_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>
                <li>嘿嘿嘿嘿</li>
            </ul>
        </div>
        <div class="links_center">
            <h1>技术研发</h1>
            <ul>
                <li>九点十分</li>
                <li>九点十分</li>
                <li>九点十分</li>
                <li>九点十分</li>
                <li>九点十分</li>
            </ul>
        </div>
        <div class="links_right">
            <h1>网络营销</h1>
            <img class="links_img" src="../images/ditu.png">
        </div>
    </div>

    <!-- 底部 -->
    <div id="footer">
        <ul class="footer_a">
            <li><a href="">网站地图</a></li>
            <li><a href="">网站地图</a></li>
            <li><a href="">网站地图</a></li>
            <li class="footer_li"><a href="">网站地图</a></li>
            
        </ul>
        <ul class="footer_b">
            <li><img class="footer_d" src="../images/footer-1.png"/></li>
            <li><img class="footer_d" src="../images/footer-2.png"/></li>
            <li><img class="footer_d" src="../images/footer-3.gif"/></li>
            <li><img class="footer_d" src="../images/footer-4.gif"/></li>
            <li><img class="footer_d" src="../images/footer-5.gif"/></li>
            <li><img class="footer_d" src="../images/footer-6.gif"/></li>
        </ul>
    </div>
</body>
</html>

css

@charset "utf-8";
/* 头部 */
#header{
    height:100px;
    /* background:skyblue; */
}
#header .wrapper{
    width:963px;
    height:100px;
    /* background:yellowgreen; */
    /* 水平居中 */
    margin:auto;
}
#header .wrapper h1{
    float:left;
    padding:18px 0 0 20px;
}
#header .wrapper form{
    float:right;
    padding-top:39px;
}
#header .wrapper input{
    width:216px;
    height:28px;
    background:#f1f1f1;
    /* 去掉边框 */
    border:0;
    /* 然后再写我们要的样式 */
    border:1px solid #e5e5e5;
    padding-left:16px;
}


/* 导航 */
#nav{
    height:60px;
    /* background:#7cc726; */
   
}
#nav ul{
    width: 963px;
    height: 60px;
    /* background: #7cc726; */
    margin: auto;
}
#nav ul li{
    float: left;
    width:119px;
    text-align:center;
    height:60px;
    line-height:60px;
    /* border-right:1px solid #20c958;   */
}
#nav ul a{
    font-size: 16px;
    color: black;
}

#nav ul .a_list{
    border-right: none;
}
/* 轮播 */
#banner{
    height: 466px;
    background:url("../images/banner.png") no-repeat center center ;
}
#con .contop{
    width:963px;
    height:241px;
    margin:auto;
    /* background:rgb(178, 226, 44); */
}
#con .contop .con_left{
    width:480px;
    height:241px;
    /* background:rgb(18, 161, 218); */
    float:left;
}
#con .contop .con_center{
    width:244px;
    height:241px;
    /* background:rgb(87, 62, 230); */
    float:left;
}
#con .contop .con_right{
    width:239px;
    height:241px;
    /* background:rgb(48, 228, 159); */
    float:left;
}
#con .con_left h2{
    padding: 36px 0 22px 0;
    color: #20c958;
}
#con .con_left ul{
    padding-right: 28px;
}
#con .con_left a{
    float: left;
    font-size: 12px;
    color:black;
}
#con .con_left span{
    float: right;
    font-size: 9px;
    color: #4f4f4f;

}
#con .con_left li{
    height:24px;
    line-height:24px;
    background:url("../images/dian.png") no-repeat left center;
    padding-left:14px;
}
#con .con_center h2{
    padding: 36px 0 22px 0;
    color: black;
}
#con .con_center .p_list{
  padding:25px 0 33px 0;
}
#con .con_right h2{
    padding: 36px 0 22px 0;
    
}
#con .con_right .img{
    padding: 1px 0 6px 21px;
    color: black;
}
#con .con_right .img2{
    padding: 1px 0 6px 21px;

}
/* 下面 */
#con .dome{
    width:963px;
    height:300px;
    margin:auto;
    /* background:rgb(173, 36, 116); */
}
#con .dome .dome_left1{
    width:240px;
    height:321px;
    /* background:rgb(216, 21, 64); */
    float:left;
}
#con .dome .dome_left{
    width:240px;
    height:241px;
    /* background:rgb(6, 87, 66); */
    float:left;
}
#con .dome .dome_center{
    width:244px;
    height:241px;
    /* background:rgb(170, 107, 36); */
    float:left;
}
#con .dome .dome_right{
    width:239px;
    height:241px;
    /* background:rgb(226, 13, 208); */
    float:left;
}
#con .dome .dome_left1 h2{
    padding: 20px 0 20px 0;
}
#con .dome h4{
    font-size: 12px;
    padding: 20px 20px 0 0;
}
#con .dome .dome_left{
    padding: 60px 0 20px 0;
}
#con .dome .dome_center{
    padding: 60px 0 20px 0;
}
#con .dome .dome_right{
    padding: 60px 0 20px 0;
}
/* 连接 */
#links{
    height: 253px;
    width: 963px;
    background: #e5e5e5;
    margin: auto;

}
#links .links_left{
    width: 480px;
    height: 253px;
    /* background: #20c958; */
    float: left;
}
#links .links_center{
    width: 199px;
    height: 253px;
    /* background: #9079e2; */
    float: left;
}
#links .links_right{
    width: 284px;
    height: 253px;
    /* background: #f0d396; */
    float: left;
}
#links .links_left h1{
    padding: 20px 0 20px 0;
    border-bottom:2px solid #c1c1c1;
}
#links .links_left .links_ul li{
    font-size: 12px;
    color: #ababab;
    float: left;
    padding: 0 63px 0 11px;
    line-height: 20px;
    background: url("../images/logo3.png") no-repeat 3px 6px;    
}
#links .links_center h1{
    padding: 20px 0 20px 0;
    border-bottom:2px solid #c1c1c1;
}
#links .links_center ul{
    padding:1px 0 0 0;

}
#links .links_center li{
    padding:3px 0 0 17px;
    font-size: 12px;
    color: #ababab;
    line-height: 15px;
    background: url("../images/logo3.png") no-repeat 7px 7px; 
}
#links .links_right h1{
    padding: 20px 0 20px 0;
    border-bottom:2px solid #c1c1c1;
}
#links .links_right .links_img{
    padding: 16px 0 0 28px;
}

/* 底部 */
#footer{
    height: 50px;
    width: 963px;
    background: #ffffff;
    margin: auto;

}

#footer .footer_a li{
    float: left;
    padding: 7px;
    line-height: 3px;
    border-right:1px solid #ababab;
}
#footer a{
    font-size: 12px;
    color: #ababab;
}
#footer .footer_a{
    border: none;
}
#footer .footer_b{
   padding-left:142px ;
   border: none;
   float: left;
}
#footer .footer_b li{
    float: left;
 }

诺卡先生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
HTML5学习：网页开发01

一、网页开发步骤1.通栏、版心概念通栏：始终占满整个屏幕的宽度，不去设置宽度或者100%；版心：在ps中进行测量，测量出来是多少就写多少2.新建站点文件a：网页文件的规划首页：index.htmlcss文件的部署：重置样式表（用来清除默认的css样式的）公共样式表（写当前项目公共的部分：头部、底部）...
复制链接

扫一扫