您的位置：首页 > 运维架构 > 网站架构

使用CSS设计网站页面

2017-10-24 12:35 381 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS设计网站页面</title>
<style type="text/css">
table[id="out"]{
width:760px;
border:1px solid #9fa1a0;
margin:0 auto;
padding: 0;
border-collapse: collapse;
}
.menu_style,foot_style{
background-color:#90d226;
text-align: center;
vertical-align: middle;
border:thin solid #FFFFFF;
text-decoration:none;
width:10%;
height: 23px;
}
table[id="main"]{
width: 100%;
height:256px;
border:0;
padding:0;
}
.wodeweizhi{
width: 550px;
vertical-align: top;
padding-top:10px;
padding-left:10px;
}
hr{
width: 500px;
text-align: center;
}
.zw{
font-size: 12px;
font-style: normal;
line-height:1.75em;
font-weight: normal;
color: #666666;
text-align: left;
text-indent: 2em;
}
a:link{
font-size: 12px;
color: #336699;
text-decoration: underline;
}
table[id="search"]{
width:170px;
height: 110px;
border:1px solid #CCC;
padding:0;
margin: 0 auto;
}
form{
height: 110px;
width: 170px;
}
input{
height: 17px;
width:67px;
border: thin solid #467BA7;
}
.dianxingkuangjia{
text-align: center;
font-weight: bold;
color: #06F;
}
.dianjizheli{
font-size: 12px;
font-style: normal;
line-height: 1.75px;
font-weight: normal;
color: #666666;
}
</style>
</head>
<body>
<table id="out">
<tr>
<td colspan="7" style="height:110px; text-align:center;padding:0">
<img src="../images/title.jpg" style="width:760px;height:161px;"/>
</td>
</tr>
<tr>
<td class="menu_style">HTML5</td>
<td class="menu_style">CSS</td>
<td class="menu_style">JavaScript</td>
<td class="menu_style">Ajax</td>
<td class="menu_style">jQuery</td>
<td class="menu_style">BootStrap</td>
<td class="menu_style"> </td>
</tr>
<tr>
<td colspan="7">
<table id="main">
<tr>
<td class="wodeweizhi"><p class="zw">我的位置>>HTML5</p>
<hr/>
<p class="zw">
Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。<br/>
完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整<br/>
体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验
</p>
</td>
<td>
<form id="form1" name="form1" method="post" action="">
<table id="search">
<tr>
<td>Username</td>
<td><input type="text" id="textfield" name="textfield"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" id="textfield2" name="textfield2"></td>
</tr>
<tr>
<td><span class="dianjizheli">点击这里</span>
<a href="#">注册</a>
</td>
</tr>
</table>
</form>
<div class="dianjizheli">
<p>典型框架</p>
<p><a href="#">jQuery</a></p>
<p><a href="#">ExtJs</a></p>
<p><a href="#">AngularJs</a></p>
<p><a href="#">ReactJs</a></p>
<p><a href="#">Bootstrap</a></p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="7" class="foot_style" align="center"><p>版权所有</p></td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航