今天开始写第一篇学习前端博客,经过近些天的学习,基本清楚了div+css排版。
开始第一次尝试:仿网易考拉购物首页(先抛弃图片文字和复杂的特效以及一些细节优化,以排出大致相同版面为目标。)
以下为6.25为止网页上半部分的排版代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>购物网站首页</title>
<style type="text/css">
*{margin:0;padding:0;font-family:"微软雅黑";font-size:12px}
ul{
list-style-type:none
}
li a{
text-decoration:none;
display:inline-block;
color:#666;
padding:0 12px;
margin-top:4px;
border-right:1px solid #999
}
.left_ul{
float:left;
}
.right_ul{
float:right
}
.mid_ul{
width:1100px;
margin:0 auto;
height:27px
}
.left_ul li,.right_ul li
{
float:left
}
.border_none{
border:0
}
li a:hover,ul a:hover{
color:#F00
}
.dropdown_img{
position:absolute;
display:none
}
.dropdown_list{
position:absolute;
display:none;
background-color:#FFF;
border:1px solid #DBDBDB;
}
.dropdown_list a{
min-width:100px;
display:block;
padding:3px 4px;
text-align:center;
border:0;
box-shadow:0px 0px 1px 0px #D8D8D8;
color:#666
}
.dropdown:hover .dropdown_list{
display:block
}
.kaola_img{float:left;margin-top:18px;}
.serach_div{height:100px;overflow:hidden}
.serach_ul{
margin-left:345px;
width:510px;
margin-top:23px;
}
.serach_ul a{
text-decoration:none;
display:inline-block;
color:#999;
padding:0 8px;
margin-top:4px;
border-right:1px solid #999
}
.gouwuche{
float:right;
border:1px solid #999;
padding:10px 40px;
margin-top:22px;
display:inline-block;
color:#666;
font-size:13px;
border-radius: 5px;
text-decoration:none;
}
.gouwuche:hover{
color:#666;
background-color:#DBDBDB;
}
.secmid_ul{
margin:0 auto;
height:100px;
width:1100px;
overflow:hidden
}
.fourth_div{
height:40px;
border-bottom:2px solid #000;
}
.fourth_mid_ul{
height:40px;
width:1100px;
margin:0 auto;
overflow:hidden
}
.fourth_mid_ul a{
display:inline-block;
padding:12px 20px;
float:left;
font-size:14px;
color:#000;
font-weight:bold;
text-decoration:none;
}
.fenlei_menu{
display:none;
position:absolute;
background:#000;
filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5; /*半透明代码*/
}
.fenlei_menu a{
display:block;
float:none;
}
.fourth_div .fourth_mid_ul .fenlei_menu a{
margin:0;
border:0;
color:#FFF;
min-width:112px;
text-align:center;
padding:11px 12px;
}
.fourth_div .fourth_mid_ul a{
margin:0;
border:0;
}
.fenlei:hover .fenlei_menu{
display:block
}
.fenlei_menu a:hover{
background:#666;
border-left:1px solid #F00;
}
</style>
</head>
<body>
<ul>
<a href="#" style="width:auto"><img src="top.png" alt=""></a>
</ul>
<ul style="height:29px;background:#DBDBDB;margin-top:-4px">
<ul class="mid_ul">
<ul class="left_ul">
<li><a class="border_none">考拉欢迎你!</a></li>
<li><a href="#">登录</a></li>
<li><a href="#" class="border_none">免费注册</a></li>
<li class="dropdown"><a href="#" style="border:0">手机考拉海购</a>
<div class="dropdown_list"><img src="二维码.png"></div>
</li>
</ul>
<ul class="right_ul">
<li><a href="#">每日签到</a></li>
<li><a href="#">我的订单</a></li>
<li class="dropdown"><a href="#">个人中心</a>
<div class="dropdown_list">
<a href="#">我的优惠券</a>
<a href="#">我的考拉豆</a>
<a href="#">账户安全</a>
<a href="#">我的实名认证</a>
<a href="#">我收藏的商品</a>
<a href="#">我关注的品牌</a>
<a href="#">售后管理</a>
</div>
</li>
<li class="dropdown"><a href="#">客户服务</a>
<div class="dropdown_list">
<a href="#">联系客服</a>
<a href="#">帮助中心</a>
</div>
</li>
<li class="dropdown"><a href="#">充值中心</a>
<div class="dropdown_list">
<a href="#">游戏充值</a>
<a href="#">手机充值</a>
</div>
</li>
<li><a href="#">消费者告知书</a></li>
<li class="dropdown"><a href="#" class="border_none">更多</a>
<div class="dropdown_list">
<a href="#" >收藏本站</a>
<a href="#" >新浪微博</a>
<a href="#" >微信公众号</a>
<a href="#" >易信公众号</a>
<a href="#" >招商合作</a>
<a href="#" >考拉招聘</a>
</div>
</li>
</ul>
</ul>
</ul>
<div class="serach_div">
<ul class="secmid_ul">
<a href="#" class="gouwuche">购物车</a>
<a href="#" class="kaola_img"><img src="../shopping/网易考拉.png" alt=""></a>
<ul class="serach_ul">
<span><input type="text" style="width:460px;height:30px;border:2px solid #000"></span>
<span><input type="submit" style="height:34px;width:40px;border:2px solid #000;margin-left:-4px;border-left:0"></span>
<a href="#">面膜</a>
<a href="#">花王</a>
<a href="#">安耐晒</a>
<a href="#">驱蚊</a>
<a href="#">Swisee</a>
<a href="#">小龙虾</a>
<a href="#">电动牙刷</a>
<a href="#" style="border:0">防晒喷雾</a>
</ul>
</ul>
</div>
<div class="fourth_div">
<ul class="fourth_mid_ul">
<li class="fenlei"><a href="#" style="padding:11px 40px;color:#FFF;background:#000;">所有分类</a>
<div class="fenlei_menu">
<a href="#" >收藏本站</a>
<a href="#" >母婴儿童</a>
<a href="#" >美容彩妆</a>
<a href="#" >服饰鞋包</a>
<a href="#" >家具个护</a>
<a href="#" >营养保健</a>
<a href="#" >海外直邮</a>
<a href="#" >数码家电</a>
<a href="#" >环球美食</a>
<a href="#" >运动户外</a>
<a href="#" >水果生鲜</a>
</div>
</li>
<li><a href="#">首页</a></li>
<li><a href="#">今日限时购</a></li>
<li><a href="#">每日上新</a></li>
<li><a href="#">国家馆</a></li>
<li><a href="#">全球旗舰</a></li>
</ul>
</div>
<div>
<img src="图2.jpg" alt="">
</div>
</body>
</html>
上图为设计图,有以下几部分问题未解决:
1. 文本搜索框,没有原站美观。没有找到优化的方法。
2. 搜索框下部的实时搜索热点,没有办法实时根据数据来更换。我设计时只是简单的利用了a标签包裹加border边框处理。
3. 原站加入了图片文字样式,同时“我的订单”和“个人中心”等类似下拉菜单,在鼠标经过时会触发后面的倒三角转动成正三角的动画样式。目前没法仿造。
4. “所有分类”二级下拉菜单时,虽然对fenlei_menu这个div设置了属性,但此div中第一个a标签总是在hover经过时和“所有分类”重合。目前没有找到原因。
5. 1920*400的图片实现自动切换和点击切换还在学习中。