html练习

时间：2020-05-04 12:42:41 阅读：52 评论：0 收藏：0 [点我收藏+]

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.记得审查网页元素，排除错误

html练习

原文：https://www.cnblogs.com/zhengxin666/p/12825718.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)