HTML资料——做网页时遇到的

最新推荐文章于 2025-09-13 23:06:41 发布

weixin_34161083

最新推荐文章于 2025-09-13 23:06:41 发布

阅读量74

点赞数

文章标签：人工智能

本文介绍了HTML中的<meta>标签及其用途，并提供了如何使用CSS媒体查询实现响应式设计的方法，包括图片按比例显示及过渡效果。

HTML <meta> 标签

浏览器支持

IE	Firefox	Chrome	Safari	Opera

所有浏览器都支持 <meta> 标签。

定义和用法

如何在网页中按比例限制图片的显示大小

http://jingyan.baidu.com/article/ca41422fe377261eae99ed86.html

在div中放入图片

</div>

此时的图片是适应div的宽度的，即宽度为外层div宽度的100%，高度就成图片本身的比例

css中@media only screen and (max-width:639px){

CSS

@media only screen and (max-width:639px){
	.left,.right{ clear:both;}
	.btns{ width:290px;}
	.btns a{ margin-bottom:20px;}	

}
谁能告诉我这段代码什么意思，没作用手机网页代码，求解答

这位网友你好，这是媒体查询代码，表示只有在屏幕尺寸小于639像素的时候才会应用下面的样式。如果想要在手机端自适应，你还需要写上下面这句话。

1	`<` `meta` `name` `=` `"viewport"` `content` `=` `"width=device-width, initial-scale=1"` `/>`

追问：

媒介是什么，我一般只写网页代码，老板突然叫我写手机，头有点大
想要手机端自适应的话，那我放进去的图片大小也有自由变大变小吗
我大概做的是宽度1080的，到时候的话我要写

@media only screen and (max-width:1080px){吗
还有上面那段代码全部的可以跟我说下意思吗

追答：

　　这里的媒体查询是指在不同的屏幕大小上显示不同的样式，手机端的代码一般都把宽度写成百分比，图片的宽度也写成百分比会根据屏幕自动缩放，写一个最大值就可以。你说的宽度1080可以那么写，用@media要多写几个段。

-webkit-transition (不支持IE) 这个属性的作用是使得变化不那么生硬，达到比较平和的过渡

分类： CSS | 标签：-webkit-transition 变化不生硬平和过渡 |

div { width: 200px; }

h2 { font: 400 40px/1.5 Helvetica, Verdana, sans-serif; margin: 0; padding: 0; }

ul { list-style-type: none; margin: 0; padding: 0; }

li { font: 200 20px/1.5 Helvetica, Verdana, sans-serif; border-bottom: 1px solid #ccc; }

li:last-child { border: none; }

li a {

text-decoration: none; color: #000; display: block; width: 200px;

-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;

-moz-transition: font-size 0.3s ease, background-color 0.3s ease;

-o-transition: font-size 0.3s ease, background-color 0.3s ease;

-ms-transition: font-size 0.3s ease, background-color 0.3s ease;

transition: font-size 0.3s ease, background-color 0.3s ease;

}

li a:hover { font-size: 30px; background: #f6f6f6; }

</style>

<div>

<h2>HelvetiList</h2>

<ul>

<li><a href=<"#"<>Zurich</a></li>

<li><a href=<"#"<>Geneva</a></li>

<li><a href=<"#"<>Winterthur</a></li>

<li><a href=<"#"<>Lausanne</a></li>

<li><a href=<"#"<>Lucerne</a></li>

</ul>

css代码中padding:1em 0 0 0;是什么意思

假设的你的盒子模型的字体大小为12像素：
<div id="box">
<p>css代码中padding:1em 0 0 0;是什么意思</p>
</div>

那么：
#box{padding:1em 0 0 0;font-size:12px;}
就是ID为box的盒子模型，上补白为12*1(1em既1倍)=12像素，左右和下补白为0像素；
1em 0 0 0的顺序依次为上，右，下，左。

</div>

padding:上填充右填充下填充左填充;
0就是没有距离，0距离，跟0像素一样

background: rgba(22, 85, 118, 0.61);