好看的css样式模板？网页设计的模板
其实好看的css样式模板的问题并不复杂，但是又很多的朋友都不太了解网页设计的模板，因此呢，今天小编就来为大家分享好看的css样式模板的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
怎样制作CSS模板请详细说明
跟我一起玩百度空间CSS教程+090+(从"零"开始学玩百度空间)
谭诚工作室:
1.让你看懂css各个参数
2.百度空间CSS使用说明
3.怎样编写CSS的!
4.CSS代码解密
5.一个CSS的漏洞
6.增加自定义模块功能
7.更换主体及文章的背景
8.透明flash代码
9.百度空间十大宝藏
10.制作个性化的标题栏
11.看到更多的百度空间
12.百度空间的8个优缺点
13.专栏分割线的代码修改
14.添加自己的LOGO图片
15.宣传百度空间的方法
16.添加多首背景音乐
17.设置透明背景图
18.更改空间的鼠标样式
19.在空间里加入滚动条
20.透明的背景音乐的播放器
21.透明个性化滚动条
22.给链接添加背景色效果代码
23.显示"点击给你发消息"怎么在空间做!
24.去掉文章题目下划线
25.常用插入图片位置的代码
26.如何隐藏播放器而不影响音乐播放
27.如何有字体阴影
28.自制闪字空间名称
29.解决回车换两行的问题
30.调整一下行距
31.让空间拥有精美flash背景
32.让空间自动弹出对话框！
33.修改blog显示的文字颜色大小
34.如何让你的浏览器滚动条变色
35.为评论和链接加上图片
36.如何在"其它"下面加上图片
37.百度空间的名称如何用艺术字？
38.百度空间文字发光的方法
39.文字快速插链接
40.空间模块巧移动
41.个性化你的IP显示，自定义颜色
42.全透明
43.空间背景半透明
44.如何在百度空间的文章标题周围加花边图案？
45.关于百度空间照片大小限制的问题!!!
46.如何在百度空间发表文章时插入FLESH动画？
47.怎样换百度空间的背景
48.做分割线的方法
49.在百度空间里面添加自己的特效
50.在文章中快速插入图片
51.添加计数器的两种方法
52.如何在空间顶部加入图片
53.发表评论框的图片
54.改变空间主页名称和简介的字体大小
55.给超链接添加按钮效果
56.如何给评论框添加背景
57.Iframe用法的详细讲解
58.背景图片素材01
59.图片素材20060929
60.我的自定义设计
61.CSS鼠标样式大全
62.跟我一起玩百度空间的音乐和视频+
63.为<好友列表>增加一个滚动条
64.空间模块巧移动+文字快速插链接
65.怎么去掉百度空间里模块的框框！
66.基本颜色代码+
67.在你的空间中加入幽默元素..
68.百度空间吧[精品]贴+
69.如何在博客上---中--下加入图片（时钟）
72.教你10个你未必知道的CSS技巧!
73.用CSS进行百度空间样式设计!
74.百度空间自动友情链接
75.一起玩百度空间帮助
76.一起玩百度空间榜单
77.点对点宣传百度空间
78.百度空间常见27+问题
79.怎样让百度、Google搜到你的博客
80.如何加上一个个性时间网页上？
81.教你怎样让背景自动更新,包括头背景
82.在 CSS中关于字体处理效果的思考
83.如何置顶文章及美化自定意模块!
84.如何美化页眉部分
85.更换背景及滚动轴颜色和空间半透代码
86.如何设置标题.简介及文章字体为光晕字
87.用CSS来控制网页背景
88.CSS产生的特殊效果
89.用Css控制IE5.5浏览器中滚动条
90.css语法(百度空间)
参考资料：
百度空间模板制作
现在百度空间新增了可视化编辑器，CSS代码编辑器也提供了一套基准代码，框架结构非常完整，所以现在 hier们制作模板可以说是易如反掌啦。
先说可视化编辑器。进入你的空间，点“管理中心”——“空间装扮”——“挑选模板”——“我也来设计”，就可以进入可视化编辑器了。
第一步，你选择一个基准的色调，然后点击“下一步”。
第二步，你可以设置背景图片和模块位置等信息，之后设置好模板的名称、标签，以及色系，就可以保存了。
这是最简单的制作模板的方法。下面，就让我再来详细说说用 CSS代码怎么实现精密的编辑。
基准模板已经保存在了你的自定义模板中。你需要调出来。进入空间装扮，然后点击“挑选模板”——“我设计的”，找到刚刚做好的基准模板，点“编辑”——“CSS编辑器”。
你首先要做的是，往下翻页，找到“最新动态模块”下方的
/*---==css-edit code here==---*/
这一行文字，把其下的所有文字全部删除。下方的这些代码是可视化编辑器多出来的代码，若不删除，那么后面做精密修改时，上方的 CSS代码会与其下的 CSS代码发生冲突，这样精密修改就无法实现。
1.设置背景图片和文字颜色
找到“大背景颜色及背景图片设置”模块的第一行：
#body{background:#f3f3f3;}
background:后面的是颜色代码，简单地说，你可以使用下面的颜色：
white：白色
silver：银色
gray：灰色
black：黑色
red：红色
yellow：黄色
green：绿色
lime：鲜绿色
blue：蓝色
skyblue：天蓝色
pink：粉色
magenta或 violet或 purple：紫色
cyan：青色
orange：橙色
brown：棕色
当然，可以使用的英文单词远远不只这些，【这里】列出的颜色的英文单词最多，绝大多数都可以使用。
在颜色下方添加一行
background-image: url(********)
可以设置背景图片，括号里的内容就是背景图片的 URL地址。
背景图片默认是横向、纵向均平铺，如果觉得不好看，那么可以在小括号后面添加代码，请你根据需要选择合适的代码：
no-repeat表示横向、纵向均不平铺
repeat-x表示仅横向平铺
repeat-y表示仅纵向平铺
接下来是{color:#555b6e}这一行是设置页面的文字颜色的，你可以使用任意一个英文单词直接设置颜色，也可以参考 CSS帮助，选择你所需要的颜色，然后复制其颜色代码，把原来的替换掉，就可以实现了。如{color:red}或者{color:#ff0000}就是设置文字颜色为红色。注意行末的分号一定不要丢掉。
background-position是指背景图片的位置。你可以使用如下九中方案：
left top：位于左上角
center top：位于正上方
right top：位于右上角
left center：位于左侧的正中央
center：位于正中央
right center：位于右侧的正中央
left bottom：位于左下角
center bottom：位于正下方
right bottom：位于右下角
在使用后六种方案的时候，可能会遇到因为加载出了整个空间页面，而导致图片的位置移动了。比如使用 center方案的时候，同时你又设置了不平铺，等到整个网页加载出来的时候，你就看不到背景图片了。因为设置的是位于整个网页的正中央，而不是整个屏幕的正中央。包括前三种方案也一样，当网页下移时，图片也就随之滚动了。如果希望图片固定住，也就是实现所谓的“水印”效果，你可以在这行文字下方，添加一行文字：
background-attachment:fixed;
这样图片就能固定住了。
示例代码：
body{
background:lightblue;/*设置背景颜色为淡蓝色*/
color:black;/*设置文字的颜色为黑色*/
background-position: center;/*图片位于屏幕的正中央*/
background-attachment:fixed;/*固定图片，不随滚动条滚动*/
overflow-x:hidden;
}
2.设置文章中的链接样式
在“页面链接样式设置”板块中，有三个模块，分别是#a（普通链接），#a_visited（已访问过的链接），#a_hover（鼠标移到链接地址上）。color设置的是颜色，可以使用标准英文单词，也可以使用颜色代码，代码可以在 CSS帮助中获取。font-size设置的是字号（pt是磅的单位，），如 12pt表示 12号字（等价于 Word中的小四号字）。font-family设置的是字体，可以直接使用中文，但是要注意在字体名称的前后加上英文的双引号（正确格式：""，错误格式：“”）。font-style设置的是字形（可以使用：normal正常；bold加粗；italic倾斜；underline下划线，多个样式可以组合，在中间加空格就可以。）
示例代码：
a{
color: blue;/*设置基本链接颜色为蓝色*/
font-size: 12px;/*设置字号为 12磅*/
font-family: Arial;/*设置字体为 Arial*/
font-weight: italic;/*设置链接字体倾斜*/
text-decoration: none;
}
a:visited{
color:magenta;/*设置已点击过的超链接颜色为粉色*/
font-size:12px;
text-decoration:none
}
a:hover{
color:red;/*当鼠标移动到超链接上时，文字变为红色*/
font-size:12px;
text-decoration:underline;/*当鼠标移动到超链接上时，加下划线*/
}
3.头图设置
#header div.tit设置的是大标题的样式，#header div.tit a.titlink设置的是大标题的链接样式，#header div.tit a.titlink:visited设置的是大标题已点击过的链接样式，#header div.tit a.titlink:hover设置的是鼠标移到大标题上时的链接样式，#header div.desc设置的是空间简介的文字样式。样式设置可以参考上面的设置链接样式的方式。另外补充一个，top和 left设置的是文字的位置，top是距顶端多少像素，left是距左端多少像素，请根据需要进行设置。
如果觉得标题那一行的背景图片不太适合，可以去色。找到#header这一行，把 background这一行字全部去掉就可以了。如果你想换成别的图片，只需要更改括号里的 url地址就可以了。
示例代码：
#header{
height:160px;/*设置导航栏下方的正文的显示位置（数字越大越靠下方）*/
}
#header div.tit{
color:green;/*设置主标题的颜色为绿色*/
line-height:30px;/*设置主标题的行高（相当于使用 Word里段落设置的行距固定值，如果字号大则需要加大行距）*/
font-size:28px;/设置主标题的字号为 28磅/
font-family:"幼圆";/*设置主标题的字体为幼圆*/
font-style:bold;/*加粗字体*/
top:75px; left:370px;/*设置主标题的位置，距屏幕最顶端 75像素（数字越大越靠下），距屏幕最左端 370像素（数字越大越靠右）*/
}
#header div.tit a.titlink{
color:green;
font-size:28px;
font-family:"幼圆";
text-decoration:none
}
#header div.tit a.titlink:visited{
color:green;
font-size:28px;
text-decoration:none
}
#header div.tit a.titlink:hover{
color:purple;/*当鼠标移动到主标题上时，字体变为紫色*/
}
#header div.desc{
top:115px; left:300px;/*设置小标题的位置为距顶端 115像素，距左端 300像素*/
color:black;/*设置小标题颜色为黑色*/
font-size:20px;/*设置小标题字号为 20磅*/
}
4.导航栏设置
#tab这一块设置的是“主页博客相册个人档案好友”这一行字的显示样式，设置方法可以参考上面的“设置链接样式”和“头图设置”。外补充一个，#tab span设置的是两项之间的分隔符的颜色，如果不想要分隔符，只需要在大括号里输入 display:none就可以实现了。如果觉得背景图片不适合，只需要把对应的 background那一行字去掉，或者修改 url地址，就可以实现了。
如果希望加大各项目之间的距离，可以将 margin-left后面的数字加大些
示例代码：
#tabline{
display:none
}
#tab{
top:150px; left:100px; line-height:26px;/*设置导航栏的位置和行高*/
background:none;
height:26px;
padding-top:3px;
}
#tab a{
color:darkblue;/*设置导航条的基本文字颜色为深蓝色*/
font-weight:normal;
background:none;
height:26px;
margin-left:60px;/*两项之间的距离为 60像素*/
}
#tab span{
display:none;/*不显示两项之间的分隔符“|”*/
}
#tab a:visited{
color:darkgreen;/*已点击过的导航条的项目变为深绿色*/
font-size:12px;
font-weight:normal;
text-decoration:none;
}
#tab a:hover{
color:lightgreen;/*当鼠标移动到导航条项目上时，颜色变为浅绿色*/
font-size:12px;
font-weight:normal;
text-decoration:none;
}
#tab a.on{
color:blue;/*当前页面指示为蓝色*/
font-size:12px;
font-weight:bold;/*当前页面的指示加粗*/
}
#tab a.on:visited{
font-weight:bold;
color:pink;/*已点击过的当前页面指示为粉色*/
}
#tab a.on:hover{
color:red;/*当鼠标移动到当前页面指示上时，文字变为红色*/
}
5.模块设置
.mod里的 magin-bottom设置的是行距，数字越大，行距就越大。在这个大括号里，同样可以添加 font-size（字号）font-face（字体）font-style（字型）等参数，也同样可以添加背景图片。
.modtit设置的是模块标题的样式（如“文章列表”、“友情链接”的文字样式），可以参考前面的方法进行设置。
.modth里的 height设置的是模块标题的行高，应该按照标题的字号大小进行合理设置。
.modpt设置的是模块右侧的操作区（如友情链接右侧的“编辑”，文章列表右侧的“写新文章”等）的文字样式，可以参考前面的方法进行设置
如果觉得预览的时候，模块的背景色比较碍眼，挡住了背景图片，那么就需要进行去色处理。
找到代码中的
#modbox模块
把这三行字去掉：
border-left:1px solid#d8d8d8;
border-right:1px solid#d8d8d8;
background-color:#fff;
之后，把下面的.modtl，.modtc，.modtr，.modbl，.modbc，.modbr这几个模块也统统去掉，效果就实现啦。
示例代码：
.mod{
margin-bottom:5px;/*模块内的行距为 5像素*/
}
.modhandle{
cursor:move
}
.modth{
height:26px;/*设置模块标题行高为 26像素*/
}
.modhead{
padding:2px 4px 0 4px;
}
.modopt{
padding:4px 4px 0 0;
color:darkred;/*设置模块右侧的操作按钮颜色为深红色*/
}
.modtit{
color:darkblue;/*设置模块标题为深蓝色*/
font-size:18px;/*设置模块标题字号为 18磅（等价于三号字）*/
font-weight:bold;/*设置模块标题加粗*/
}
.modbox{
padding:10px;
}
.modlabel{color:#000;font-size:12px;font-weight:bold}
这样，模板就做好了，你就可以设置模板名称、标签、色系和最佳适用版式啦。
从网上下载下来的网页模板怎么用
这些下载下来的网页，一般都是psd格式的，他们只给一张样张，用Photoshop自己切的，css是字体样式，一般下载下来的并不是让你导出网页的，他们的目的是让你练习怎么在制作网页中可以做出一些特殊的图片，而韩国网页模板大部分都非常好看。下载的PSD也是每个图片都可以让你自己看清楚的！
文章分享结束，好看的css样式模板和网页设计的模板的答案你都知道了吗？欢迎再次光临本站哦！