接下来准备 用html+css写一个静态淘宝页面
淘宝静态页面的实现-----大体思路
分三个模块
1.导航栏和下拉菜单
2.图片的链接 和搜索框
3.这是一个大的布局 里面还要细分几个模块(先实现1 2)
这个3还要分为导航栏和图片展示区域
四大模块代码部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>静态页面</title>
<link rel="stylesheet" href="css/lesson2.css" />
</head>
<body>
<div class="wrapper">
<!-- 导航栏 下拉菜单-->
<div class="top-nav-wrap"></div>
<!--搜索栏-->
<div class="search-wrap"></div>
<!--主模块的导航栏-->
<div class="screen-nav"></div>
<!--主模块的图片展示栏-->
<div class="screen-box"></div>
</div>
</body>
</html>
css
*{
margin: 0px;
border: 0px;
list-style: none;/*ui的前面小黑点去掉*/
text-decoration: none;/*a链接的下划线去掉*/
overflow-x:hidden ;/*当页面过大时 去掉横向划的那个滚动条*/
}
html,body{
height: 100%;
width: 100%;
background: #f4f4f4;
color:#3C3C3C;
}
.wrapper{
height: 100%;
width: 100%;
}
.wrapper .top-nav-wrap{
height: 40px;
width: 100%;
border: 1px solid black;
}
.wrapper .search-wrap{
height: 97px;
width: 100%;
padding-top:24px ;
border: 1px solid black;
background: #FFF;
}
.wrapper .screen-nav{
height: 30px;
width: 1190px;
border: 1px solid black;/*边框 后期可以把大小设为零 前期只是为了分割块*/
margin: 0 auto; /*框架居中*/
}
.wrapper .screen-box{
height: 632px;
width: 1190px;
border: 1px solid black;
margin: 0 auto;/*框架居中*/
}
这就是整体的四个小模块框架!!!
效果就不展示了 很普通 等成品出来 我会加上运行图