前端

前端练习-Agentur(2)

区块block

HTML

1
2
3
4
5
6
7
<div class="block">
	<img src="images/schaefer.jpg" alt="" class="blimg">
	<div class="blcon">
		<p>„Große Ideen haben eine unbändige Kraft. Bei Konzeption und Interface Design helfen wir, aus Ideen nachhaltige digitale Produkte zu entwickeln. Dabei stehen stets der User und die Zielsetzung im Mittelpunkt.“</p>
		<p class="author">- Christoph Schäfer, Interface Design & Web Development</p>
	</div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.block
{
	width: 100%;
	background-color: #F0694B;
	height: 300px;
}
.blimg 
{
	margin-left: 16px;
	height: 300px;
	float: left;
}
.blcon
{
	color: #FFF;
	float: left;
/*	width: 950px;*/
/*	加了宽度才能浮动到上面 */
	padding: 45px 50px 50px 30px;
	font-size: 32px;
	line-height: 40px;
/*	发现在这里设置margin到了比较窄的屏幕 文字会被挤下去 */
	width: 855px;
/* 来个固定的宽度就能解决问题啦 只是用Padding宽度会满屏 */
/* 解决个毛线问题=。= */
}
.block .author
/* 是用这种方法来写好 还是加个div在里面？标签不用加class*/
{
	color: #F6C3C9;
	font-size: 15px;
	margin-top: 18px;
}

要说的都在注释里面了= =。一边打代码一遍写注释好欢乐的样子。

小动画introimg

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="introimg">
	<div class="intro">
		<div class="imgcon">
			<img src="images/ag-01.svg" alt="">
		</div>	
		<h3>Concept</h3>
		<p>Zuhören, das Problem verstehen und eine Lösung zur Erreichung des Ziels erarbeiten.</p>
	</div>
	<div class="intro line">
		<div class="imgcon">
			<img src="images/ag-02.svg" alt="">
		</div>
		<h3>Design</h3>
		<p>Ein Interface Design entwickeln, das Botschaft und Anwender zusammenführt.</p>
	</div>
	<div class="intro">
		<div class="imgcon">
			<img src="images/ag-03.svg" alt="">
		</div>
		<h3>Code</h3>
		<p>Zeile für Zeile soliden Code schreiben, der auf allen Endgeräten funktioniert.</p>
	</div>
</div>

令人激动的。。好吧现在看起来也不激动了。知道了小动画怎么做没了新鲜感。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
.introimg
{
	padding: 40px 100px 110px 100px;
}
.intro 
{
	float: left;
	width: 33%;
	height: 305px;
}
.intro:hover img 
{
	height: 100px;
	width: 100px;
	transition: all 0.3s ease-in-out;
}
/* 直接这样写会有浮动  所以决定先用一个div包起来固定大小*/
.imgcon
{
	height: 101px;
	width: 100px;
	margin: 0 auto;
	padding: 3px 0;
}
/* 还是没有那种从中心散开放大的效果 =。= */
.intro img 
{
	display: block;
/*	增加了这个属性才会居中 */
	margin: 0 auto;
	height: 95px;
}
.intro h3,.intro p 
{
	text-align: center;
	margin-top: 30px;
	padding: 0 30px;
}
.intro h3 
{
	font-weight: bold;
}
.intro p 
{
	color: #B7BFBC;
}
.line 
{
	border-left: 1px dashed #F0694B;
	border-right: 1px dashed #F0694B;
/*  ff中左边的比较少虚线 右边的比较多 其实左边就是虚线dash 右边的是点dotted*/ 
}
.introimg:after
{
	content: '';
	display: table;
	clear: both;
}
/*  妈妈我终于用上这个啦！清除浮动 */

这里有点小长。

  1. div取消高度 发现在这里影响的是两边虚线的长度。
  2. img那里希望能把图片放到父级div的中心，鼠标移到那里的时候有从中心放到的效果，但是设置了Padding好像还是不行，亏我高度多给了1Px…
  3. font-weight: bold; 好像没效果，去掉。
  4. 清除浮动用一次就记住啦~

人物介绍intro

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="content-wrap team">
	<div class="content">
		<h2>Unser Team</h2>
		<p>Der Herzschlag von helllicht ist das Team. Hier arbeiten Spezialisten mit absoluter Motivation für die große Sache. Jeden Einzelnen von uns zeichnet dabei nicht nur die Leidenschaft für digitale Medien aus, sondern auch ein umfassendes Wissen in den entsprechenden Disziplinen. </p>
		<p>Sollte uns Inhouse das nötige Knowhow einmal fehlen, arbeiten wir mit freien Experten oder anderen Agenturen zusammen. Innerhalb unserer Kernkompetenzen setzen wir aber natürlich auf ein Team von festangestellten Mitarbeitern.</p>
	</div>		
