2016 - 1 - 25 CSS初步 (二)
1.The customising link
We can change the link's style when we move our pointer on the link like that:
1.1 The " text-decoration:none "means remove the underline !
a:hover{
color: black;
background-color: red;
text-decoration: none;
}
1.2 Why should we customise links?
To emphasise to the user where the links are.
1.3 What is the purpose of a CSS selector?
It connects a set of CSS properties to things in the HTML document.
1.4 a:hover is a CSS selector to select links that the user is hovering over and we can set a different set of style properties for the link when the user moves the mouse over it.
2.Layout Control
U can set classes on anything, and actually if u define the class u can use the class to a different tags .
And we can set any bit text we want. Especially when we use the span class which allow us to cut in .
like that :
.indent {
margin-left: 50px;
}
.gap_bellow{
margin-bottom: 100px;
}
<h1 class = "gap_bellow"><span class = "indent">This is my first page!</span>This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!</h1>
3.CSS Media Queries
Responsiveness can be implemented in CSS with something called CSS Media Queries.
1. The code means let the body's background color be green when brower's window has minimum width 1000px
And we call the " min-width : 1000px " test !
@media(min-width:1000px){
body{
background: green;
}
}
2016 - 1 - 25 CSS初步 (二)的更多相关文章
- 2016 - 1 - 24 CSS初步
1.The difference between CSS and HTML HTML document is that it specities the content of the page. An ...
- 一起看看2016中国第三届CSS开发者大会有哪些大咖演讲
中国第三届CSS开发者大会于2016年12月17日在广州举办.由W3C.w3ctech.前端圈主办.本次大会我们将邀请行业内知名讲师,与大家共聚广州,畅聊CSS. 快捷报名通道:http://www. ...
- 前端总结·基础篇·CSS(二)视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- 基本CSS布局二
基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...
- 2016.8.25 JavaScript入门之二
1.字符串中,引用字符串:要用/"转换: 例如:var myStr="I am a \"double quoted\" string inside \" ...
- 2016/2/25 html+css学习资源
html+css学习资源 1.Position is Everything,一个描述和展示在各种浏览器中发现的bug,并提供css解决方法的网站,顶! 2.一个国外的网页设计论坛 3.http://c ...
- 2016/1/25 多线程 作业 方法一 继承Thread 方法二 实现Runnable 多线程笔记
/* * 1,尝试定义一个继承Thread类的类,并覆盖run()方法, * 在run()方法中每隔100毫秒打印一句话.*/ package Stream; //方法一 继承Thread 实现多线程 ...
- HTML/CSS初步了解
一.CSS是什么? 它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示 ...
随机推荐
- MAC OSX环境下cordova+Ionic的安装配置
一.简介 1.Ionic是什么 IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaSc ...
- linux主要的发行版及其区别和联系
1. 主要发行版 linux主要发行版有3类: (1).Debian (2).Slackware (3).Redhat (1)Debian Ubuntu 针对桌面和服务器 knopix 以安全著称 ( ...
- 通过OCCI连接oracle(C++)
OCCI介绍 OCCI:Oracle C++调用接口(OCCI),即Oracle的C++API,允许你使用面向对象的特性.本地类.C++语言的方法来访问Oracle数据库. OCCI优势 基于标准C+ ...
- 用Object字面量来代替swtich/if...else
很多时候,if...else...有很多判断分支选项,就会见到: if (animal === 'dog') { // TO DO 'dog' } else if (animal === 'cat') ...
- DB
数据库(DB):1:降低存储数据的冗余度.2:更高的数据一致性.3:存储的数据可以共享.4:可以建立数据库所遵循的标准. 关系型数据库(RDBMS):基本单位就是表.一张表就是一个实体.MYSQL语句 ...
- oracle基础学习
一.创建数据库用户 create user myaccount identified by mypassword;(my+account表示 账号,my+password表示 密码) 二.授予用户权限 ...
- 查看cpu
使用系统命令top即可看到如下类似信息: Cpu(s): 0.0%us, 0.5%sy, 0.0%ni, 99.5%id, 0.0%wa, 0.0%hi, 0.0%si, 0.0%st ...
- 114 的 dns 的解析测试
114 的 dns 号称使用 BGP Global AnyCast 技术多点部署 的方式, 可以将用户请求导向到"就近"的服务器,理论上是可以得到域名网络就近解析的IP的,所以将 ...
- 用自定义getElementByClassName函数做“查看更多”的特效
<!DOCTYPE html> <html> <head> <title>查看更多</title> <meta charset=&qu ...
- mysql使用
1.以查询结果建表 create table newTableName select column1 [newName1] [, column2 [newName2], .. , columnn [n ...