[Codecademy] HTML&CSS第八课：Design a Button for Your Webwite
本文出自 http://blog.csdn.net/shuangde800
[Codecademy] HTML && CSS课程学习目录
------------------------------------------------------------------------------------------------
这节课主要是讲怎样用div来模拟出一个按钮。
border-radius
margin
margin:10px 5px 15px 20px;
- 上外边距是 10px
- 右外边距是 5px
- 下外边距是 15px
- 左外边距是 20px
margin:10px 5px 15px;
- 上外边距是 10px
- 右外边距和左外边距是 5px
- 下外边距是 15px
margin:10px 5px;
- 上外边距和下外边距是 10px
- 右外边距和左外边距是 5px
margin:10px;
- 所有 4 个外边距都是 10px
text-align
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
img {
display: block;
height: 100px;
width: 300px;
margin: auto;
}
p {
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
/*Start adding your CSS below!*/
div {
height: 50px;
width: 120px;
border: #6495ED;
background-color: #BCD2EE;
border-radius: 5px;
margin: auto;
text-align: center;
}
a {
text-decoration: none;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>About Me</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
<p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
<div>
<a href="blog.csdn.net/shuangde800">my blog</a>
</div>
</body>
</html>
[Codecademy] HTML&CSS第八课：Design a Button for Your Webwite的更多相关文章
- [Codecademy] HTML&CSS 第三课：HTML Basic II
本文出自 http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...
- [Codecademy] HTML&CSS 第七课：CSS: An Overview
本文出自 http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...
- CSS前5课总结
CSS<精通CSS.DIV网页样式与布局>视频前5课总结: 地对地导弹 第一课: 使用CSS控制页面: 1,行内样式 <p style="color:#0000FF; fo ...
- NeHe OpenGL教程 第四十八课：轨迹球
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- Kali Linux Web 渗透测试视频教程— 第八课 nessus
Kali Linux Web 渗透测试视频教程— 第八课 nessus 文/玄魂 视频课程地址:http://edu.51cto.com/course/course_id-1887.html 目录 n ...
- NeHe OpenGL教程 第三十八课：资源文件
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- NeHe OpenGL教程 第二十八课：贝塞尔曲面
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- NeHe OpenGL教程 第十八课：二次几何体
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现
UI系列教程第八课:Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...
随机推荐
- js求指定时间的周一和周日
/*计算指定时间的的周一和周日 return=>{mondy:Date,sundy:Date} parms:{ date:指定时间,如果不指定则取当前时间 } */ function getWe ...
- 「操作系统」：Linker Use static Libraries
While static libraries are useful and essential tools, they are also a source of confusion to progra ...
- Python实现BBS自动登录并发帖
初学Python有了一段时间,寒假里又看了一些Web编程方面的知识,就写了一个实现bbs自动登录和发帖的Python脚本 由于本人学校BBS站首页使用js加载,貌似通过首页登录不大可行,然后就分析表单 ...
- Android:源码环境下移植第三方的apk内置到ROM(System Image)中
1. 首先在vendor目录下新建一个the3rdapk的目录,将需要内置的apk丢进去,目录名自己随意定. 2. 在 build/target/product/common.mk最后面,在$(cal ...
- CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级
从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=" ...
- 64位系统/32位系统下/8位CPU的数据宽度
不同的编译器根据不同的 64 位模型有所不同. 比如 Visual C++,从第一个支持 64 位的版本起,一直就是使用 LLP64 内存模型,也就是说,编译出的代码除了 long 和指针是 64 位 ...
- 数据库迁移（SQL SERVER导入数据到MySql）
地址:http://blog.csdn.net/jiaohougenyang/article/details/44937801 背景:项目最开始时使用的是SQL Server数据库,业务需求现要将数据 ...
- Hadoop集群的安装与配置（centos 6.5）
一.Hadoop搭建准备(centOs6.5 且每个系统都要有同一个用户,如:hadoop) 1.IP的配置 包括Master和Slaves的IP配置,之间能够相互ping通: 例如: ...
- 浙江大学2015年校赛B题 ZOJ 3861 Valid Pattern Lock
这道题目是队友写的,貌似是用暴力枚举出来. 题意:给出一组数,要求这组数在解锁的界面可能的滑动序列. 思路:按照是否能够直接到达建图,如1可以直接到2,但是1不能直接到3,因为中间必须经过一个2. 要 ...
- Codeforces 479D - Long Jumps
479D - Long Jumps, 480B - Long Jumps It , or . If we can already measure both x and y, output . Then ...