淘宝静态页面编写（5）--首屏/侧边/图片区域结构

左手的ㄟ右手 2022-12-29 04:34 180阅读 0赞

# 首屏 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70]

由于首屏比较复杂，这篇我们先写侧边栏以及图片区域，图片区域采用了左右分块，大家也可以采用上下。下面开始写左侧导航栏。

# 导航栏 #

![在这里插入图片描述][20201222205048287.png]  
显而易见采用ul下拉框是最合适的，由于是链接，在li中嵌入a标签即可，/这个符号直接打上去即可，最后面的那个箭头采用图标的样式用span包裹（这里注意span和a标签之间不能有空格）  
由于鼠标悬浮在上面的时候样式会出现改变，我们可以使用hover来进行样式更改。  
代码如下：

样式：

/* 侧边导航 */
    .firstLeft .sideNav{ 
    	width: 190px;
    	height: 522px;
    	background: #fff;
    	border: 1px solid #ff5000;
    	box-sizing: border-box;
    	border-top: none;
    	padding-top: 5px;
    }
    .firstLeft .sideNav li{ 
    	height: 32px;
    	line-height: 32px;
    	padding-left: 25px;
    	color: #999;
    	font-size: 14px;
    
    	transition: background-color 0.3s;
    }
    .firstLeft .sideNav li a{ 
    	font-size: 14px;
    	color: #666;
    }
    .firstLeft .sideNav li span{ 
    	font-size: 12px;
    	margin-right: 5px;
    }
    .firstLeft .sideNav li:hover{ 
    	background: #ffe4dc;
    	color: #f50;
    }
    .firstLeft .sideNav li:hover a{ 
    	color: #f50;
    }
    .firstLeft .sideNav a:hover{ 
    	text-decoration: underline;
    }

# 图片区域： #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 1]  
这里是第一部分的图片容器：  
这是轮播图（js再讲动态的），这里先实现这张图片，还有当鼠标悬浮上去的两个小箭头以及图正下方的四个小按钮：

## 两个小按钮 ##

那两个小箭头一般采用button标签（由于是行内块元素，所以很好的嵌入在图片上）配上图片就可以实现啦，然后当鼠标悬浮上去会呈现半透明的效果，这里使用rgba来使用（CSS3中的用法，支持ie9往上的浏览器，最后一个值表示透明度，透明度（A）取值 0~1 之间， 代表透明度。）  
放在块中间则采用top:50%;

## 四个小圆点 ##

这里采用span标签，再把它设置成行内块元素，再来个border-radiu:50%就可以实现圆点效果  
最后再加上右边的图片即可。

<div class="img1Box fr">
                       <div class="pic fl">
                        <div class="img">
                            <a href="#"><img src="../淘宝/img/pic_01.jpg" alt=""></a>
                        </div>
                        <button class="iconfont leftBtn"></button>
                        <button class="iconfont rightBtn"></button>
                        
                        <div class="circle">
    						<span class="active"></span><span></span><span></span><span></span><span></span>
    					</div>
                       </div>
    
                    <div class="ad fr">
                        <a href="#"><img src="../淘宝/img/ad_02.jpg" alt=""></a><a href="#">
                    </div>
                    </div>

/* 图片1容器 */
    .firstLeft .img1Box{ 
    	width: 690px;
    	height: 282px;
    	margin-top: 10px;
    }
    .firstLeft .pic{ 
    	width: 520px;
    	position: relative;
    }
    .firstLeft .pic button{ 
    	width: 20px;
    	height: 30px;
    	line-height: 30px;
    	color: #fff;
    	cursor: pointer;
    	border: none;
    	background-color: rgba(0,0,0,0.3);	/* 支持情况：IE9+ */
        /* 考虑到兼容性 */
    	background-color: #000\9;	/* IE9以下的浏览器认识 */
    	filter: alpha(opacity=30);	/* 透明 */
    	position: absolute;
    	top: 50%;
    	margin-top: -15px;
    	display: none;
    }
    .firstLeft .pic button.leftBtn{ 
    	left: 0;
    	border-radius: 0 15px 15px 0; 
    }
    .firstLeft .pic button.rightBtn{ 
    	right: 0;
    	border-radius: 15px 0 0 15px; 
    }
    .firstLeft .pic:hover button{ 
    	display: block;
    }
    .firstLeft .pic .circle{ 
    	position: absolute;
    	bottom: 15px;
    	left: 50%;
    	margin-left: -35px;
    	border-radius: 10px;
    	padding: 3px 0;
    	font-size: 0;
    
    	background-color: rgba(255,255,255,0.3);
    }
    .firstLeft .pic .circle span{ 
    	display: inline-block;
    	width: 8px;
    	height: 8px;
    	border-radius: 50%;
    	background-color: #fff;
    	margin: 0 3px;
    	cursor: pointer;
    }
    .firstLeft .pic .circle span.active{ 
    	background-color: #ff5000;
    }
    .firstLeft .ad{ 
    	width: 160px;
    }
    .firstLeft .ad img{ 
    	width: 160px;
    }

