首页 > 其他分享> 文章详细

010_品优购01

2020-04-07 16:08:19 阅读：392 来源： 互联网

标签：search 01 top height 010 logo left margin 品优购

typora-copy-images-to: media

今日目标：

能够理解css初始化的含义和基本做法X
能够实现Logo区域的制作X
能够实现页面中登录和注册内容制作X
能够实现顶部导航部分的制作X
能够在页面中展示搜索框和搜索图标X
能够实现购物车模块的制作X
能够添加购物车的logo小图标X
能够实现搜索栏下方的导航栏的添加

品优购目录搭建

1.项目文件夹

2.css文件夹

3.image文件夹

4.字体文件夹

效果图

引入文件

1.初始化css，normalize，老外写的，用来统一各个浏览器之间的样式

2.字体图标css

3.公共css，公共样式文件，头部尾部的样式是一样的，写在公共样式文件中

a.通配耗费时间，所以单独选择元素-----提高效率

b.img和文字对齐的时候底下下会有一些空白，所以vertical-align设置为top

c.清除input和img的边框

d.将所有倾斜标签和下划线标签还原为正常的font-style:normal

e.body标签设置网页字体

f.字体图标既有行内块的特点，也有文字的特点，所有不好控制，所以将字体图标的行高设置为1，使用相对定位来微调字体图标的位置

4.项目css

效果图

字体图标类名

示意图

顶部

结构代码：

<!-- 顶部开始 -->
<div class="wrap top">
	<div class="content">
    	<div class="tl fl">
        	<span>品优购欢迎您！请</span>
            <a href="login.html">登录</a>
            <a href="register.html">免费注册</a>
        </div>
    	<div class="tr fr">
        	<ul>
            	<li>
                    <a href="#">我的订单</a><span>|</span>
                </li>
            	<li>
                	<a href="#">
                    	我的品优购<i class="iconfont icon-xiajiantou"></i>
                    </a><span>|</span>
                </li>
            	<li><a href="#">品优购会员</a><span>|</span></li>
            	<li><a href="#">企业采购</a><span>|</span></li>
            	<li><a href="#">关注品优购<i class="iconfont icon-xiajiantou"></i></a><span>|</span></li>
            	<li><a href="#">客户服务<i class="iconfont icon-xiajiantou"></i></a><span>|</span></li>
            	<li><a href="#">网站导航<i class="iconfont icon-xiajiantou"></i></a></li>
            </ul>
        </div>
    </div>
</div>
<!-- 顶部结束 -->

样式代码(在公共样式文件中)：

/* 版心 */
.content{
	width:1200px;
	margin:0 auto;
}
/* 容器 */
.wrap{
	width:100%;	
}
/* 顶部 */
.top{	
	background:#f1f1f1;
}
.top .content{
	height:30px;	
	line-height:30px;	
}
.top .content .tl{
	width:200px;
	height:30px;	
}
.top .content .tl a:nth-child(2){
	color:#666;
}
.top .content .tl a{
	color:#c81623;
}
.top .content .tr{
	width:700px;
	height:30px;	
}
.top .content .tr ul li{
	float:left;	
	
}
.top .content .tr ul li a i.iconfont{
	margin-left:10px;
	position:relative;
	top:2px;
}
.top .content .tr ul li span{
	margin:0 14px 0 5px;	
}

效果：

效果图

logo和搜索区域

结构代码：

<!-- logo区域开始 -->
<div class="wrap">
	<div class="content logo-search clearfix">
    	<div class="logo fl">
        	<a href="index.html"><img src="images/logo.png"></a>
        </div>
        <div class="form fl">
        	<form>
            	<input type="text" placeholder="语言开发">
                <input type="submit" value="搜索">
            </form>
            <ul>
            	<li><a class="current" href="#">优惠购首发</a></li>
            	<li><a href="#">亿元优惠</a></li>
            	<li><a href="#">9.9元团购</a></li>
            	<li><a href="#">每满99减30</a></li>
            	<li><a href="#">办公用品</a></li>
            	<li><a href="#">电脑</a></li>
            	<li><a href="#">通信</a></li>
            </ul>
        </div>
        <div class="cart fr">
        	<i class="iconfont icon-gouwuche2"></i>
            <span>我的购物车</span>
            <em class="iconfont icon-youjiantou"></em>
            <b>8</b>
        </div>
    </div>
</div>
<!-- logo区域结束 -->

样式代码：

/* logo和搜索区域 */
.logo-search .logo{
	margin-top:26px;	
}
.logo-search .form{
	margin-left:170px;	
}
.logo-search form{
	width:538px;
	margin:24px 0 0 0;
	background:#f00;
	height:36px;	
}
.logo-search form input[type="text"]{
	width:444px;
	height:32px;
	border:2px solid #b1191a;
	border-right:none;
	padding-left:10px;	
	float:left;
}
.logo-search form input[type="submit"]{
	width:82px;
	background:#b1191a;
	float:left;
	height:36px;
	font-size:16px;
	color:#fff;
}
.logo-search ul li{
	float:left;
	margin:0 12px;
	line-height:28px;
}
.logo-search ul li a.current{
	color:#c81623;	
}
.logo-search .cart{
	width:138px;
	height:34px;
	border:1px solid #dfdfdf;
	margin-right:62px;
	margin-top:24px;
	position:relative;
	line-height:34px;	
}
.logo-search .cart i{
	margin-left:18px;
}
.logo-search .cart em{
	margin-left:14px;
	position:relative;
	top:2px;	
}
.logo-search .cart b{
	display:block;
	width:16px;
	height:14px;
	background:#e60012;
	border-radius:50%;
	border-bottom-left-radius:0;	
	position:absolute;
	right:18px;
	top:-4px;
	color:#fff;
	font-size:12px;
	text-align:center;
	line-height:14px;
}

效果

效果图

<!-- 导航开始 -->
<div class="wrap nav">
	<div class="content clearfix">
    	<div class="category fl">
        	全部商品分类
        </div>
        <ul class="fl">
        	<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>
        	<li><a href="#">团购</a></li>
        	<li><a href="#">拍卖</a></li>
        	<li><a href="#">有趣</a></li>
        </ul>
    </div>
</div>
<!-- 导航结束 -->