前端

前端练习-Agentur(1)

HTML&CSS

CSS初始化

1
2
3
4
5
6
* {margin: 0; padding: 0; }
a {color: #FFF; text-decoration: none; }
::selection {background: #F0694B; color: #FFF;}
::-moz-selection {background: #F0694B; color: #FFF;}
/*.content::selection {color: #FFF;}
.content::-moz-selection {color: #FFF;}*/

啊这个自带的代码高亮好丑啊~
刚开始没有在意用了*，现在改过来。
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
嗯，改成这样。
然后是超链接的样式，去掉下划线，改变颜色。
接下来是新学到的东西：元素状态伪类::selection: {attibute} 然后刚好用的是FF,刚开始怎么也没有效果，加上-moz-.

头部header

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
		<div class="header" id="header">
			<div class="logo">
				<a href="#">helllicht medien</a>
			</div>
			<ul class="menu">
				<li><a href="#">AGENTUR</a></li>
				<li><a href="#">KOMPETENZEN</a></li>
				<li><a href="#">PROZESS</a></li>
				<li><a href="#">PROJEKTE</a></li>
				<li><a href="#">BLOG</a></li>
				<li class="contaktli">
					<a class="contakt" href="#">KONTAKT</a></li>
			</ul>
<!-- 		<div class="contakt">
			<a href="#">KONTAKT</a>
		</div> -->
		<!-- 这里放了出来却不知道怎么排版 -->
		</div>

通过看样例的图片，发现最右边的一个子项和前面的不太一样，有不同的hover样式，有外边框，左外边距也不同。所以刚开始的想法是把这个独立出来，但是后来写样式的时候发现有问题，写起来麻烦了很多。又发现实际上一整个菜单栏都是在一个水平线上的，于是把KONTAKT这个按钮写进li里面，在往a里添加一个class。

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
.header 
{
	width: 100%;
	height: 75px;
	background-color: #656B74;
	position: fixed;
	top: 0;
	opacity: 0.9;
	transition: all 0.3s ease-in-out;
}
.logo 
{
	float: left;
	font-size: 20px;
	line-height: 20px;
	padding: 30px 0 0 30px;
	transition: all 0.3s ease-in-out;
}
/*又是这样= = 当有a标签的时候写动画好死鬼麻烦 */
.logo a
{
	transition: all 0.3s ease-in-out;		
}
.logo a:hover
{
	color: #CED3DB;
}
.menu 
{
	float: right;
}
.menu li 
{
	float: left;
	display: block;
/*	height: 75px;*/
/*	写了高度又写padding容易混乱*/
	margin-left: 25px;
	padding: 35px 0 0;
	font-size: 14px;
	transition: all 0.3s ease-in-out;
}
.menu li a
{
	transition: all 0.3s ease-in-out;	
}
/* 感觉这样写有点蛋疼= =*/
.menu li a:hover
{
	color: #F17357;
}
.menu .contaktli 
{
	padding: 0;
/* 如何避免为了更高的优先级写这些东西呢。。。*/
}
.contakt 
{
	display: block;
	margin: 23px 25px 9px 0 ;
	padding: 10px 20px;
	border: 2px solid #FFF;
	transition: all 0.4s ease-in-out;
/*  要计算好距离 包括Padding和border   */
}
.contakt:hover
{
	color: #F2694B;
	background-color: #FFF;
	border: 2px solid #FFF;
}
/* 这里发现写出来挺冗余的而且也实现不了效果 决定换html */
.contakt a:hover:
{
	color: #F2694B;
}

现在一看写的好多，而且很多是只有一句的=。=。直接改了：

  1. 先改Hover相关的样式： 在有Hover的a标签那里直接定义一个类好了，不用每次都要单独写一遍：类名定义为hoverani，给需要的HTML加上，css里面写.hoverani{transition: all 0.3s ease-in-out;}蛋疼的问题解决了。后面也是这么改。
  2. 按钮那里感觉好败笔啊。觉得如果把全部设置成固定的大小就没这么多事了= = 不需要改padding和margin算得苦逼苦逼的。可是现在该Js就要重新写一下。先放在这里吧。另外发现在li里的属性：display:{block;}可以去掉列表的圆点。还是在开头定义吧。

    大图banner

    HTML

    1
    2
    3
    4
    5
    6
    <div class="banner-wrap">
    	<div class="banner">
    		<p>MIT LEIDENSCHAFT FOR DIGITALE MEDIEN</p>
    		<h1>helllicht ist eine Agentur, spezialisiert auf Interface Design und Web Development.</h1>
    	</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
.banner-wrap
{
	background-color: #656B74;
	padding: 160px 290px 180px 290px;
}
.banner
{
	width: 100%;
	
/*  设置Padding值使该div撑出屏幕了  */
/*	解决办法：在外面套一个wrap设置Padding 内容div再设置成width：100% 
不要一起设置 不同浏览器会有问题 */
}
.banner p 
{
	display: block;
	width: 260px;
	background-color: #000;
	color: #FFF;
	font-size: 10px;
	padding: 5px;
	margin: 0 auto;
	text-align: center;
}
.banner h1
{
	display: block;
	color: #FFF;
	text-align: center;
	margin-top: 40px;
	font-size: 35px;
/*  添加了宽度后不能居中  */
}
  1. 在这里终于知道了之前提到过的wrap的含义。对一个div来说，不要直接设置宽度和padding值。引用一篇博文：Afar的专栏-关于width与padding

首先谈谈!important问题的引起（盒模型问题）:
在CSS标准中，一个盒模型包括4个区，分别是：内容、内边距（padding）、边框（border）和外边距（margin）。而Width宽度的计算，CSS有它的标准。但是实际上，不同的浏览器的表现却不同。比如，
Firefox（FF）是准确按照CSS标准：width为内容的宽度，也就是说： 层的宽度 = width + padding(left and right) + border-width； 而IE则把width作为整个层的宽度： 内容的宽度 = width - padding - border-width；
IE的这种解析，被认为是一个BUG。但事实上，这种解释也不无道理，人们在设计页面的时候关注得更多的是盒子的大小，而不是内容的大小。正是因为浏览器的不同解析，给CSS的设计带来一些困难。
针对这个问题，我们经常使用!important来区分Firefox和IE6.0： 程序代码: #content {
width: 414px !important; width: 400px; padding: 5px; border-width: 2px; }
Firefox识别!important，而IE不识别，且!important的width优先级高，因此FF理解为width: 400px，IE6.0理解为width: 414px，从而显示就相同了。
但是问题出在IE7，IE7.0对!important有了识别能力，但是对盒模型的解析却和IE6.0等一样，从而造成很大的麻烦。也就是说，!important的方法在IE7.0下变得不适用了。 而一般的情况下，border的使用相对较少的，并且border-width一般较小，因此最主要的问题就出在padding上了。网上很多人总结的经验是：padding要尽量少用，能用margin
的，就别用padding。这种说法是消极的，问题的解决不应该总是回避。
盒模型问题的解决：
仔细想想，其实问题就出在“width与padding/border-width的同时定义”上。而明白了这一点，解决的方法就不难想到了，只要添加一个无width定义的wrapper层，把原来的一个content层拆分成2个层，在wrapper中定义padding和border-width，然后在content中定义width： 程序代码:
.wrapper { padding: 5px; border-width: 2px; }
.content { margin: 0px; width: 400px; } 程序代码:

…

这样问题就可以得到解决，FF，IE6.0以及IE7.0都会获得相同的显示效果。更重要的是，没有使用任何CSS hack。
这种解决方法可以说是最终的方案，使用CSS hack的方法只是目前过渡阶段的临时方法。
对于网站构造，特别是对于样式比较复杂的网站，个人建议在重要的层快外加上wrapper层。但是对于目前现成的模板，可以有选择修改部分样式，或者使用其他方法。
是否适合所有的浏览器？
理论上，这种方法应该适用于各种浏览器。
但是本人认为除非大型网站，兼容FF，IE6.0，IE7.0已经足够，这里也是主要针对这三个最主流的浏览器，IE更低版本，以及其他浏览器上的可行性有待验证

总而言之，就是用wrap和content来一起用啦~
不过问题远远没有我想的那么简单= =
当把浏览器缩小的时候，我的心灵受到了伤害。
好！做响应式布局！然后看看案例是怎么写的。。。
另外p h1是块级元素。。。

主内容content

HTML

1
2
3
4
5
6
7
8
9
<div class="content-wrap">
	<div class="content">
		<h2>helllicht führt digitale Projekte zum Erfolg – und das bereits seit vielen Jahren</h2>
		<p>Wir sind davon überzeugt, dass Usability der ausschlaggebende Faktor für den Erfolg von digitalen Projekten ist. Mit unserem Gespür für relevante Details sowie dem Blick fürs große Ganze wissen wir, worauf es ankommt und sind mit absoluter Leidenschaft bei der Sache. </p>
		<p>Für unsere Auftraggeber aus Industrie, Mittelstand und der Kreativbranche konzipieren und realisieren wir Onepager, Corporate Websites sowie Online-Magazine. Dabei unterstützen wir unsere Kunden über den gesamten Prozess als Berater und schaffen so die Grundlage für richtige und nachhaltige Entscheidungen. </p>
		<p class="emp">Von der Idee bis zum Roll-Out</p>
		<p>Unsere Lösungen zeichnen sich durch messbare Ergebnisse aus, die langfristig den Wertschöpfungsprozess unserer Auftraggeber unterstützen. Für das perfekte Ergebnis begleiten wir sie von der ersten Idee bis zum finalen Roll-Out.</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
.content-wrap
{
	padding: 120px 320px 55px;
}
.content h2 
{
	font-size: 33px;
	margin-bottom: 55px;
}
.content p 
{
	margin-bottom: 55px;
	line-height: 32px;
	color: #454545;
}
.content .emp 
{
	color: #F0694B;
	margin-bottom: 20px;
}

这次终于好像没什么好说的了！除了窗口过小排版会很恶心之外。。
然后后面的内容用相同的类也可以渲染了。
发现个小东西：在.wrap ，.content 和 p 中，p本身设置了margin-bottom。但是它的父元素.content的高度大小不包括这个margin。而.content的父元素.wrap的高度大小却包括了p的margin-bottom。花插这是什么情况!?待我百度一下。。

分享到