# 图片容器2 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 2]  
这里左边部分上方一个块级元素写入两个span标签，用来写入文字，加上左浮动和右浮动，然后箭头那里是有一条线的，我们记得不要忘记，给它一个div写上相关样式即可，然后再写入天猫的图片，这里写入padding-left: 136px;让它移动到左边，剩下来的图片通过 display: table-cell;vertical-align: middle;来垂直居中。  
这部分全部的代码：

<div id="firstScreen" class="layer clearfix">
               
                <div class="firstLeft fl">
                    <div class="sideNav fl">
                    <ul>
                        <li>
                            <a href="#">女装</a> / 
                            <a href="#">男装</a> / 
                            <a href="#">内衣</a><span class="iconfont fr"></span>
                        </li>
                        <li><a href="#">鞋靴</a> / 
                            <a href="#">箱包</a> / 
                            <a href="#">配件</a><span class="iconfont fr"></span></li>
                        	<li>
                                <a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span class="iconfont fr"></span>
                            </li>
                            <li>
                                <a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span class="iconfont fr"></span>
                            </li>
                            <li>
                                <a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span class="iconfont fr"></span>
                            </li>
                            <li>
                                <a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span class="iconfont fr"></span>
                            </li>
                            <li>
                                <a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span class="iconfont fr"></span>
                            </li>
                            <li>
                                <a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span class="iconfont fr"></span>
                            </li>
                            <li>
                                <a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span class="iconfont fr"></span>
                            </li>
                            <li>
                                <a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span class="iconfont fr"></span>
                            </li>
                            <li>
                                <a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a><span class="iconfont fr"></span>
                            </li>
                            <li>
                                <a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span class="iconfont fr"></span>
                            </li>
                            <li>
                                <a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span class="iconfont fr"></span>
                            </li>
                            <li>
                                <a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span class="iconfont fr"></span>
                            </li>
                            <li>
                                <a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span class="iconfont fr"></span>
                            </li>
                            <li>
                                <a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span class="iconfont fr"></span>
                            </li>
                        </ul>
                    </div>
                
                    <div class="img1Box fr">
                       <div class="pic fl">
                        <div class="img">
                            <a href="#"><img src="../淘宝/img/pic_01.jpg" alt=""></a>
                        </div>
                        <button class="iconfont leftBtn"></button>
                        <button class="iconfont rightBtn"></button>
                        
                        <div class="circle">
    						<span class="active"></span><span></span><span></span><span></span><span></span>
    					</div>
                       </div>
    
                    <div class="ad fr">
                        <a href="#"><img src="../淘宝/img/ad_02.jpg" alt=""></a><a href="#">
                    </div>
                    </div>
                
                    <div class="img2Box fr">
                        <div class="pic fl">
                            <div class="picTitle">
                                <div class="text clearfix">
                                    <span class="fl bg">理想生活上天猫</span>
                                    <span class="fr"><i>1</i>/6</span>
                                </div>
                                <div class="line">
                                    <span></span>
                                </div>
                            </div>
                            <div class="img">
                                <a href="#"><img src="img/pic_02.jpg" alt=""></a><a href="#"><img src="img/pic_03.jpg" alt=""></a>
                            </div>
        
                            <button class="iconfont leftBtn"></button>
                            <button class="iconfont rightBtn"></button>
                        </div>
                        <div class="ad fr">
                            <p class="title">今日热卖</p>
                            <a href="#"><img src="img/ad_03.jpg" alt=""></a>
                        </div>
                    </div>

