李洪强和你一起学习前端之(10)滑动门案例讲解,新闻列表

1.滑动门案例讲解

现在要求实现以下效果:



点击文字的时候要求文字和背景变成蓝色:



以下是实现代码和讲解:

首先分析:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 }
span.s1 { color: #596972 }
span.Apple-tab-span { white-space: pre }
<!--之前我们一直是切三部分,现在我们只需要切两部分就

可以了-->

<!--分析: 把图片的第一部分圆角给a标签,把第二部分给span

标签-->

2.1搭建基础架构:

<ul>
<li>
<!--a标签默认是行内元素,行内元素的宽度就是文字
撑开的宽度-->
<a href="#">
<span id="">
百度
</span>
</a>
</li>
<li>
<a href="#">
<span id="">
百度
</span>
</a>
</li>
<li>
<a href="#">
<span id="">
百度
</span>
</a>
</li>
</ul>

2.2 设置公共样式

<style type="text/css">
/*1.设置公共样式*/
li{
list-style: none;
float: left;
}

</style>

2.3给li下面的a标签设置圆角图片

　　注意: 给a设置样式的

时候最好不要单独写一个"a",最好用li下面的a或者说给li

起一个类名,然后根据这个类名拿到a

li a{
/*2.1设置a的高度*/
height: 35px;
/*2.2设置a的背景图片,同时图片不能平铺*/
background: url(img/bg_r1_c1.png) no-repeat;
/*2.3直接给a设置高度不起作用,所以*/
display: inline-block;
}

此时得到的样式是:



因为a是span的父盒子,想让span的距离a标签左边有一定的距离,我们可以设置

　/*2.4设置a标签内部元素距离左边有一定的距离(就是
* 背景图片的宽度.
* 注意: padding影响的是盒子内部子元素距离父元
* 素的距离);*/
padding-left: 7px;

2.4给span设置背景图片

2.4.1-2.4.3

/*2.4设置span的背景图片*/
li span{
/*2.4.1设置span的高度*/
height: 35px;
/*2.4.2设置span的背景图片,同时图片不能平铺
注意: 背景图片默认是左边对齐,如果想右边对齐的话,
要设置right*/
background: url(img/bg_r1_c2.png) no-repeat right;
/*2.4.3直接给span设置高度不起作用,所以设置*/
display: inline-block;
}

　　此时的效果是:



2.4.4文字压着背景图片,需要设置

　/*2.4.4设置文字距离右边的距离*/
padding-right: 24px;

2.4.5设置文字垂直居中

/*2.4.5设置文字居中*/
line-height: 35px;

2.5设置选中时候的文字颜色和背景颜色

　　　　/*2.5设置选中时的样式*/
li a:hover{
/*2.5.1设置背景图片*/
background: url(img/blue_r1_c1.png);
/*这时只改变了a标签的背景图片,还要设置span下的选中的背景*/
/*图片*/
}
/*这时只改变了a标签的背景图片,还要设置span下的选中的背景*/
/*图片,使用后代选择器选中span标签选中时候的样式*/*/
li a:hover span{
background: url(img/blue_r1_c2.png) right;
}

3.尚合案例:

实现以下效果:





3.1案例头部开始

分析: 首先头部可以放一个盒子居中显示,然后里面左右边各一个盒子,

设置浮动

3.1.1 css初始化

/*3.1.1css初始化*/
body,h1,h2,h3,h4,h5,h6,ul,dl,dd,p{
padding: 0;
margin: 0;
}
body,div,p,h1,h2,h3,h4,h5,h6,a,span{
/*设置字体大小*/
font-size: 12px;
/*设置字体样式,如果还想设置其他的字体,
使用逗号隔开*/
font-family: "宋体";
}
a{
text-decoration: none;
}
input{
/*表单标签的时候将边框去掉*/
border: 0,none;
/*去掉轮廓线*/
outline-style: none;
}
　　　　　　ul{
　　　　　　　　list-style : none;
　　　　　　}

3.1.2头部整体盒子的设置

头部结构

<!--头部分开始-->
<div class="header">
</div>
<!--头部分结束-->

头部样式的设置

/*3.1.2头部分开始*/
.header{
/*设置宽度*/
width: 980px;
/*设置高度*/
height: 62px;
/*设置居中显示*/
margin: 0 auto;
/*一开始为了调试可以设置一个背景颜色*/
background-color: palegreen;
/*注意: 当父盒子没有设置边框的时候,里面的子盒子
设置的时候也会把父盒子带下来,需要在父盒子里设置
voerflow: hidden*/
/*此代码的意思是: 外边距塌陷,让超出的部分隐藏*/
overflow: hidden;

}

3.1.3logo的设置

<!--logo部分-->
<div class="logo">
<!--图片-->
<img src="img/logo.jpg"/>
</div>

logo的样式

/*logo部分开始*/
.logo{
height: 39px;
width: 179px;
/*默认图片靠上显示设置距离上面的距离
注意: 当父盒子没有设置边框的时候,里面的子盒子
设置的时候也会把父盒子带下来,此时需要在父盒子里设置
voerflow: hidden才有效果*/
margin-top: 10px;
}
/*logo部分结束*/

3.1.4 搜索栏

设置搜索栏的结构

<!--搜索部分-->
<div class="search">
<!--搜索里面的输入框-->
<input type="text" name="" id=""
value="请输入..." class="search-text"/>
<!--搜索里面的搜索按钮-->
<input type="button" name="" id=""
value="" class="btn"/>
<!--注意: 此时搜索部分不见了,因为头部logo的盒子和
搜索的盒子都是块级元素,独占一行显示,又因为我们
在头部和盒子设置了overflow: hidden 让超出的部分
隐藏了,所以才看不见.需要在两个盒子的样式中设置浮动-->
</div>

设置搜索栏的样式

/*search部分开始*/
.search{
/*设置浮动解决了都是块级元素,不显示的问题*/
float: right;
margin-top: 20px;
/*设置边框*/
border: 1px solid #E1E1E1;

}
.search-text{
/*给search下面的文字输入框设置宽高*/
width: 165px;
height:28px;
float: left;
}
.search .btn{
/*给search下面的按钮设置宽高*/
width: 31px;
height:34px;
float: left;
/*在这里注意一点:*/
/*position: absolute;是设置定位的,
跟background-position:不是一回事,
background-position:是设置图片的位置''*/

/*设置背景图片*/
background: url(img/search2.jpg);

}
/*search部分结束*/

3.1.5 导航栏

导航栏的结构

<!--导航部分开始-->
<div class="nav">
<ul>
<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>
<!--导航部分结束-->

导航栏的样式

/*导航部分开始*/
.nav{
/*宽度不用设置,因为是整个浏览器的宽度
只设置高度*/
height: 55px;
border-top: 1px solid #E1E1E1;
/*设置背景图片 要平铺*/
background: url(img/nav_bg.png)
}
/*首先设置文字左边的距离*/
.nav ul{
margin-left: 120px;

}
/*其次设置让文字一行显示*/
.nav li{
float: left;
height: 55px;
/*设置图片,不平铺,靠右,靠上*/
background: url(img/nav_bg-line.png) no-repeat right top;
/*设置文字垂直居中*/
line-height: 55px;
}
.nav a{
height: 55px;
display:inline-block;
padding: 0 46px;
color: black;
/*让文字粗体显示*/
font-weight: 700;
}
.nav a:hover{
color: #7CB609;
}

/*导航部分结束*/

此时的样子:



3.2新闻列表开始

3.2.1banner

banner结构

<!--banner部分开始-->
<div class="banner">
<img src="img/banner.jpg"/>
</div>

banner的样式

/*banner部分开始*/
.banner{
width: 980px;
height: 597px;
margin:  0 auto;
}
/*banner部分结束*/

3.3新闻列表完成

3.3.1最新公告部分

<!--公告开始-->
<div class="news">
<!--放一个居中的盒子-->
<div class="news-body">
<!--居中的盒子里面放一个左盒子-->
<div class="l-news">
最新公告: 尚合Aone尚合Aone尚合Aone尚合Aone
尚合Aone尚合Aone尚合Aone尚合
</div>
<!--居中的盒子里面再放一个右边的盒子-->
<div class="r-imgs">
<img src="img/zone.png"/>
<img src="img/xinlang.png"/>
<img src="img/renren.png"/>
<img src="img/weibo.png"/>
</div>

</div>
</div>
<!--公告结束-->

最新公告的样式

/*公告部分开始*/
.news{
/*注意: 在量高度的时候不要量边框*/
height: 29px;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
background-color: #FBFBFB;
margin-bottom: 10px;
}
.news-body{
width: 980px;
height: 29px;
margin: 0 auto;
/*background-color: chartreuse;*/
}
.l-news{
/*设置浮动*/
float: left;
line-height: 29px;

}.r-imgs{
float: right;
margin-top: 6px;
}
/*公告部分结束*/

3.3.2 商品展示

左边

<!--商品展示开始-->
<div class="product">
<!--左边盒子-->
<div class="l-prt">
<div class="public">
<img src="img/o.jpg"/>
<span id="">新品发布</span>
</div>
<!--图片-->
<div class="picture">
<img src="img/home_hot_01.png"/>
</div>

<!--按钮-->
<div class="l-sj">
<img src="img/left.png"/>
</div>

<div class="r-sj">
<img src="img/right.png"/>

</div>

</div>
<!--中间盒子-->
<div class="m-prt">
<div class="public">
<img src="img/o.jpg"/>
<span id="">新闻中心</span>
</div>
<ul>
<li>
<a href="" class="fcolor">致歉公告</a>
</li>
<li>
<a href="">首批尚合Aonet已全部售馨!</a>
</li>
<li>
<a href="">【媒体报导】国产高性价比
尚合Aonet四核手机评测</a>
</li>
<li>
<a href="">我司产品已经通过了国家强制性
产品3C认证</a>
</li>
<li>
<a href="">尚合Aone智能手机入网证已经获工
信部门
审批下发.</a>
</li>
<li>
<a href="">我司通过ISO9001:2008国际质
量管
理体系认证</a>
</li>
</ul>

</div>
<!--右边盒子-->
<div class="r-prt">
<div class="public">
<img src="img/o.jpg"/>
<span id="">技术与支持</span>
</div>
<div class="div-public">
售后服务
</div>
<div class="div-public">
投诉与建议
</div>
<div class="div-public">
联保网点
</div>
<div class="div-public">
常见问题
</div>
<p>
深圳市汇聚中和科技发展有限公司 服务热线:
400-633-7922
</p>

</div>

</div>
<!--商品展示结束-->

中间

<!--商品展示开始-->
<div class="product">
<!--左边盒子-->
<div class="l-prt">
<div class="public">
<img src="img/o.jpg"/>
<span id="">新品发布</span>
</div>
<!--图片-->
<div class="picture">
<img src="img/home_hot_01.png"/>
</div>

<!--按钮-->
<div class="l-sj">
<img src="img/left.png"/>
</div>

<div class="r-sj">
<img src="img/right.png"/>

</div>

</div>
<!--中间盒子-->
<div class="m-prt">
<div class="public">
<img src="img/o.jpg"/>
<span id="">新闻中心</span>
</div>
<ul>
<li>
<a href="" class="fcolor">致歉公告</a>
</li>
<li>
<a href="">首批尚合Aonet已全部售馨!</a>
</li>
<li>
<a href="">【媒体报导】国产高性价比
尚合Aonet四核手机评测</a>
</li>
<li>
<a href="">我司产品已经通过了国家强制性
产品3C认证</a>
</li>
<li>
<a href="">尚合Aone智能手机入网证已经获工
信部门
审批下发.</a>
</li>
<li>
<a href="">我司通过ISO9001:2008国际质
量管
理体系认证</a>
</li>
</ul>

</div>
<!--右边盒子-->
<div class="r-prt">
<div class="public">
<img src="img/o.jpg"/>
<span id="">技术与支持</span>
</div>
<div class="div-public">
售后服务
</div>
<div class="div-public">
投诉与建议
</div>
<div class="div-public">
联保网点
</div>
<div class="div-public">
常见问题
</div>
<p>
深圳市汇聚中和科技发展有限公司 服务热线:
400-633-7922
</p>

</div>

</div>

右边

<!--商品展示开始-->
<div class="product">
<!--左边盒子-->
<div class="l-prt">
<div class="public">
<img src="img/o.jpg"/>
<span id="">新品发布</span>
</div>
<!--图片-->
<div class="picture">
<img src="img/home_hot_01.png"/>
</div>

<!--按钮-->
<div class="l-sj">
<img src="img/left.png"/>
</div>

<div class="r-sj">
<img src="img/right.png"/>

</div>

</div>
<!--中间盒子-->
<div class="m-prt">
<div class="public">
<img src="img/o.jpg"/>
<span id="">新闻中心</span>
</div>
<ul>
<li>
<a href="" class="fcolor">致歉公告</a>
</li>
<li>
<a href="">首批尚合Aonet已全部售馨!</a>
</li>
<li>
<a href="">【媒体报导】国产高性价比
尚合Aonet四核手机评测</a>
</li>
<li>
<a href="">我司产品已经通过了国家强制性
产品3C认证</a>
</li>
<li>
<a href="">尚合Aone智能手机入网证已经获工
信部门
审批下发.</a>
</li>
<li>
<a href="">我司通过ISO9001:2008国际质
量管
理体系认证</a>
</li>
</ul>

</div>
<!--右边盒子-->
<div class="r-prt">
<div class="public">
<img src="img/o.jpg"/>
<span id="">技术与支持</span>
</div>
<div class="div-public">
售后服务
</div>
<div class="div-public">
投诉与建议
</div>
<div class="div-public">
联保网点
</div>
<div class="div-public">
常见问题
</div>
<p>
深圳市汇聚中和科技发展有限公司 服务热线:
400-633-7922
</p>

</div>

</div>
<!--商品展示结束-->

商品展示左边中间和右边样式的设置

/*商品展示开始*/
.product{
width: 980px;
/*高度不要*/
/*height: 300px;*/
/*background-color: darkgray;*/
margin: 0 auto;

}
.l-prt{
width: 310px;
height: 224px;
border: 1px solid #E4E4E4;
float: left;
position: relative;
}
.m-prt{
height: 224px;
width: 373px;
border: 1px solid #E4E4E4;
float: left;
margin-left: 12px;
}
.m-prt li{
height: 27px;
line-height: 27px;
border-bottom: 1px dashed #DCDCDC;

}
.m-prt a{
color: #666;
}
.m-prt ul{
margin-top: 10px;
margin-left: 23px;
margin-right: 18px;

}
.r-prt{
height: 224px;
width: 268px;
border: 1px solid #E4E4E4;
float: right;
}
.public{
margin-top: 12px;
margin-left: 6px;
/*文字图片垂直显示*/
color: #7AB800;

}
.public img{
/*设置图片居中*/
vertical-align: middle;
}
.picture{
width: 205px;
height: 149px;
/*定位-给子盒子设置绝对定位*/
position: absolute;
left: 44px;
top: 50px;
}
.l-sj{
/*设置绝对定位*/
position: absolute;
left: 60px;
top: 120px;
}
.r-sj{
/*设置绝对定位*/
position: absolute;
right: 60px;
top: 120px;
}
a.fcolor{
font: 20px;
color: red;
/*加粗*/
font-weight: 700;
}
/*设置颜色*/
.m-prt a:hover{
color: chartreuse;
}
/*右侧的盒子*/
.div-public{
height: 12px;
line-height: 12px;
/*离左侧有个距离*/
/*上右下左*/
margin: 10px 0 0 28px;
/*设置边框*/
border-left: 3px solid #7AB800;
/*让文字距离边框有一定的距离*/
padding-left: 6px;
}
.r-prt p{
margin-top: 30px;
margin-left: 28px;
}

/*商品展示结束*/

3.4案例完成

底部-上

<!--结尾开始-->
<div class="footer">
<div class="min-footer">
<dl>
<dt>尚合首页</dt>
<dd>返回首页</dd>
</dl>
<dl>
<dt>尚合首页</dt>
<dd>返回首页</dd>
</dl>
<dl>
<dt>尚合首页</dt>
<dd>返回首页</dd>
</dl>
<dl>
<dt>尚合首页</dt>
<dd>返回首页</dd>
</dl>
</div>
<div class="bottom">
<p>
深圳市深圳市深圳市深圳市深圳市深圳市深圳市
深圳市深圳市深圳市深圳市深圳市深圳市深圳市
</p>
<p>
深圳市深圳市深圳市深圳市深圳市深圳市深圳市
</p>

</div>

</div>
<!--结尾结束-->

底部下:

<!--结尾开始-->
<div class="footer">
<div class="min-footer">
<dl>
<dt>尚合首页</dt>
<dd>返回首页</dd>
</dl>
<dl>
<dt>尚合首页</dt>
<dd>返回首页</dd>
</dl>
<dl>
<dt>尚合首页</dt>
<dd>返回首页</dd>
</dl>
<dl>
<dt>尚合首页</dt>
<dd>返回首页</dd>
</dl>
</div>
<div class="bottom">
<p>
深圳市深圳市深圳市深圳市深圳市深圳市深圳市
深圳市深圳市深圳市深圳市深圳市深圳市深圳市
</p>
<p>
深圳市深圳市深圳市深圳市深圳市深圳市深圳市
</p>

</div>

</div>
<!--结尾结束-->

尾部样式

/*结尾开始*/
.footer{
height: 220px;
background-color:#2D2D2D;
/*border-bottom: 2px dashed #414141;*/
margin-top: 20px;
}
.min-footer{
width: 980px;
height: 220px;
margin: 0 auto;

}
.min-footer dl{
float: left;
margin-right: 30px;
margin-top: 20px;
}
dt{
color: whitesmoke;
}
dd{
margin-top: 10px;
color: whitesmoke;
}
.bottom{
height: 82px;
border-top: 2px dashed #414141;
background-color: #2D2D2D;
/*设置文字居中*/
text-align: center;

}
.bottom p{
margin-top: 10px;
}

/*结尾结束*/

完成

3.　css的复习

3.1　　CSS第一天

css的概念

　　 css层叠样式表

基础选择器

　　>标签选择器

　P{

　　　　属性: 值

　　　　}

　　>类选择器(相当于人的名字)

注意:类选择器通过点来定义
　　　　.自定义类名{

　　　　}

　通过class调用

　　　类的定义样式:不推荐使用中文定义类名

　　

　　>id选择器(相当于人的身份证,一个标签不能调用多个id选择器)

　　　　

#自定义名{

　　　　}

