[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界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...
随机推荐
- Go与Docker的几本书的作者
http://thenewstack.io/ebookseries/http://thenewstack.io/building-a-web-server-in-go/
- java学习之IO装饰设计模式
装饰设计模式就是对已有的对象的功能进行增强 当想要对已有的对象进行功能增强时,可以定义类,将已有对象传入,基于已有的功能,并提供加强功能.那么自定义的该类称为装饰类. 装饰类通常会通过构造方法接收被装 ...
- poj 2346 Lucky tickets(区间dp)
题目链接:http://poj.org/problem?id=2346 思路分析:使用动态规划解法:设函数 d( n, x )代表长度为n且满足左边n/2位的和减去右边n/2位的和为x的数的数目. 将 ...
- ZIOZIA_百度百科
ZIOZIA_百度百科 ZIOZIA
- Python类的继承演示样例
class Pet: __name = "" def __init__(self, name): self.__name = name def bark(self): return ...
- Windows Time服务无法启动 错误5拒绝访问
接着上次写的文章 XP和Win7设置系统自动同步系统时间方法 本文就把故障出现的过程和解决方法一共写下来,希望大家可以看到本文在解决此项服务的思路.大家以后出现类似的问题和问题可以一样使用此类方法解决 ...
- Web Deploy发布网站一条龙解决方案
Web Deploy工具对于ASP.NET开发人员来说一定不陌生,没有用过也经常见到,Web Deploy发布十分方便而且在发布时会帮助用户检验发布文件的正确性.接下来介绍一下基础使用. 第一步:安装 ...
- IDEA 中使用Maven Compile 找不到本地 Jar
本文地址:http://www.cnblogs.com/duwei/p/4656410.html 在IDEA 的子 Maven Module 中使用 compile 进行编译, 一开始提示从私有远程仓 ...
- POJ 1041 John's trip 无向图的【欧拉回路】路径输出
欧拉回路第一题TVT 本题的一个小技巧在于: [建立一个存放点与边关系的邻接矩阵] 1.先判断是否存在欧拉路径 无向图: 欧拉回路:连通 + 所有定点的度为偶数 欧拉路径:连通 + 除源点和终点外都为 ...
- django中tag的用法
在app里建一个子的python包,包含__init__.py,包名为templatetags,里面新建一个tags.py(这个名字可以随意) from django import templater ...