Html和Css的一些技巧

时间：2024-10-14 00:11:57

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 borderInput{ 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 超链接超链接的颜色需要单独定义一下，而且下划线去掉。.topa{ /*超链接的颜色没有变化，需要单独定义一下*/color:#d8d8d8;text-decoration:none;/*超链接下划线去掉*/} 注意！！！目前有一个问题，当超链接定义鼠标移上去就显示的颜色，再定义去掉下划线就不管用了。？？？ 1.5鼠标移上去变颜色.topa:hover{ /*鼠标移动上去颜色变化用“hover”*/color:yellow; }1.6图片重复 background:url(images/s_z.gif)no-repeat; /*no-repeat 为图片不重复*/如果后面的repeat-x就是图片向X轴重复。有实例瞅瞅。1.7 将图片转化为可以按的按钮在图片上面加button。.s_ybutton{width:66px;height:36px;background:none;border:0px;cursor:pointer; /*这个属性是鼠标移上去有小手的非常重要的属性*/1.8指针变小手cursor:pointer;/*这个属性是鼠标移上去有小手的非常重要的属性*/1.9三个图片之间的空隙解决<tablecellpading="0"cellspacing="0"border="0">2.1简单便捷的浮动 <tdclass="s_z"></td>前面已经定义一个Z 的属性值。比如浮动2.2给menu的后面加背景，且鼠标移动背景出现就是这个效果后面：<liclass="a"><ahref="网页布局学习.aspx">网站首页</a></li>前面：.navli.a,.navli:hover{这个是最重要的 a 后面有个逗号“，”background:url(images/nav_hover.jpg)repeat-x; }2.3 设置网页居中margin:0auto;2.4线的设置 .tit{padding-bottom:10px; /*为什么？因为线和上下还有间距*/border-bottom:2pxsoliddarkred; /*下面的线的颜色和宽度*/}2.5布局定位position的四个属性值对于这个的上面和下面的定位是：：：：上面的是父类。上面的position：relative；下面的span的position：absolute；/* 然后定位的在后面*/Bottom：0px；Left：0px；2.6首行缩进 .jj_cimg{float:left; /*让文字环绕*/margin:010px10px0;text-indent:24px; /*首行缩进两个字，一个字占 12 px*/2.7超出隐藏 overflow:hidden; 在设置了 width 或 height 的div中，写上overflow:hidden;的话，超出宽度或高度的部分，就隐藏了。就是说，这个overflow:hidden;属性可以保证div的高度或宽度不变。div里添加的东西再多，高度或宽度也不变。超出的部分隐藏。2.8图片上一移动上去就显示span的样式就是这样的一个样式（1）先定义最大的图片，而且图片要在超链接的里面，这样可以点击图片进去。<li><ahref=""><imgsrc="images/chanpin_img.jpg"/><span>Web前端开发之Html+Css基础入门</span></a></li>（2）再定义span也就是“web前端开发之”的内容。而且这个也要在超链接的里面，也是可以点进去的。（3）接下来就是具体的了 .cp_cli{ float:left;list-style:none; /*去掉之前的样式*/margin:010px10px0;width:151px;height:96px;overflow:hidden; /*定义的div如果超出就隐藏*/position:relative; /*正常定位 span相对于父元素进行定位*/}.cp_cspan{ display:none; /*要想鼠标放上去才出来 ,就先隐藏。然后下面的li的hover才显示出来*/position:absolute; /*然后定位方式在下面*/bottom:0px;left:0px;font-size:14px; /*定义字体大小*/height:20px;width:131px;padding:010px; /*字体内的边框*/color:#faf5f5; /*字体颜色，放在背景颜色之上*/background:darkred; /*背景颜色*/overflow:hidden; /*再加溢出处理*/}.cp_clia:hoverspan{ /*鼠标移动span ，显现出来*/display: block;}2.9

如何学习HTML+CSS

html中怎样引入CSS？

css怎么学习如何学习CSS

HTML与CSS的关系是什么