[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界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...
随机推荐
- 谈谈我的iOS学习及分享
iOS可以说是最近几年比较热门和高速发展一个系统,因此iOS开发也变得火热.越来越多的程序员都转向了iOS开发,每个人的学习方法都不同,分享下我的学习经历和见解吧.我之前学习过C++和Qt,Java也 ...
- Qt 错误： 无法运行 release 下的可执行文件
学习Qt有一点时间了,但之前都是在debug版本下进行编译运行,偶然切换到release版本下,却出现了如下错误: 错误提示: This application failed to sta ...
- Windows Phone 8初学者开发—第4部分：XAML简介
原文 Windows Phone 8初学者开发—第4部分:XAML简介 原文地址: http://channel9.msdn.com/Series/Windows-Phone-8-Developme ...
- Android 一个改进的okHttp封装库
一.概述 之前写了篇Android OkHttp完全解析 是时候来了解OkHttp了,其实主要是作为okhttp的普及文章,当然里面也简单封装了工具类,没想到关注和使用的人还挺多的,由于这股热情,该工 ...
- centos下彻底删除MYSQL 和重新安装MYSQL
在Centos6.3上装了一个Mysql,结果mysql库被我玩丢了(这里面管理了mysql的权限).现在采用先彻底删除,然后重新安装Mysql. 1 删除Mysql yum remove mysq ...
- BZOJ 2016: [Usaco2010]Chocolate Eating( 二分答案 )
因为没注意到long long 就 TLE 了... 二分一下答案就Ok了.. ------------------------------------------------------------ ...
- 树莓派deian的linux常用命令
Linux系统,这个强大的系统,现在树莓派也要用到.给大家普及一下. 那些常用的Linux命令 linux的文件结构 / 根目录下的目录 /bin /home /dev /usr /opt /et ...
- 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld
记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...
- Qt 5.x 全局热键 for windows
Qt 升级到5.x版本后,QAbstractEventDispatcher中函数发生变动,导致libqxt库中的qxtGlobalShortcut挂掉.参考qxtGlobalShortcut写了一个全 ...
- Webservice-WSDL详解（三）
怎样向别人介绍WS的功能呢?一般咱们会写接口文档,亦或口头告诉使用的人.这些方式都存在问题:其中一个我上篇中说过,客户端是无法直接使用服务端接口的:二是程序员在电脑前,想使用WS时,他们的工具(如Ec ...