前端学习 第一天

1.样式高度宽度变化的过渡

<div onclick="this.style.width=‘800px‘;this.style.height=‘400px‘;" style="width:100px;height:100px;background:url(‘http://img6.cache.netease.com/photo/0001/2016-05-18/BNAUNT5K00AP0001.jpg‘);transition:5s;">
</div>

transition:控制高度变化开始到结束需要经历的时长。

2.背景图片的设置

background-color 背景颜色。  
background-position 规定背景图像的位置。 水平方向left right center   垂直方向有top bottom center  还有px像素,%  
background-size 规定背景图片的尺寸。  
background-repeat 规定如何重复背景图像。

repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
 
background-origin 规定背景图片的定位区域。  
background-clip 规定背景的绘制区域。  
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。

scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。
 
background-image 规定要使用的背景图像。            如果同时设置了background-color 该图片会显示在background-color之上  
inherit 规定应该从父元素继承 background 属性的设置。

合并背景写法background:#ccc url(‘http://img6.cache.netease.com/photo/0001/2016-05-18/BNAUNT5K00AP0001.jpg‘) 10px 20px no-repeat fixed;

时间: 2024-10-11 12:09:02

前端学习 第一天的相关文章

前端学习第一步----切图仔的诞生

刚刚学习了一下前端的入门课程,将设计师设计的logo等图片从PSD文件中切出来,并保存为PNG格式.PNG格式的主要优点就是背景色可以为空白,不同于普通格式的图片的白色.使用的工具是Photoshop 首先先了解下ps中的基础概念,图层,选区,图层的合并,图层的移动. 0.ps的基本操作,Alt+左键可以放大图片,空格+左键可以移动图片 1,如何选中一个图层,我们首先将鼠标移动到选择工具,然后移动到我们要选中的图层上按住Ctrl+左键,会自动在图层中找到该对应的图层,找到该图层后我们再在该图层的

Web前端学习-第一课JavaScript篇

Q1:数据类型有哪些? 5种简单数据类型:undefined,null,boolean,number,string: 1种复杂数据类型:object. Undefined只有一个值:undefined: Null只有一个值:null:(表示一个空对象指针) Boolean有两个字面值:true,false:(区分大小写,True和False等都不是boolean值,只是标识符) Number值:整数,浮点数,十进制,八进制(第一位必须是0,严格模式下无效),十六进制(前两位必须是0x),数值范围

Web前端学习-第一课HTML篇

Q1:什么是HTML? Html(Hyper Text Mark-up Language)超文本标记语言.是用来表述网页的一种语言.可以表示文字,图形,动画,声音,表格等的文本,结构包括head 和 body两部分.Head描述浏览器所需要的信息.Body包含所要说明的具体内容.通过在文本中添加标记符告诉浏览器如何显示其中的内容,浏览器按顺序阅读网页文件,通过标记符解释和显示其标记的内容,对书写错误的标记不指出其错误,且不停止其解释过程.不同浏览器有不同的解释. 是基于标准通用置标语言的应用.

黑马程序员:从零基础到精通的前端学习路线

随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上流传甚广的一张前端学习思维导图,很多初学者表示看到这些密密麻麻的知识点就已经晕了.确实,前端是一门涵盖面很广的学科.但是想学前端的你也不用慌张,内容虽多但有迹可循,只要循序渐进就不怕学不好前端! 那么前端开发到底需要学什么?应该怎么学?接下来黑马程序员前端学院教你如何从零基础学习前端. 一.前端开发入门 在入门阶段,你首先要学会最基本的技能

前端学习 第五弹: CSS (一)

前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="mystyle.css" /> 外联 <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40

web前端学习路线

大三马上就要读完了,之前就是学习了下前端,之后也希望从事这一方面的职业,很多人都觉得前端很简单,其实并不是这样的,前端的入门是比较容易,但是要深入学习还是有写难度的,希望可以和大家一起学习,共同进步,这是写的第一篇短文,写得不好还望大家见谅. 前端学习: 1.HTML(超文本标记语言),主要是使用一些html标签搭建好网页的框架,这个是十分重要的,主要要学会怎么合理科学的划分页面. 2.CSS,层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等

WEB前端学习笔记 四

接上一篇,web学习笔记 四,在此感谢您对此篇笔记的认可,但转发时请注明文章出自网知博学. 2.0  html的语法格式 html的标签要写在尖括号中 :<> 在在英文输入法状态下,按住shift键然后再按它左侧的尖括号就可了, 先学习一个简单的h1标签,是个标题标签,在html中这样写: <h1>我在h1标签中,我就是标题</h1> 那么h1标签中所包裹的文字,就标记成标题了.通过浏览器的解析后在页面上显示出来的效果就是字体加粗,加黑,和word中的标题性质一样! 大

前端学习书籍推荐

纯属转载,大致看了下,文章里推荐的书都不错,设计前端的常见内容(html.css.js.jq),当然,前端不仅仅包含这几个方面.文章如下(链接均指向豆瓣的书评): ----------------------------------- 时常遇到朋友问我前端学习该如何学习, 看哪些书藉. 自己也希望将自己的一些学习心得与经验传教于初学者. 抱着对初学者负责的态度, 如何学习前端, 我还需要在心成有个成熟的底稿后再来写, 本文先以自己学习过程中看过的书为基础, 总结一下前端学习各个阶段书籍的选择.

Magento学习第一课——目录结构介绍

Magento学习第一课--目录结构介绍 一.Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zend框架提供了面向对象的代码库并且有很好的团队支持.通过这个框架,Magento主要围绕三个基本点建立: 1. 灵活性:我们相信每一个解决方案都像它的商务支持一样是独一无二的.Magento的代码可以无缝定制的. 2. 可升级性:Magento可方便的实行定制且不丧失升级的能力,因为从社区中获得核心代