无意间百度到一篇关于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: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>