发表于: 2018-07-12 13:25:46

1 692


task8.task9任务总结



官网脑图:




个人脑图:


总结知识点:开始对首页布局,首先引入bootstrap组件,在head里引入bootstrap.min.css,在body最下面引入jQuery.iin.js与bootstrap.min.js(为了防止一些bug)。然后就可以在bootstrap里找到我们需要的响应式导航栏,

引入进我们的html,发现其样式跟我们需求样式差距较大,删除我们不需要的东西之后,对其添加样式,由于是引入的bootstrap,之前的样式权重较高,于是采取一些增加我们修改样式的权重值,以致于达到修改样式效果,

代码如下:

<div class=" collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav navbar-right">
<li>
<a href="task8.html" class="headleft1" onmouseover="this.style.color='white'">首页
<span class="whitebox1"></span>
</a>
</li>

css样式如下:


.title1>.navbar-default .navbar-nav>li>a {
color: #fff;
margin-left: 2rem;
font-size: 1.6rem;
}


,利用定位知识,做一个白色长条定到导航栏文字下方,并利用媒体查询,设置出hover效果(hover时下方出现白条,移动端不会出现白条。)

然后布局footer。引入bootstrap的三列栅格系统。代码如下


<div class="container">
<div class=" footbox1 row">
<div class="col-sm-4">

<div class="col-sm-2">

,进行一些样式修改,达到我们需要的效果。

对首页的main内容,引入四列栅格系统,一步一步修改,达到美观效果,满足需求。。

然后是下面的合作方的logo图,发现引入不了栅格系统,于是利用媒体查询设置,大于992px效果。767-992px效果,320-767px效果。代码如下


@media screen and (min-width:320px) and (max-width:767px) {
.company1,.company2,.company3,.company4,.company5{
display: inline-block;
width: 100%;
line-height: 20rem;
text-align: center;
border: none;
background-color: #fff;
margin-bottom: 1rem;
}


最后还差一个轮播图插件,从bootstrap找到相应的轮播图效果,引入我们的html,操作简单,但是原理不理解。

然后布局页面二:页面二利用的是不定宽布局中:左边不定宽,右边自适应布局,我使用的依然是栅格!不多描述。页面二的难点在于hover效果。hover圆的时候可以出现实心圆。那怎么设置hover字的时候也出现实心圆?经百度发现hover也可以达到效果,利用hover+,可以对兄弟级也产生hover效果。对css使用之后,发现没有用,于是继续百度,在此期间,对伪元素的了解加深::before,::after。

伪元素将会在内容元素的前后插入额外的元素,因此当我们添加它们时,使用以下的标记方式,他们在技术上是平等的。

<p>
<span>:before</span>
 This the main content.
<span>:after</span>
</p>

但是这些元素实际上并不在文档中生成。它们将在外部可见,但是你将不会在文档的源代码中找到它们,因此,实际上它们是“虚假”的元素。尽管作为“虚假”的元素,事实上伪元素表现上就像是“真正”的元素,我们能够给它们添加任何样式,比如改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。

使用伪元素常见的属性有:content‘’,display:block。需要注意的是,默认生成的是内联元素,所以我们一定要把他设置display:block使他成为块级元素,才可以达到我们改变属性的效果。

在第三个界面。我利用伪元素达到了一个炫酷的清楚浮动效果,利用的就是“伪元素三件套”,

.head-box::after{
content: '';
display: block;
clear: both;
border-bottom: 1px solid #ccc;
}

学习了伪元素,发现也没有使用好,改变不了hover效果,这时候师兄告诉我,兄弟级的改变hover效果,被改变的只能放在后面,也就是说。文字放前面。空心圆放在后面,这样才可以对文字使用hover+效果时,让后面的空心圆变成实心圆。css代码如下:

.circlered:hover {
background-color: orange;
}

.circlered1:hover+.circlered {
background-color: orange;
}

。现在的效果是文字在前,圆在后,我们需要利用定位知识,把文字定到前面去,就可以达到我们的需求效果


然后就是最后一个界面。这里可以发现三个界面的header跟footer是一样的,直接代码拿过来就可以使用,页面三也是使用的bootstrap三列栅格。然后把一个栅格样式改变成我们需要的样式,剩下的复制就可以,在设置我们的职业推荐样式时,注意border。在这里border效果还是出了一些问题,在师兄帮助下才改掉。

最后一个页面的难点在于hover动画效果,我的想法是不hover时,显示的是职业界面。hover时把隐藏的界面显示出来,隐藏的界面覆盖住原界面。并且半透明。于是在大盒子里添加一个盒子,设置hover时的效果。代码如下:

<div class="container">
<div class="row clearfix info-box">
<div class="col-xs-12 col-md-4 col-sm-6 column introduction">
<div class="bigbox">
<div class="hover-word">
<h4>IOS攻城狮</h4>
<p>因为IOS攻城特别厉害,特别特别特别厉害,所以称为IOS攻城狮</p>
</div>

css如下:


.hover-word{
height: 100%;
width: 100%;
color: #fff;
position: absolute;
background-color: rgba(51, 51, 51, 0.68);
text-align: center;
padding: 5% 10%;
display: none;
}
.bigbox:hover .hover-word{
width: 100%;
bottom: 0;
display: block;
}

,原理是父级设置position:relative。自己设置absolute。在hover时定位上去,同时设置rgba。没有hover时使用display:none;

即可以达到效果。如图:



返回列表 返回列表
评论

    分享到