就学习两天html和css搭建简易拉勾框架小结

这两天在手中工作已完成,暂时没有新工作安排,所以闲暇时期学习了一下html+css+js的内容,方便熟悉公司项目2.0版本的开发,就这两天学习内容做了一个简易的拉勾小模块搭建工作,说实话,这活做的是真糙,但还是记录一下,能够记录进步吧.

起始,开发工具就是万能的sublime,至于怎么创建项目,起始也很简单啊,看项目想放在什么地方,例如,我的就是放在D/ww下,ww新建的啊,然后在文件夹下,新建文件夹就是你想用的名字啊,在sunlime中File->open folder打开这个文件夹就行了啊,方法很笨,不过很好操作啊.

开始操作吧,在sublime中文件夹下右键新建文件,起名index.html和style.css,在此准备工作做完了,下面就是两者的代码了:

index.html:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>


<div id="header">
<h2>拉勾</h2>
</div>

<div id="next">
<p>拉勾网是最权威的互联网行业招聘网站,提供全国真实的互联网招聘信息,工资不面议当面谈,找工作,招聘网,寻人才就来拉勾网,互联网行业找工作首选拉勾网
</p>
</div>

<div id="left">
<ul>
<li><a href="#">技术</a>
<ul>
<li><a href="#">JAVA</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Html</a></li>
</ul>
</ul>
<ul>
<li><a href="#">设计</a>
<ul>
<li><a href="#">UI设计师</a></li>
<li><a href="#">交互设计</a></li>
<li><a href="#">网页设计师</a></li>
<li><a href="#">平面设计</a></li>
</ul>
</ul>
<ul>
<li><a href="#">产品</a>
<ul>
<li><a href="#">产品总监</a></li>
<li><a href="#">产品经理</a></li>
<li><a href="#">游戏策划</a></li>
</ul>
</ul>
<ul>
<li><a href="#">运营</a>
<ul>
<li><a href="#">新媒体运营</a></li>
<li><a href="#">运营总监</a></li>
<li><a href="#">COO</a></li>
</ul>
</ul>
<ul>
<li><a href="#">市场和销售</a>
<ul>
<li><a href="#">市场推广</a></li>
<li><a href="#">市场总监</a></li>
<li><a href="#">BD</a></li>
<li><a href="#">市场策划</a></li>
</ul>
</ul>
<ul>
<li><a href="#">职能</a>
<ul>
<li><a href="#">HR</a></li>
<li><a href="#">行政</a></li>
<li><a href="#">财务</a></li>
<li><a href="#">审计</a></li>
</ul>
</ul>
<ul>
<li><a href="#">金融</a>
<ul>
<li><a href="#">投资</a></li>
<li><a href="#">融资</a></li>
<li><a href="#">并购</a></li>
<li><a href="#">风控</a></li>
</ul>
</ul>
</div>

<div id="center">
<p style="font-family: 微软雅黑;color: red">点击左侧,给自己一个可操控的未来</p>
<input type=text style="height:25px" size=90> 
<input type="submit" style='font-size:18px' value="点下试试">
</div>


<div id="footer">
<p>拉勾App,最受欢迎互联网求职平台.</p>
</div>


</body>
</html>

style.css:

body{
margin:0;
}
#header {
    background-color:#333;
    color:#0f0;
    margin-top: 0;
    text-align:left;
    padding-left: 70px;
    height: 30px;
    margin-top: -20px;
    margin-bottom: -16px;
}
#next{
background-color:#ccc;
    color:#000;
    text-align:left;
    padding-left: 30px;
    margin-bottom: 40px;
    height: 50px;
}
#left {
line-height:30px;
    background-color:#eeeeee;
    height:1100px;
    width:200px;
    float:left;
    padding:10px; 
    margin-left: 150px;
}
#center {
background-color:#eeeeee;
    width:770px;
    height: 1500px;
    float:left;
    padding:10px; 
    margin-left: 20px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:left;
    padding:15px; 
}
}

效果图如下:




相关内容推荐