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

HTML <meta> 标签

浏览器支持

IE	Firefox	Chrome	Safari	Opera

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

定义和用法

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

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

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

在div中放入图片

<div style="width:200px; height:200px;">

<img src="example.jpg" style="width:100%;" />

</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"/>

追问：

1. 媒介是什么，我一般只写网页代码，老板突然叫我写手机，头有点大

2. 想要手机端自适应的话，那我放进去的图片大小也有自由变大变小吗

3. 我大概做的是宽度1080的，到时候的话我要写

   @media only screen and (max-width:1080px){吗

4. 还有上面那段代码全部的可以跟我说下意思吗

追答：

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

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

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

 

 

 

<style type="text/css">

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);