</div>
<div class="people-wrap team">
	<div class="people">
		<div class="sub">
			<img src="images/goschin.jpg" alt="">
			<h4>NICOLAL GOSCHIN</h4>
			<p class="post">Projektleitung & Konzeption</p>
			<p>06152 / 98760-82 • <span><a href="#">E-Mail schreiben</a></span></p>
		</div>
		<div class="sub">
			<img src="images/schaefer.jpg" alt="">
			<h4>Christoph Schäfer</h4>
			<p class="post">Interface Design & Web Development</p>
			<p>06152 / 98760-83 • <span><a href="#">E-Mail schreiben</a></span></p>
		</div>
		<div class="sub">
			<img src="images/wacker.jpg" alt="">
			<h4>Florian Wacker</h4>
			<p  class="post">Interface-Design & Web Development</p>
		</div>
		<div class="sub">
			<img src="images/koch.jpg" alt="">
			<h4>Anne Koch</h4>
			<p  class="post">Information-Design & Web Development</p>
		</div>
		<div class="sub">
			<img src="images/dingeldein.jpg" alt="">
			<h4>Sabine Dingeldein</h4>
			<p  class="post">Content-Strategie & Redaktion</p>
		</div>			
	</div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
.team 
{
	background-color: #F0F0F0;
/* 是要把所有的bg属性都写好还是如果只有背景色就只用这个bgc? */
}
.people-wrap
{	
	padding: 0 250px 50px 310px;
}
.people 
{
/*	padding: 50px 0 100px 0;*/
}
.people:after
{
	content: '';
	display: table;
	clear: both;
}
.sub 
{
	float: left;
	width: 300px;
	height: 400px;
	background-color: #fff;
	margin-right: 40px;
	margin-bottom: 45px;
/*	box-shadow: 1px 1px 3px;*/
	border-bottom: 2px solid #E0E0E0;
	padding: 25px;
/*  尽量使用盒模型来控制边距 不要用图片来设置p m感觉会比较好*/
	text-align: center;
	line-height: 0.9;
/*  发现会有奇怪的高度 应该是这个属性 */
}
.sub img 
{
	height: 300px;
}
.sub h4
{
	margin-top: 25px;
}
.sub .post
{
	color: #7D6686;
	font-size: 13px;
	margin-top: 15px;
}
.sub p 
{
	margin-top: 18px;
}
.sub a
{
	color: #F0694B;
	font-weight: bold;
}
/* 发现一个问题：
	设置的wrap没有设置Padding-bottom时，前面底部显示出来的距离其实是P设置了margin-bottom 卧槽这怎么能忍 
	解决办法：设置padding-bottom 大小和margin一样*/

怎么又写了这么多= =

  1. 有很多写一个选择器却只是用来设置盒子的内外边距感觉非常不好。应该有更好的方式。
  2. 原来我在做的时候有发现一些奇怪的问题。。这里就涉及到盒子的相互啥来着。。内外边距合并！

底部footer

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="footer">
	<div class="copyright">
		<p>© 2015 helllicht medien GmbH</p>
	</div>
	<div class="website">
		<a href="#">Neue Themenseite <span>onepager.de</span></a>
	</div>
	<ul class="list">
		<li><a href="#" class="hoverani">Presse</a></li>
		<li><a href="#" class="hoverani">Jobs</a></li>
		<li><a href="#" class="hoverani">Impressum</a></li>
		<li><a href="#" class="hoverani">Datenschutz</a></li>
		<li><a href="#" class="hoverani">Kontakt</a></li>
	</ul>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.footer
{
	padding: 35px 120px;
	background-color: #464D57;
}
.copyright,.website
{
	float: left;
	color: #FFF;
/* 这样写还是不能变成一行的排列 oh 妈蛋 不知道问题了 */
	display: inline;
	font-size: 13px;
}
.website
{
	margin-left: 30px;
}
.website span
{
	color: #F7CA18;
	font-weight: bold;
}
.list 
{
	float: right;
	list-style: none;
}
.footer .list li 
{
	float: left;
	margin-left: 16px;
	font-size: 13px;
}
/*.list li a
{
	transition: all 0.3s ease-in-out;	
}*/
/* 感觉这样写有点蛋疼= =*/
.list li a:hover
{
	color: #F17357;
}
/* 这里可以代码重用喔。。。 */
  1. 忘了加上清除浮动。
    然后好像就没啥了
    不过要吐槽一下，CSS里面太多样式是只写了一行设置距离的，感觉太冗余，应该有更好的办法。

##　小结一下
好这篇文章先到这里，下一篇写JS方面的。
其实学到挺多东西的，最后出来的效果和案例差不多，字体没有换掉所以看起来怪怪的。已经放到新浪的SAE了，准备以后都把自己写的网站都放到那里哈哈。这次的地址是：Agentur-biousco。源地址是：等我回宿舍再更新一下，电脑的无线网卡好像坏了QAQ，能连上wifi但是过几秒钟就断掉了=。==。=。=

分享到