　　>通配符选择器

　　　

　*{

　　

　　　　}

　　　通配符选择器:所有的元素都选中

复合选择器

　　>标签指定式选择器

标签名.(#)选择器{

　　　　}

　　>后代选择器(选择器之间有个空格,选择器是包含嵌套的关系)

选择器 选择器{

　　　　}

　　　　标签关系包含嵌套关系

　　>并集选择器　　　　

选择器,选择器{

　　　　//将涉及到的选择器全部选中
　　　　}

　　>属性选择器

　input[type] [id]{

　　　　color:red

　　　　}

　　>子代选择器　　　

只能选中直接的子代　
div > span{

　　　　color: red

　　　　}

注意: 子代选择器,直接选择父元素中的直接子元素



1.2 CSS第二天

书写方式:

　　内嵌式写法

　　外联式写法

　　使用link标签中的 Href = ""属性将外部样式表引入到当前页面中

　　行内式写法

标签显示模式的分类:

　　块级元素

　　行内元素

　　行内快元素

Display:block　　 以块级元素去展示
　　Display: inline-block　　行内快
　　Display:inline　　行内
浮动/绝对定位/固定定位也可以实现模式的转化

三大特性:

　　层叠性

　　　　指的是当给一个标签设置样式发生冲突的时候,　层叠性,与调用的顺序没有关系,跟样式定义

