Html和Css的一些技巧

2025-10-31 22:00:49

1、网站制作的

步骤：

（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；}

清楚浮动： .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乱码问题

当输入页面的文字成为乱码的时候，可以在<head></head>之间加<meta charset=”UTF-8”>

其中charset是定义网页字符集属性的。出现的乱码是因为字符集搞错了。属性值是“UTF-8”。“UTF-8”一个字符代表3个字节。

其中属性值有很多种。点击开发工具——格式——编码字符集就有很多。

1.2清楚浮动 clear:both;

只要是定义的与原来的不一样就用清除浮动。比如自己做的第一个项目

1.3字体的高度line-height: 21px;/*字体的高度*/

1.4 超链接超链接的颜色需要单独定义一下，而且下划线去掉。

.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轴重复。有实例瞅瞅。

1.7 将图片转化为可以按的按钮

在图片上面加button。.s_y button {

width:66px;

height:36px;

background:none;

border:0px;

cursor:pointer; /*这个属性是鼠标移上去有小手的非常重要的属性*/

1.8指针变小手 cursor:pointer;/*这个属性是鼠标移上去有小手的非常重要的属性*/

1.9三个图片之间的空隙解决

2.1简单便捷的浮动 <td class="s_z" ></td> 前面已经定义一个Z 的属性值。比如浮动

2.2给menu的后面加背景，且鼠标移动背景出现

就是这个效果

后面： <li class="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; /* 首行缩进两个字，一个字占 12 px*/

2.7超出隐藏 overflow:hidden;

在设置了 width 或 height 的div中，写上overflow:hidden;的话，超出宽度或高度的部分，就隐藏了。就是说，这个overflow:hidden;属性可以保证div的高度或宽度不变。div里添加的东西再多，高度或宽度也不变。超出的部分隐藏。

2.8图片上一移动上去就显示span的样式

就是这样的一个样式

（1）先定义最大的图片，而且图片要在超链接的里面，这样可以点击图片进去。

<li>

<img src="images/chanpin_img.jpg" /><span>Web前端开发之Html+Css基础入门</span>

</a> </li>

（2）再定义span也就是“web前端开发之”的内容。而且这个也要在超链接的里面，也是可以点进去的。

（3）接下来就是具体的了

.cp_c li {

float:left;

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

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。