HTML资料——做网页时遇到的
2015-12-28 16:08
561 查看
HTML <meta> 标签
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
定义和用法
<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像素的时候才会应用下面的样式。如果想要在手机端自适应,你还需要写上下面这句话。
媒介是什么,我一般只写网页代码,老板突然叫我写手机,头有点大
想要手机端自适应的话,那我放进去的图片大小也有自由变大变小吗
我大概做的是宽度1080的,到时候的话我要写
@media only screen and (max-width:1080px){吗
还有上面那段代码全部的可以跟我说下意思吗
追答:
这里的媒体查询是指在不同的屏幕大小上显示不同的样式,手机端的代码一般都把宽度写成百分比,图片的宽度也写成百分比会根据屏幕自动缩放,写一个最大值就可以。你说的宽度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);
相关文章推荐
- HTML特殊字符—核心编码
- 设置TinyMCE在线HTML编辑控件只读
- html meta X-UA-Compatible 无效
- 转载:设置html页面不让浏览器缓存的方法
- HTML图片折叠
- HTML之相对定位relative
- HTML之绝对定位Absolute
- html中列表的使用
- HTML 标签基础知识学习(一)
- HTML页面3秒后自动跳转的三种常见方法
- html》meta标签笔记
- HTML实现页面自动跳转的五种方法
- html中表示引用文本的标签:<q>,<blockquote>
- html中强调文本的标签:<span>,<em>和<strong>
- odoo的pdf打印 安装源
- HTML笔记
- 读取服务器中某个html文件
- PSD2HTML
- HTML_导航框架
- Html页面浏览器工具类功能:document.execCommand()解析