需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div {width: 72pxheight: 72pxbackground: url(small3.png) no-repeatoverflow: hidden}
3、浏览器运行index.html页面，此时成功将矩形图片只显示了正方形部分。
4、点击小图后，成功显示了大图。
1. 怎么让html字体变大让html字体变大，分成几个步骤：
1. 在浏览器中查看信息，可以通过浏览器自带的调节大小的功能来调节字体的大小。
2. 然后在浏览器的右下角有一个百分比的选项，右边有一个小箭头，这就是调节大小的功能区域。点击一下右边的这个小箭头。
3. 在弹出的一系列选项中，点击其中一个，比如200%，说明此网页的字体将变大一倍，当然有很多其他的选项，也可以自定义大小。
4. 点击之后，网页的字体开始变得很大，比之前大了一倍，这样我们就可以很清楚地看清网页信息的内容。
<p onm ouseover="this.style.fontSize=33" onm ouseout="this.style.fontSize=60" onm ouseup="this.style.fontSize=33">
</p><!-- onclick 脚本 当鼠标被单击时执行脚本 ondblclick 脚本 当鼠标被双击时执行脚本 onm ousedown 脚本 当鼠标按钮被按下时执行脚本 onm ousemove 脚本 当鼠标指针移动时执行脚本 onm ouseout 脚本
2. html 如何改变字体的大小与颜色
可以为后半句单独设置css样式。
1、新建html文件，在body中添加p标签，这里内容以“窗前明月光，疑是地上霜。”为例，然后给后半句“疑是地上霜”添加span标签：
2、在head标签中添加style标签，然后给span标签设置“color”属性，属性值为“red”，这时后半句颜色就会变成红色：
3、继续给span标签设置“font-size”属性，属性值为“12px”，这时后半句的字体大小将会变成12号：
3. html怎样在每行中改变字体的大小
两种方法：
1、用左键把您要改变字体大小的字符选中（拖黑或拖蓝），然后直接用右键点击它（它们），就会弹出右键下拉菜单，在这个菜单中选点“字体”，又会切换出“字体”对话框，这时您就可以像使用Word那样，在这个对话框的右边调整字号（磅）或者字体的像素（TX），改变字体大小，甚至还可以改变字体颜色。
2、同样用左键把您要改变字体大小的字符选中（拖黑或拖蓝），然后在工作界面上方点击“格式”，在切换出来的对话框里，同样选点“字体”，然后就像上面说的方法，调整字体大小和颜色。
4. html页面字体如何随页面大小改变而改变
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<style type=text/css>
#d{
font-size:5em
}
body{
Font-size:25%
}
</style>
</head>
<body>
<div id="d">
使用em作为单位而不用px,em是相对长度，可由通过body选择器中Font-size调节
</div>
</body>
</html>
5. html怎么设置字体大小和颜色
1、先在HTML网页编写一些测试的文字。
2、然后在网页预览文字初始的字体效果，颜色是黑色，大小比较小。 3、因为测试文字是在body标签内的，所以我们要对body标签设置css属性就可以了。
4、我们可以用font-family来设置HTML网页字体的类型，比如这里我设置为“华文楷体”。 5、再去看文字的变化效果，文字变成了华文楷体类型，比原先的好看多了。
6、然后color可以改变文字的颜色，比如我就设置它为red，意思表示的是红颜色。 7、这样，文字的颜色就会由黑色变成红色了哦。
8、而font-size可以设置文字的大小，我设置成38px，表示38像素大小。 9、最后来看看，文字变得比原来大了很多。
这样我们就实现了设置HTML文字的类型，颜色及大小的目的。 。
6. 什么代码可以把字变大
可以用font这个元素及其属性来设定字体的大小。
例如用百字体大小属性（size）来设定字体的大小，示例代码如下： 这一段的度字体大小的值是2。 数字代表大小。
越大的数字代表字体更大。 扩展资料：专 更改字体大小代码示例： 字体大小 font size<body>这段文字的属字体大小值为1。
这段文字的字体大小值为3。 这段文字的字体大小值为4。
<head><bgsound src="路径" loop="-1">/* ===== 背景音乐 ==== */
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>图片欣赏</title>
<style type="text/css">
html {
overflow: hidden
}
body {
margin: 0px
padding: 0px
background: #000
position: absolute
width: 100%
height: 100%
cursor: crosshair
}
#diapoContainer {
position: absolute
left: 10%
top: 10%
width: 80%
height: 80%
background: #222
overflow: hidden
}
.imgDC {
position: absolute
cursor: pointer
border: #000 solid 2px
filter: alpha(opacity=90)
opacity: 0.9
visibility: hidden
}
.spaDC {
position: absolute
filter: alpha(opacity=20)
opacity: 0.2
background: #000
visibility: hidden
}
.imgsrc {
position: absolute
width: 120px
height: 67px
visibility: hidden
margin: 4%
}
#bkgcaption {
position: absolute
bottom: 0px
left: 0px
width: 100%
height: 6%
background:#1a1a1a
}
#caption {
position: absolute
font-family: arial, helvetica, verdana, sans-serif
white-space: nowrap
color: #fff
bottom: 0px
width: 100%
left: -10000px
text-align: center
}
</style>
<script type="text/javascript">
var xm
var ym
/* ==== onmousemove event ==== */
document.onmousemove = function(e){
if(window.event) e=window.event
xm = (e.x || e.clientX)
ym = (e.y || e.clientY)
}
/* ==== window resize ==== */
function resize() {
if(diapo)diapo.resize()
}
onresize = resize
/* ==== opacity ==== */
setOpacity = function(o, alpha){
if(o.filters)o.filters.alpha.opacity = alpha * 100else o.style.opacity = alpha
}
////////////////////////////////////////////////////////////////////////////////////////////
/* ===== encapsulate script ==== */
diapo = {
O : [],
DC : 0,
img : 0,
txt : 0,
N : 0,
xm : 0,
ym : 0,
nx : 0,
ny : 0,
nw : 0,
nh : 0,
rs : 0,
rsB : 0,
zo : 0,
tx_pos : 0,
tx_var : 0,
tx_target : 0,
/////// script parameters ////////
attraction : 2,
acceleration : .9,
dampening : .1,
zoomOver : 2,
zoomClick : 6,
transparency : .8,
font_size: 18,
//////////////////////////////////
/* ==== diapo resize ==== */
resize : function(){
with(this){
nx = DC.offsetLeft
ny = DC.offsetTop
nw = DC.offsetWidth
nh = DC.offsetHeight
txt.style.fontSize = Math.round(nh / font_size) + "px"
if(Math.abs(rs-rsB)<100) for(var i=0i<Ni++) O[i].resize()
rsB = rs
}
},
/* ==== create diapo ==== */
CDiapo : function(o){
/* ==== init variables ==== */
this.o= o
this.x_pos= this.y_pos= 0
this.x_origin = this.y_origin = 0
this.x_var= this.y_var= 0
this.x_target = this.y_target = 0
this.w_pos= this.h_pos= 0
this.w_origin = this.h_origin = 0
this.w_var= this.h_var= 0
this.w_target = this.h_target = 0
this.over = false
this.click= false
/* ==== create shadow ==== */
this.spa = document.createElement("span")
this.spa.className = "spaDC"
diapo.DC.appendChild(this.spa)
/* ==== create thumbnail image ==== */
this.img = document.createElement("img")
this.img.className = "imgDC"
this.img.src = o.src
this.img.O = this
diapo.DC.appendChild(this.img)
setOpacity(this.img, diapo.transparency)
/* ==== mouse events ==== */
this.img.onselectstart = new Function("return false")
this.img.ondrag = new Function("return false")
this.img.onmouseover = function(){
diapo.tx_target=0
diapo.txt.innerHTML=this.O.o.alt
this.O.over=true
setOpacity(this,this.O.click?diapo.transparency:1)
}
this.img.onmouseout = function(){
diapo.tx_target=-diapo.nw
this.O.over=false
setOpacity(this,diapo.transparency)
}
this.img.onclick = function() {
if(!this.O.click){
if(diapo.zo &&diapo.zo != this) diapo.zo.onclick()
this.O.click = true
this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2
this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2
diapo.zo = this
setOpacity(this,diapo.transparency)
} else {
this.O.click = false
this.O.over = false
this.O.resize()
diapo.zo = 0
}
}
/* ==== rearrange thumbnails based on "imgsrc" images position ==== */
this.resize = function (){
with (this) {
x_origin = o.offsetLeft
y_origin = o.offsetTop
w_origin = o.offsetWidth
h_origin = o.offsetHeight
}
}
/* ==== animation function ==== */
this.position = function (){
with (this) {
/* ==== set target position ==== */
w_target = w_origin
h_target = h_origin
if(over){
/* ==== mouse over ==== */
w_target = w_origin * diapo.zoomOver
h_target = h_origin * diapo.zoomOver
x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1))
y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1))
} else {
/* ==== mouse out ==== */
x_target = x_origin
y_target = y_origin
}
if(click){
/* ==== clicked ==== */
w_target = w_origin * diapo.zoomClick
h_target = h_origin * diapo.zoomClick
}
/* ==== magic spring equations ==== */
x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening
y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening
w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5)
h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5)
diapo.rs += (Math.abs(x_var) + Math.abs(y_var))
/* ==== html animation ==== */
with(img.style){
left = Math.round(x_pos) + "px"
top= Math.round(y_pos) + "px"
width = Math.round(Math.max(0, w_pos)) + "px"
height = Math.round(Math.max(0, h_pos)) + "px"
zIndex = Math.round(w_pos)
}
with(spa.style){
left = Math.round(x_pos + w_pos * .1) + "px"
top= Math.round(y_pos + h_pos * .1) + "px"
width = Math.round(Math.max(0, w_pos * 1.1)) + "px"
height = Math.round(Math.max(0, h_pos * 1.1)) + "px"
zIndex = Math.round(w_pos)
}
}
}
},
/* ==== main loop ==== */
run : function(){
diapo.xm = xm - diapo.nx
diapo.ym = ym - diapo.ny
/* ==== caption anim ==== */
diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02
diapo.txt.style.left = Math.round(diapo.tx_pos) + "px"
/* ==== images anim ==== */
for(var i in diapo.O) diapo.O[i].position()
/* ==== loop ==== */
setTimeout("diapo.run()", 16)
},
/* ==== load images ==== */
images_load : function(){
// ===== loop until all images are loaded =====
var M = 0
for(var i=0i<diapo.Ni++) {
if(diapo.img[i].complete) {
diapo.img[i].style.position = "relative"
diapo.O[i].img.style.visibility = "visible"
diapo.O[i].spa.style.visibility = "visible"
M++
}
resize()
}
if(M<diapo.N) setTimeout("diapo.images_load()", 128)
},
/* ==== init script ==== */
init : function() {
diapo.DC = document.getElementById("diapoContainer")
diapo.img = diapo.DC.getElementsByTagName("img")
diapo.txt = document.getElementById("caption")
diapo.N = diapo.img.length
for(i=0i<15i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]))
diapo.resize()
diapo.tx_pos = -diapo.nw
diapo.tx_target = -diapo.nw
diapo.images_load()
diapo.run()
}
}
</script>
</head>
<body>
<div id="diapoContainer">
<img class="imgsrc" src="图片的路径（相对路径或绝对路径）" alt="图片的注释（第一张）">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<div id="bkgcaption">
</div>
<div id="caption">
</div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
function dom_onload() {
if(document.getElementById("diapoContainer")) diapo.init()else setTimeout("dom_onload()", 128)
}
dom_onload()
</script>
</body>
</html>
