示されているように、これはあなたの庭だけで登録されたブログのブログがある、のは、それを修正するためのステップバイステップを始めましょう。
1.適応コードブックを書きます
HTML
、
本体
{
高さ
：
100
％
;
ボーダー
：
0
;
マージン
：
0
;
パディング
：
0
;
}
ボディ
{
背景リピート
：なしリピート;
背景サイズ
：カバー;
背景アタッチメント
：固定;
背景画像
：
のURL
（
「https://thumbs.dreamstime.com/b/%E9%9B%A8%E6%B0%B4%E6%B0%B4%E6%BB%B4%E5%9C%A8% E7の％8E％BB％E7％92％83％E8％の83％8C％E6は％99％AF％E7％9A％84-％E8％A1％97％E9％81％93bokeh％E7％82％B9％E7 ％87％83ou-127043784.jpg」
）。
}
#home
{
width
:
95
%
;
}
#main
{
background
:
rgba
(
255
,
255
,
255
,
0.5
);
}
#mainContent
{
width
:
85
%
;
background
:transparent;
}
#blogTitle
{
display
:none;
}
这段代码调整了几个默认元素的宽度、高度和背景。由于CSS标准的规定，view的默认高度为0px，所以无法用百分比设置div的高度。这段代码中把html和body的高度设置为100%，确保了其他元素高度可用。
2.定义navbar和banner，实现渐变效果
#navbar
{
height
:
5
%
;
width
:
100
%
;
border
:
0
;
margin
:
0
;
padding
:
0
;
box-shadow
:
0
0
10
px
grey;
background
:
rgba
(
255
,
255
,
255
,
0.5
);
}
#banner
{
height
:
40
%
;
width
:
100
%
;
border
:
0
;
margin
:
0
;
padding
:
0
;
box-shadow
:
0
0
10
px
grey;
background
:
linear-gradient
(
160
deg
,
#00ffd5
20
%
,
#008cff
80
%
);
}
这段代码定义了两个div的样式，navbar和banner，这两个div会在下文用到。使用rgba函数实现了白色半透明，在使用CSS标准中的linear-gradient来实现纯CSS的渐变。
3.实现标题
#titleText
{
text-align
:center;
font-size
:
10
vh
;
font-family
:Tahoma;
color
:white;
}
#wrapper
{
display
:table;
margin
:
0
auto;
height
:
100
%
;
}
#cell
{
display
:table-cell;
vertical-align
:middle;
height
:
100
%
;
}
这段代码定义了wrapper和cell，使用table样式特有的vertical-align选项实现了垂直居中。HTML代码如下：
<
div
id=
"navbar"
></
div
>
<
div
id=
"banner"
>
<
div
id=
"wrapper"
>
<
div
id=
"cell"
>
<
span
id=
"titleText"
>Hi,there!
</
span
>
</
div
>
</
div
>
</
div
>
4.完成
经过上面的调教方法，你的博客应该会变成这样：
看起来瞬间提升了一个等级！好了，这就是初步的调教过程。之后可能会有Episode2，毕竟折腾永无止境么！Hope you enjoy:)！