　　　　顺序有关

　　继承性

　　　　有关文字的属性,都可以实现继承

　　　　特殊情况:

　　　　　　>a标签不能直接继承父元素中的文字颜色(因为默认a标签有一个样式)

　　　　　　>标题标签不能直接继承父元素中的文字大小

　　优先级

　　　　默认-标签-类-id-行内-

　　　　特点:　

　　　　　　继承的权重为0.意思是说: 当给一个父元素设置完样式的时候,如果子元素没有设置样式,直接拿父元素的样式

　　　　　　权重会叠加.

　　伪类

//超链接的默认样式

　　　　a:link{

　　　　}

　　　　//访问过后的样式

　　　　a:visited{

　　　　}

　　　　//鼠标移动到元素上的样式

　　　　a:hover{

　　　　}

　　　　//超链接激活的样式

　　　　:active{

　　　　}

　　　　//表单元素获取焦点的样式

　　　　:focus{

　　　　}　　

　　背景

　　　　设置背景颜色:backgroud-color
　　　　设置背景图片: background-image
　　　　设置图片平铺方式: background-repeat
　　　　设置图片的对齐方式:background-Position
　　　　设置背景图片是否固定:background-attachment :fixed;

1.3 CSS第三天

行高

　　1.行高可以继承

　　2.行高单位 px em % 不带单位

