html练习

2020-05-04 11:04:56 阅读：181 来源： 互联网

标签：float top 练习 height padding width html left

HTML如下：

<html>
<link href="css/index.css" rel="stylesheet" type="text/css">
<body>
<div style="width:100%" align="center">
    <div id="top" align="left">
        <div id="top_left" >
            <img src="img/logo_blue.png" style="float:left;margin:6px 0px 0px 2px">
            <img src="img/slogen.png" style="float:left;margin:18px 0px 0px 10px">
        </div>
        <div id="top_right" >
            <div class="menu" style="margin-left:0px">
                <div>首页</div>
            </div>
            <div class="menu">
                职位搜索
            </div>
            <div class="menu">
                地区频道
            </div>
            <div class="menu">
                职场咨询
            </div>
            <div class="menu">
                校园招聘
            </div>
            <div class="menu">
                无忧精英
            </div>
            
        </div>
    
    </div>
    <div id="top_line" ></div>
<div id="middle">

  <div id="middle_top" style="float:left">
   
   <div >
   <div id="middle_left">公司搜全文</div>
   <div id="middle_left">地点</div>
   <div id="middle_left">行业</div>
   <div id="middle_left">职能</div>
   
   </div>
   
   <div>
    <div id="middle_right">搜索公司名</div>
    <div id="middle_right">成都</div>
    <div id="middle_right">选择行业</div>
    <div id="middle_right">选择职能</div>
   </div>
   
  </div> 
 
   <div id="middle-menu">
     <div id="middle-butten">热门推荐：</div>
     <div id="middle-butten" style="padding-left:0">前程无忧招聘</div>
     <div id="middle-butten">销售java</div>
     <div id="middle-butten">人事会计</div>
     <div id="middle-butten">UI平面设计</div>
     <div id="middle-butten">行政</div>
     <div id="middle-butten">web前端</div>
   </div>
 
</div>

<div id="butten">
  
  <div id="butten-top" style="float:left">
    <div class="butten-left">发布日期：</div>
    <div class="butten-left">所有</div>
    <div class="butten-left">近三天</div>
    <div class="butten-left">近一周</div>
    <div class="butten-left">近三个月</div>
    
  <div id="butten-left" style="float:left">
    <div class="butten-right">出发时间：</div>
    <div class="butten-right">一天</div>
    <div class="butten-right">三天</div>
    <div class="butten-right">一周</div>
    <div class="butten-right">三个月</div>
</div>

  </div>
  
</div>

  <div  id="border" align="center">
   <div id="document"><input onClick="document" type="button" value="新增" style="width:50px; height:25px"></div>
    <div id="boder-top">
     <div class="boeder-left">职位名</div>
     <div class="boeder-left">公司名</div>
     <div class="boeder-left">工作地点</div>
     <div class="boeder-left">薪资</div>
     
     <div id="under">
     <div class="under-butten">游戏策划</div>
     <div class="under-butten">古有科技有限公司</div>
     <div class="under-butten">异地招聘</div>
     <div class="under-butten">2-4万/月</div>
    </div>
     
    </div>

  </div>

</body>
</html>

css代码如下：

#top {
    height: 57px;
    width: 1000px;
}
#middle #middle_top {
    height: 87px;
    background-color: #FFFFFF;
    ;
    width: 950px;
    margin-top: 10px;
    float: left;
    margin-left: 25px;
}
#middle_left {
    width: 200px;
    height: 45px;
    float: left;
    padding-top: 10px;
}
#middle_right {
    height: 50px;
    width: 200px;
    float: left;
    padding-top: 5px;
}
.butten-left {
    width: 190px;
    height: 25px;
    padding-left: 5px;
    background-color: #009933;
    float: left;
}



#middle-butten {
    height: 45px;
    width: 120px;
    float: left;
    padding-top: 10px;
    color: #FFFFFF;
    padding-left: 20px;
}
#butten {
    width: 1000px;
    height: 80px;
    background: #E8E8E8;
}
#butten-top {
    float: left;
    width: 1000px;
    height: 70px;
    padding-top: 2px;
    border:1px solid #CCCCCC;
}
#document {
    height: 25px;
    width: 1000px;
    border-left-style: 10;
    border-left-color: #0000FF;
    padding-top: 5px;
}
#border {
    height: 120px;
    width: 1000px;
}
#under {
    float: left;
    height: 35px;
    width: 1000px;
}
.under-butten {
    float: left;
    height: 25px;
    padding-left: 99.8px;
    padding-right: 69.6px;
}


#boder-top {
    float: left;
    height: 60px;
    width: 1000px;
}
.boeder-left {
    float: left;
    height: 25px;
    padding-left: 102px;
    padding-right: 100px;
    padding-top: 10px;
    background-color: #CC33CC;
}



.butten-right {
    background-color: #6666FF;
    float: left;
    padding-left: 30px;
    padding-top: 10px;
}
#butten-left {
    background-color: #9900CC;
    padding-left: 30px;
    float: left;
}




#middle-menu {
    padding-left: 25px;
}



#top #top_left {
}
#middle {
    height: 140px;
    width: 1000px;
    background-color: #787E99;
    ;
}

#top #top_right {
    height: 57px;
    width: 546px;
    float: left;
}
#top #top_right .menu {
    height: 35px;
    float: left;
    margin-left: 35px;
    padding-top: 18px;
    font-family: "微软雅黑";
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-color: #FF6000;
    border-width: 2px;
}
#top_line {
    height: 1px;
    width: 100%;
    background-color: #E8E8E8;
}

首先1.分模块，要一步一步规划模块，模块区域要分清； 2.设置边框大小；3.父类添加样式、浮动（子类也要添加浮动如：style=“float：left”）3.可以选择背景颜色，以便区分区域大小；4.记得审查网页元素，排除错误

标签：float,top,练习,height,padding,width,html,left
来源： https://www.cnblogs.com/zhengxin666/p/12825718.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html练习