[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界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...
随机推荐
- 启动（Startup）
Startup Chrome是一个单一的可执行程序.它清楚如何运行其它进程. 下面是chrome启动的概述: 1. 首先,chrome有一个平台相关的入口点:在windows上是wWinMain(): ...
- GSAP学习笔记
GSAP(Green Sock Animation Platform)是一个十分好用的js动画库,据说是as的精简版 以下是学习GSAP的一些笔记:貌似中文的文档不是很多 GSAP notes: tl ...
- Mac平台编译mupdf-qt的开源项目
How to compile mupdf-qt Compile on Linux Install tools and thirdparty libraries You should install s ...
- 用200行Python代码“换脸”
介绍 本文将介绍如何编写一个只有200行的Python脚本,为两张肖像照上人物的“换脸”. 这个过程可分为四步: 检测面部标记. 旋转.缩放和转换第二张图像,使之与第一张图像相适应. 调整第二张图像的 ...
- 关于 firefox 无法在 passport.csdn.net 找到该服务器
很奇怪的现象:用firefox上网,某些网站打开总是会提示 无法在XXX找到该服务器.但是使用其他浏览器,比如360却可以正常打开. 我已经将firefox加入了防火墙的信任列表,但是仍旧是这样. 而 ...
- 在Mac上配置/使用Github
文/天才晓波(简书作者)原文链接:http://www.jianshu.com/p/20eee155bbee著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 先简单介绍一下Git和Git ...
- 写一方法计算实现任意个整数之和.在主调函数中调用该函数，实现任意个数之和。（使用params参数）
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- TensorFlow文本与序列的深度模型
TensorFlow深度学习笔记 文本与序列的深度模型 Deep Models for Text and Sequence 转载请注明作者:梦里风林Github工程地址:https://github. ...
- Python 2.7 学习笔记 模块和包
我们来考虑下如下几种场景: 1.编写一个python程序,如果程序比较简单,则可以把代码放到一个python文件中.但如果程序功能比较多,可能需要多个python文件来组织源代码.而这些文件之间的代码 ...
- grep egrep fgrep命令
一.grep.egrep.fgrep命令 本文中主要介绍了linux系统下grep egrep fgrep命令和正则表达式的基本参数和使用格式.方法.(注释:文中fg代表例子,) 1.1.基本定义: ...