设计网页的一般步骤及html css的小技巧总结
2017-08-14 14:06
721 查看
无意间百度到一篇关于html与css样式使用小技巧的内容，感觉相当不错，
于是有意适当将其换个形式转化为问题与答案的结构，或许有助日后搜索，具体得看情况了，对于csdn网站的搜索形式还真是不太熟悉，如果是百度的话，应该是有效的（注：只是将里面的每个步骤增加了一个问号，改成肯定句结构，则是制作网页的一个良好步骤）
网站制作的步骤：
（1）如何创建一个完整网站目录结构？
Meishimeike（文件夹）：管理当前网站中所有的文件。
Index.html/default.html(文件)：当前网站的入口文件。
Css（文件夹）：管理当前网站中所有Css样式的文件。
Js （文件夹）：管理当前网站中所有js 的文件。
Image（文件夹）：管理当前网站中所有的图片。
（2）准备一张PSD（用于转换为Html页面的设计图）
（3）确定一种开发方式：
A) 从上到下的开发方式（比较适合新手）
B）先确定结构再在结构中填充内容（比较适合老司机）
（4）CSS初始化：（清除浏览器中标签的一些默认样式，也是一个网站在不同的打开网站一样）
A）如何去掉标签的默认margin和padding？
.div等等 {margin=0；padding=0；}
B）如何去掉图片的边框？
Img(border=none;)
C）如何去掉ol 和 ul 的前面的小点？
Ul ,ol { list- style：none；}
D）如何去掉input默认的标签padding-top padding-bottom border？
Input{ padding-top=0； padding-bottom=0；border=none；}
E）如何去掉a 标签默认的下划线？
a { text-decoration= none；}
F）如何给body设置一个统一的字体样式和背景颜色？
Body{ font：normal normal 12px “宋体”；
color=#4c4c4c（这个颜色黑灰）;
Background-color：（是自己网站设置的背景颜色，防止用户设置的颜色和自己网站的颜色相冲突，这样的话就很丑。）
}
第一个是font-style（字体样式（斜体等））
第二个是font-weight（字体加粗）
第三个是font-size 字体大小（经常用到的）
第四个是font-family （微软雅黑、宋体等）
G）如何实现浮动？
左浮动： .z { float：left；}
右浮动： .y{float：right；}
H) 如何清楚浮动？
： .clearfix：after{content：“”； height：0；line-height：0；display：block；visibility：hidden；clear：both；}
// 伪类清除
. clearfix{zoom：1；} （让IE6浏览器可以兼容）
（5）开始网站代码的书写
v 完成网站所有统一的头部和尾部，统一放在下面的文件中去temple.html和temple.css中。
第二章（html语法）
1.1 html中如何处理乱码问题？
当输入页面的文字成为乱码的时候，可以在<head></head>之间加<meta charset=”UTF-8”>
其中charset是定义网页字符集属性的。出现的乱码是因为字符集搞错了。属性值是“UTF-8”。“UTF-8”一个字符代表3个字节。
其中属性值有很多种。点击开发工具——格式——编码字符集就有很多。
1.2 如何清楚浮动 ？
clear
1481d
:both;
只要是定义的与原来的不一样就用清除浮动。比如自己做的第一个项目
1.3 如何使得元素内部文本居中？
对于块状元素可以设置 text-align:center;
对于行内元素可以设置 margin：0 auto;
1.4如何实现单行文本居中？
height 与 line-height 设置的值大小一样，例如
height：20px;
line-height:20px;
字体的高度line-height: 21px;/*字体的高度*/
1.5 如何更改超链接 默认显示样式？
a { text-decoration= none；}
超链接的颜色需要单独定义一下，而且下划线去掉。
.top a { /*超链接的颜色没有变化，需要单独定义一下*/
color:#d8d8d8;
text-decoration:none;/* 超链接下划线去掉 */ }
注意！！！ 目前有一个问题，当超链接定义鼠标移上去就显示的颜色，再定义去掉下划线就不管用了。？？？
1.5 如何让鼠标移上去变颜色？
.top a:hover { /*鼠标移动上去颜色变化用“hover”*/
color:yellow; }
1.6 背景图片重复 铺开，如何去除？
background:url(images/s_z.gif) no-repeat ;
/* no-repeat 为图片不重复*/ 如果后面的repeat-x就是图片向X轴重复。
background：url(图片的路径) 是否重复 （沿着水平方向重复） （沿着y轴方向重复） ;后面括号中的可以不写，
1.7 将图片转化为可以按的按钮
在图片上面加button。.s_y button {
width:66px;
height:36px;
background:none;
border:0px;
cursor:pointer; /*这个属性是鼠标移上去有小手的非常重要的属性*/
1.8 如何实现光标的指针变小手 ？
cursor:pointer;/*这个属性是鼠标移上去有小手的非常重要的属性*/
1.9 如何解决三个图片之间的空隙？
<table cellpading="0" cellspacing="0" border="0">
<!--cellpading="0" cellspacing="0" border="0" 这三个是解决搜索的三个框中之间的空隙 -->
2.1 简单便捷的浮动 <td class="s_z" ></td> <!-- 加的“z”，是全部靠左浮动-->前面已经定义一个Z 的属性值。比如浮动
2.2 给menu的后面 加背景，且鼠标移动背景出现
就是这个效果
后面： <li class="a"> <!-- 定义第一个后面的背景 -->
<a href="网页布局学习.aspx">网站首页</a>
</li>
前面： .nav li.a,.nav li:hover { 这个是最重要的 a 后面有个逗号“，”
background:url(images/nav_hover.jpg) repeat-x; }
2.3 如何设置网页居中？
margin:0 auto;
2.4 线的设置
.tit {
padding-bottom:10px; /*为什么？因为线和上下还有间距*/
border-bottom:2px solid darkred; /*下面的线的颜色和宽度*/ }
2.5 布局定位position的四个属性值
对于这个的上面和下面的定位是：：：：上面的是父类。上面的position：relative；
下面的span的position：absolute；/* 然后定位的在后面*/
Bottom：0px；
Left：0px；
2.6 首行缩进和文字环绕
.jj_c img{
float:left; /* 让文字环绕 */
margin:0 10px 10px 0;
text-indent:24px; /* 首行缩进24px*/
text-indent :2em; /* 首行缩进两个字体的大小，比如一个字是12px,则和上面的一句话相同*/
2.7 如何实现超出隐藏 ？
overflow:hidden; （注：前提是div设置了宽高，否则无效）
在设置了 width 或 height 的div中，写上overflow:hidden;的话，超出宽度或高度的部分，就隐藏了。就是说，这个overflow:hidden;属性可以保证div的高度或宽度不变。div里添加的东西再多，高度或宽度也不变。超出的部分隐藏。
2.8 图片上一移动上去就显示span的样式
就是这样的一个样式
（1）先定义最大的图片，而且图片要在超链接的里面，这样可以点击图片进去。
<li>
<a href=""><img src="images/chanpin_img.jpg" /><span>Web前端开发之Html+Css基础入门</span></a>
</li>
（2）再定义span也就是“web前端开发之”的内容。而且这个也要在超链接的里面，也是可以点进去的。
（3）接下来就是具体的了
.cp_c li {
float:left;/* 设置所有的li向左浮动*/
list-style:none; /* 去掉之前的样式 */
margin:0 10px 10px 0;
width:151px;/* 设置宽度和高度*/
height:96px;
overflow:hidden; /* 定义的div如果超出就隐藏 */
position:relative; /* 正常定位 span相对于父元素进行定位 */
}
.cp_c span {
display:none; /* 要想鼠标放上去才出来 ,就先隐藏。然后下面的li的hover才显示出来*/
position:absolute; /* 然后定位方式在下面 */
bottom:0px;
left:0px;
font-size:14px; /* 定义字体大小 */
height:20px;
width:131px;
padding:0 10px; /* 字体内的边框 */
color:#faf5f5; /* 字体颜色，放在背景颜色之上 */
background:darkred; /* 背景颜色 */
overflow:hidden; /* 再加溢出处理 */
}
.cp_c li a:hover span{ /* 鼠标移动span ，显现出来 */
display: block;
}
2.9 li中两个元素，一个设置向左浮动，一个向右浮动，为何感觉设置完没效果？
很有可能没有为<li>标签设置宽度。
如果外面的元素没有设置宽度和高度，仅仅设置向左向右浮动，则外围的宽度只是内容的简单包裹，向左向右浮动不明显
3.0 一个div中，设置了两个元素，一个文字，一个图片，为何不是预想的效果，图片和文字分别在包裹的两侧？
可能没有为外围元素设置宽度
4.0 如何用一个<ul> 实现两排图片格式整齐地排开？
可以将ul放在一个div中，为div设置宽度 高度 以及超出隐藏设置（overflow：hidden）
让ul 中的 li 有一定的宽度和高度，并设置向左浮动即可
1、如果是主页面，想让最大的内容居中，可以考虑使用百分比设置margin ,比如{ margin : 40% auto;} 注意，这里的40%是距离其最近的一个父元素的宽度的40%；
2、行内标签，比如<a> 标签，span p 标签，无法设置宽高，则可以通过设置display：inline-block 或者 display：block，
3、对于圆形，可以通过设置div或者其他的块级元素的宽高 相同，设置边框border，设置border-radius属性为宽高的一般进行
4、对于椭圆形，可以通过类似上述进行，只是border-radius属性的值不是宽高的一半，即小于宽高一半的某个值
5、 dl列表中，dl可以设置float:left属性，使得多个dl可以横排放置，另外，dl 的使用格式如下，且多数情况下为上图下字：
<dl>
<dt></dt> 一般可以在dt中插入图片
<dd></dd> 在dd中放入文字解释
</dl>
于是有意适当将其换个形式转化为问题与答案的结构，或许有助日后搜索，具体得看情况了，对于csdn网站的搜索形式还真是不太熟悉，如果是百度的话，应该是有效的（注：只是将里面的每个步骤增加了一个问号，改成肯定句结构，则是制作网页的一个良好步骤）
网站制作的步骤：
（1）如何创建一个完整网站目录结构？
Meishimeike（文件夹）：管理当前网站中所有的文件。
Index.html/default.html(文件)：当前网站的入口文件。
Css（文件夹）：管理当前网站中所有Css样式的文件。
Js （文件夹）：管理当前网站中所有js 的文件。
Image（文件夹）：管理当前网站中所有的图片。
（2）准备一张PSD（用于转换为Html页面的设计图）
（3）确定一种开发方式：
A) 从上到下的开发方式（比较适合新手）
B）先确定结构再在结构中填充内容（比较适合老司机）
（4）CSS初始化：（清除浏览器中标签的一些默认样式，也是一个网站在不同的打开网站一样）
A）如何去掉标签的默认margin和padding？
.div等等 {margin=0；padding=0；}
B）如何去掉图片的边框？
Img(border=none;)
C）如何去掉ol 和 ul 的前面的小点？
Ul ,ol { list- style：none；}
D）如何去掉input默认的标签padding-top padding-bottom border？
Input{ padding-top=0； padding-bottom=0；border=none；}
E）如何去掉a 标签默认的下划线？
a { text-decoration= none；}
F）如何给body设置一个统一的字体样式和背景颜色？
Body{ font：normal normal 12px “宋体”；
color=#4c4c4c（这个颜色黑灰）;
Background-color：（是自己网站设置的背景颜色，防止用户设置的颜色和自己网站的颜色相冲突，这样的话就很丑。）
}
第一个是font-style（字体样式（斜体等））
第二个是font-weight（字体加粗）
第三个是font-size 字体大小（经常用到的）
第四个是font-family （微软雅黑、宋体等）
G）如何实现浮动？
左浮动： .z { float：left；}
右浮动： .y{float：right；}
H) 如何清楚浮动？
： .clearfix：after{content：“”； height：0；line-height：0；display：block；visibility：hidden；clear：both；}
// 伪类清除
. clearfix{zoom：1；} （让IE6浏览器可以兼容）
（5）开始网站代码的书写
v 完成网站所有统一的头部和尾部，统一放在下面的文件中去temple.html和temple.css中。
第二章（html语法）
1.1 html中如何处理乱码问题？
当输入页面的文字成为乱码的时候，可以在<head></head>之间加<meta charset=”UTF-8”>
其中charset是定义网页字符集属性的。出现的乱码是因为字符集搞错了。属性值是“UTF-8”。“UTF-8”一个字符代表3个字节。
其中属性值有很多种。点击开发工具——格式——编码字符集就有很多。
1.2 如何清楚浮动 ？
clear
1481d
:both;
只要是定义的与原来的不一样就用清除浮动。比如自己做的第一个项目
1.3 如何使得元素内部文本居中？
对于块状元素可以设置 text-align:center;
对于行内元素可以设置 margin：0 auto;
1.4如何实现单行文本居中？
height 与 line-height 设置的值大小一样，例如
height：20px;
line-height:20px;
字体的高度line-height: 21px;/*字体的高度*/
1.5 如何更改超链接 默认显示样式？
a { text-decoration= none；}
超链接的颜色需要单独定义一下，而且下划线去掉。
.top a { /*超链接的颜色没有变化，需要单独定义一下*/
color:#d8d8d8;
text-decoration:none;/* 超链接下划线去掉 */ }
注意！！！ 目前有一个问题，当超链接定义鼠标移上去就显示的颜色，再定义去掉下划线就不管用了。？？？
1.5 如何让鼠标移上去变颜色？
.top a:hover { /*鼠标移动上去颜色变化用“hover”*/
color:yellow; }
1.6 背景图片重复 铺开，如何去除？
background:url(images/s_z.gif) no-repeat ;
/* no-repeat 为图片不重复*/ 如果后面的repeat-x就是图片向X轴重复。
background：url(图片的路径) 是否重复 （沿着水平方向重复） （沿着y轴方向重复） ;后面括号中的可以不写，
1.7 将图片转化为可以按的按钮
在图片上面加button。.s_y button {
width:66px;
height:36px;
background:none;
border:0px;
cursor:pointer; /*这个属性是鼠标移上去有小手的非常重要的属性*/
1.8 如何实现光标的指针变小手 ？
cursor:pointer;/*这个属性是鼠标移上去有小手的非常重要的属性*/
1.9 如何解决三个图片之间的空隙？
<table cellpading="0" cellspacing="0" border="0">
<!--cellpading="0" cellspacing="0" border="0" 这三个是解决搜索的三个框中之间的空隙 -->
2.1 简单便捷的浮动 <td class="s_z" ></td> <!-- 加的“z”，是全部靠左浮动-->前面已经定义一个Z 的属性值。比如浮动
2.2 给menu的后面 加背景，且鼠标移动背景出现
就是这个效果
后面： <li class="a"> <!-- 定义第一个后面的背景 -->
<a href="网页布局学习.aspx">网站首页</a>
</li>
前面： .nav li.a,.nav li:hover { 这个是最重要的 a 后面有个逗号“，”
background:url(images/nav_hover.jpg) repeat-x; }
2.3 如何设置网页居中？
margin:0 auto;
2.4 线的设置
.tit {
padding-bottom:10px; /*为什么？因为线和上下还有间距*/
border-bottom:2px solid darkred; /*下面的线的颜色和宽度*/ }
2.5 布局定位position的四个属性值
对于这个的上面和下面的定位是：：：：上面的是父类。上面的position：relative；
下面的span的position：absolute；/* 然后定位的在后面*/
Bottom：0px；
Left：0px；
2.6 首行缩进和文字环绕
.jj_c img{
float:left; /* 让文字环绕 */
margin:0 10px 10px 0;
text-indent:24px; /* 首行缩进24px*/
text-indent :2em; /* 首行缩进两个字体的大小，比如一个字是12px,则和上面的一句话相同*/
2.7 如何实现超出隐藏 ？
overflow:hidden; （注：前提是div设置了宽高，否则无效）
在设置了 width 或 height 的div中，写上overflow:hidden;的话，超出宽度或高度的部分，就隐藏了。就是说，这个overflow:hidden;属性可以保证div的高度或宽度不变。div里添加的东西再多，高度或宽度也不变。超出的部分隐藏。
2.8 图片上一移动上去就显示span的样式
就是这样的一个样式
（1）先定义最大的图片，而且图片要在超链接的里面，这样可以点击图片进去。
<li>
<a href=""><img src="images/chanpin_img.jpg" /><span>Web前端开发之Html+Css基础入门</span></a>
</li>
（2）再定义span也就是“web前端开发之”的内容。而且这个也要在超链接的里面，也是可以点进去的。
（3）接下来就是具体的了
.cp_c li {
float:left;/* 设置所有的li向左浮动*/
list-style:none; /* 去掉之前的样式 */
margin:0 10px 10px 0;
width:151px;/* 设置宽度和高度*/
height:96px;
overflow:hidden; /* 定义的div如果超出就隐藏 */
position:relative; /* 正常定位 span相对于父元素进行定位 */
}
.cp_c span {
display:none; /* 要想鼠标放上去才出来 ,就先隐藏。然后下面的li的hover才显示出来*/
position:absolute; /* 然后定位方式在下面 */
bottom:0px;
left:0px;
font-size:14px; /* 定义字体大小 */
height:20px;
width:131px;
padding:0 10px; /* 字体内的边框 */
color:#faf5f5; /* 字体颜色，放在背景颜色之上 */
background:darkred; /* 背景颜色 */
overflow:hidden; /* 再加溢出处理 */
}
.cp_c li a:hover span{ /* 鼠标移动span ，显现出来 */
display: block;
}
2.9 li中两个元素，一个设置向左浮动，一个向右浮动，为何感觉设置完没效果？
很有可能没有为<li>标签设置宽度。
如果外面的元素没有设置宽度和高度，仅仅设置向左向右浮动，则外围的宽度只是内容的简单包裹，向左向右浮动不明显
3.0 一个div中，设置了两个元素，一个文字，一个图片，为何不是预想的效果，图片和文字分别在包裹的两侧？
可能没有为外围元素设置宽度
4.0 如何用一个<ul> 实现两排图片格式整齐地排开？
可以将ul放在一个div中，为div设置宽度 高度 以及超出隐藏设置（overflow：hidden）
让ul 中的 li 有一定的宽度和高度，并设置向左浮动即可
1、如果是主页面，想让最大的内容居中，可以考虑使用百分比设置margin ,比如{ margin : 40% auto;} 注意，这里的40%是距离其最近的一个父元素的宽度的40%；
2、行内标签，比如<a> 标签，span p 标签，无法设置宽高，则可以通过设置display：inline-block 或者 display：block，
3、对于圆形，可以通过设置div或者其他的块级元素的宽高 相同，设置边框border，设置border-radius属性为宽高的一般进行
4、对于椭圆形，可以通过类似上述进行，只是border-radius属性的值不是宽高的一半，即小于宽高一半的某个值
5、 dl列表中，dl可以设置float:left属性，使得多个dl可以横排放置，另外，dl 的使用格式如下，且多数情况下为上图下字：
<dl>
<dt></dt> 一般可以在dt中插入图片
<dd></dd> 在dd中放入文字解释
</dl>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用html和CSS进行网页网站设计 -- 简明步骤
- 用 CSS 替代 HTML 的 table tag 设计网页版面
- 手机web——自适应网页设计（html/css控制）
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第26讲_js函数调用过程内存分析_js函数细节_学习笔记_源代码图解_PPT文档整理
- 手机web——自适应网页设计（html/css控制）
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理
- 网页设计高手必备：HTML和CSS提高教程
- HTML学习笔记——标准网页设计+使用CSS、Javascript
- 【转】手机web——自适应网页设计（html/css控制）
- 传智播客.韩顺平.轻松搞定网页设计(html.css.javascript)
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第33讲_Object类_闭包_成员函数再说明_聪明的猪小练习_学习笔记_源代码图解_PPT文档整理
- 手机web——自适应网页设计（html/css控制）（转）
- 网页设计-[常用CSS缩写语法总结、标准的N种死法及网页设计必须注意的几个问题 ]
- CSS/HTML网页设计
- 总结：用CSS进行网页样式设计攻略全集
- 手机web——自适应网页设计（html/css控制）
- 网页设计高手必备：HTML、CSS、Javascript教程资料
- 手机web——自适应网页设计（html/css控制）
- 手机web——自适应网页设计（html/css控制）
- HTML与CSS教学-第一章 HTML、CSS网页设计概述