用html+div+css制作田字格网页布局

html-css018

用html+div+css制作田字格网页布局,第1张

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.divL{

float: leftbackground-color: yellowwidth: 120pxheight: 120px

}

.divLT{

margin: 50px

}

.divLB{

margin: 0px 50px 50px

}

.divR{

float: rightbackground-color: yellowwidth: 120pxheight: 120px

}

.divRT{

margin: 50px 50px 50px 0px

}

.divRB{

margin: 0px 50px 50px 0px

}

.divTB{

background-color: #005580border-color: #000000width: 550pxheight: 50px

}

.divLR{

width: 80pxheight: 390pxbackground-color: #008000display: table-cell

}

</style>

</head>

<body>

<div class="divTB"></div>

<div style="display: tablewidth: 550px">

<div class="divLR"></div>

<div class="divL divLT"></div>

<div class="divR divRT"></div>

<div class="divL divLB"></div>

<div class="divR divRB"></div>

<div class="divLR"></div>

</div>

<div class="divTB"></div>

</body>

</html>

写的可能不太行，不知道满不满足你的要求

没有特别的办法，只有一个个字设置，如下

[color=#FF0000]测[/color][color=#FF3200]试[/color][color=#FF6500]彩[/color][color=#FF9700]色[/color][color=#F2C000]字[/color][color=#AFC000]彩[/color][color=#6CC000]色[/color][color=#29C000]字[/color][color=#00C01A]彩[/color][color=#00C05D]色[/color][color=#00C0A1]字[/color][color=#00C0E4]我[/color][color=#00A2FF]是[/color][color=#0070FF]彩[/color][color=#003DFF]色[/color][color=#000BFF]字[/color][color=#3500FF]啦[/color][color=#7800FF]啦[/color][color=#BB00FF]啦[/color][color=#FF00FF]啦[/color]

查看店铺，右击，查看源代码，在里面找到你要改字体的标签，可以使用ctrl+f，找到后，根据class名，更改样式即可，font-family：‘宋体’。

font-family、微软雅黑，宋体，seri、解释下：这个设置的意思是，优先微软雅黑，如果没有微软雅黑就用宋体，两个都没有就用serif类字体。

导航栏CSS样式制作流程：

1、导航栏CSS样式设置，预览:导航样式是选择设置后，预览区会自动发生变化，涉及到“经过"的效果，是指鼠标放到该元素上产生的效果，需要把鼠标放设置的元素上查看设置效果。

2、颜色、点击颜色选择器，在颜色选择界面，选择你喜欢的颜色，或者设置指定的颜色(在#位置，填写颜色编号，可以指定需要的颜色。

这个需要自己提前使用PS或者其他取色软件获得需要的颜色编号)。选择了马赛克，意思是不设置，没有任何颜色。

3、图片、部分设置框里，是设置图片。首先，进入淘宝店铺图片空间，上传准备好的背景素材图片，上传完成后，复制图片地址，在图片设置框里粘贴(一定是淘宝图片空间的图片，否则不能在淘宝店铺安装导航CSS代码)。

注意，部分样式设置里，一个位置有颜色设置，同样有图片设置，任取一种必须设置一种。

4、字体、字体大小、字体名称、字体样式，根据提供的选项进行选择即可。