您的位置：首页 > Web前端 > CSS

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

2016-12-03 17:02 471 查看
这两天在手中工作已完成,暂时没有新工作安排,所以闲暇时期学习了一下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;

}

}

效果图如下:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航