　　3.单独给一个标签设置行高:

　　Font-size: 20px

　　Px 　　 20px

　　2em 　40px

　　%　　

　　不带单位

　　4.给父盒子设置行高

　　给父元素行高: 20px

　　子元素:先计算后继承

盒模型:

　　border:边框(宽度,颜色,样式.宽度和颜色可以不写)

　　padding:

　　　　将盒子内容距离盒子边框的距离

　　　　边框和内边距可以影响盒子大小

　　　　继承的盒子padding值在父元素宽度范围内,不影响盒子大小

　　margin:

　　　　垂直外边距合并:当两个盒子垂直显示的时候,外边距以最大的外边距为准

　　　　解决外边距盒子塌陷问题:

　　　　　　1.给父盒子设置border值

　　　　　　2.给父盒子设置overflow:hidden

　　

1.4 CSS第四天

浮动

　　浮动的特点:　　

　　>浮动的元素不占位置(脱标)

　　>设置浮动可以实现,元素模式的转换

　　>块级元素在一行上显示

　　>图片文字环绕

　　>网页布局

定位(Position)

　　

　　　　>静态定位

　　　　>绝对定位(看脸型)　

　　　　　　*脱标了

　　　　　　*绝对定位可以实现模式转换

　　　　>相对定位(是相对自己原来的位置进行定位)

　　　　　　*相对定位没有脱标

　　　　　　*相对定位:子绝父相

　　　　>固定定位

　　　　　　*固定定位脱标了

　　　　　　*能实现模式的转换

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b9edb }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #3c7400 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #ff7900 }
span.s1 { color: #000000 }
span.s2 { color: #060606 }
span.s3 { color: #929151 }
span.s4 { color: #596972 }
span.s5 { color: #ad5cff }
span.s6 { color: #97a700 }
span.s7 { color: #3c7400 }
span.s8 { color: #ff7900 }
span.Apple-tab-span { white-space: pre }