[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界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...
随机推荐
- float 保留两位小数
1.页面运算格式化数字 页面上有时候会用到数字的运算,运算过后会出现1.5999999999999这么长的数字,需要格式化数字,比如保留两位有效数字 首先导入这个标签 <%@ taglib ur ...
- 解决Jetty Maven Plugin：Please initialize the log4j system properly(转)
解决Jetty Maven Plugin:Please initialize the log4j system properly.Jetty Maven Plugin环境: <plugin> ...
- asp.net从客户端检测到有潜在危险的Request.Form 值
asp.net开发中,经常遇到“从客户端检测到有潜在危险的Request.Form 值”错误提示,很多人给出的解决方案是: 1.web.config文档<system.web>后面加入这一 ...
- TPM 2.0 近况及模拟器开发
可信计算平台模块TPM 2.0的相关标准和技术准则由 TCG ( Trust Computing Group )于2011年前后提出,至今已经过了多次修改.该标准无疑将成为下一代可信计算平台模块的业界 ...
- HDU_1003Max Sum 简单动归
以前做过这道题目,那是还不懂状态方程.乱搞一气: #include<cstdio> #include<algorithm> using namespace std; +; in ...
- 第三种：NSOperationQueue
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...
- ViewPager引导页效果实例源码
首先大家先找到本地的sdk,然后找到Google提供的API,具体查找方法如下:sdk——>docs——>index.html——>develop——>training——&g ...
- 小猪猪C++笔记基础篇（四）数组、指针、vector、迭代器
小猪猪C++笔记基础篇(四) 关键词:数组,Vector. 一.数组与指针 数组相信大家学过C语言或者其他的语言都不陌生,简单的就是同一个变量类型的一组数据.例如:int a[10],意思就是从a开始 ...
- C#学习之在辅助线程中修改UI控件----invoke方法
Invoke and BeginInvoke 转载地址:http://www.cnblogs.com/worldreason/archive/2008/06/09/1216127.html 在Invo ...
- [Swust OJ 249]--凸包面积
题目链接: http://acm.swust.edu.cn/problem/0249/ 麦兜是个淘气的孩子.一天,他在玩钢笔的时候把墨水洒在了白色的墙上.再过一会,麦兜妈就要回来了, ...