/* 首屏内容 */
    .firstLeft{ 
    	width: 890px;
    }
    /* 侧边导航 */
    .firstLeft .sideNav{ 
    	width: 190px;
    	height: 522px;
    	background: #fff;
    	border: 1px solid #ff5000;
    	box-sizing: border-box;
    	border-top: none;
    	padding-top: 5px;
    }
    .firstLeft .sideNav li{ 
    	height: 32px;
    	line-height: 32px;
    	padding-left: 25px;
    	color: #999;
    	font-size: 14px;
    
    	transition: background-color 0.3s;
    }
    .firstLeft .sideNav li a{ 
    	font-size: 14px;
    	color: #666;
    }
    .firstLeft .sideNav li span{ 
    	font-size: 12px;
    	margin-right: 5px;
    }
    .firstLeft .sideNav li:hover{ 
    	background: #ffe4dc;
    	color: #f50;
    }
    .firstLeft .sideNav li:hover a{ 
    	color: #f50;
    }
    .firstLeft .sideNav a:hover{ 
    	text-decoration: underline;
    }
    
    /* 图片1容器 */
    .firstLeft .img1Box{ 
    	width: 690px;
    	height: 282px;
    	margin-top: 10px;
    }
    .firstLeft .pic{ 
    	width: 520px;
    	position: relative;
    }
    .firstLeft .pic button{ 
    	width: 20px;
    	height: 30px;
    	line-height: 30px;
    	color: #fff;
    	cursor: pointer;
    	border: none;
    	background-color: rgba(0,0,0,0.3);	/* 支持情况：IE9+ */
        /* 考虑到兼容性 */
    	background-color: #000\9;	/* IE9以下的浏览器认识 */
    	filter: alpha(opacity=30);	/* 透明 */
    	position: absolute;
    	top: 50%;
    	margin-top: -15px;
    	display: none;
    }
    .firstLeft .pic button.leftBtn{ 
    	left: 0;
    	border-radius: 0 15px 15px 0; 
    }
    .firstLeft .pic button.rightBtn{ 
    	right: 0;
    	border-radius: 15px 0 0 15px; 
    }
    .firstLeft .pic:hover button{ 
    	display: block;
    }
    .firstLeft .pic .circle{ 
    	position: absolute;
    	bottom: 15px;
    	left: 50%;
    	margin-left: -35px;
    	border-radius: 10px;
    	padding: 3px 0;
    	font-size: 0;
    
    	background-color: rgba(255,255,255,0.3);
    }
    .firstLeft .pic .circle span{ 
    	display: inline-block;
    	width: 8px;
    	height: 8px;
    	border-radius: 50%;
    	background-color: #fff;
    	margin: 0 3px;
    	cursor: pointer;
    }
    .firstLeft .pic .circle span.active{ 
    	background-color: #ff5000;
    }
    .firstLeft .ad{ 
    	width: 160px;
    }
    .firstLeft .ad img{ 
    	width: 160px;
    }
    /* 图片2容器 */
    .firstLeft .img2Box{ 
    	width: 690px;
    	height: 220px;
    	
    	margin-top: 10px;
    }
    .firstLeft .img2Box .picTitle{ 
    	height: 20px;
    }
    .firstLeft .img2Box .picTitle .text{ 
    	height: 17px;
    	line-height: 17px;
    }
    .firstLeft .img2Box .picTitle .text .bg{ 
    	background: url(../img/title_bg.png) no-repeat left;
    	padding-left: 136px;
    	columns: #666;
    }
    .firstLeft .img2Box .picTitle .text i{ 
    	color: #ff1648;
    }
    .firstLeft .img2Box .picTitle .line{ 
    	height: 3px;
    	background-color: #ff1648;
    	position: relative;
    }
    .firstLeft .img2Box .picTitle .line span{ 
    	width: 87px;
    	height: 3px;
    	background-color: #000;
    	position: absolute;
    	left: 0;
    }
    .firstLeft .img2Box .img{ 
    	width: 520px;
    	height: 200px;
    	background-color: #fff;
    	position: relative;
    /* display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签 让大小不固定元素垂直居中 */
    	display: table-cell;
    	vertical-align: middle;
    
    	/* display: flex; justify-content: space-around; align-items: center; */
    }
    .firstLeft .img2Box .img img{ 
    	margin: 0 10px;
    }
    .firstLeft .img2Box .ad .title{ 
    	height: 20px;
    	line-height: 20px;
    	
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70]: /images/20221120/c78e136d82524e8c8ec9bac803289fe3.png
[20201222205048287.png]: https://img-blog.csdnimg.cn/20201222205048287.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201222210247560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201222212155538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ==,size_16,color_FFFFFF,t_70