本文分享了一次使用HTML、CSS进行拉勾网页面搭建的经历，介绍了如何利用Sublime Text创建项目并完成基本布局，包括顶部导航栏、侧边菜单等部分。
这两天在手中工作已完成,暂时没有新工作安排,所以闲暇时期学习了一下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;
}
}
效果图如下:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
