html+cs入门实例,CS50 HTML和CSS基础(介绍最简单的HTML和CSS)

最近简单HTML

Hello!

Hello, world!

HTML中form表单

Forms

Favorite Color:

Blue

Green

Yellow

Red

4ea1b3e4014f20fb6c7fcf50cb52f3b0.png

相对比较复杂的HTML

超链接href

有序列表和无序列表

图片

表格

HTML Elements

A Large Heading

A Smaller Heading

The Smallest Heading

A bold word and an italicized word!

View the CS50 Website!

An unordered list:

  • foo
  • bar
  • baz

An ordered list:

  1. foo
  2. bar
  3. baz

An image:

Rubber Duck Picture

OceanAverage DepthMaximum Depth

Pacific4280 m10911 mAtlantic3646 m8486 m

CSS简介

在HTML中嵌入CSS

Hello!

A Colorful Heading!

Hello, world!

指定整个 body的样式

Hello!

A Colorful Heading!

Hello, world!

将CSS放在前面

Hello!

h1 {

color: blue;

text-align: center;

}

A Colorful Heading!

Hello, world!

单独的CSS文件

h1 {

color: blue;

text-align: center;

}

Hello!

A Colorful Heading!

Hello, world!

给表格添加CSS

table {

border: 1px solid black;

border-collapse: collapse;

}

td {

border: 1px solid black;

padding: 2px;

}

th {

border: 1px solid black;

padding: 2px;

}

table {

border: 1px solid black;

border-collapse: collapse;

}

td, th {

border: 1px solid black;

padding: 2px;

}

更复杂的CSS

Pseudoclasses

button {

background-color: red;

width: 200px;

height: 50px;

font-size: 24px;

}

button:hover {

background-color: green;

}

Button 1

Button 2

Button 3

来源:oschina

链接:https://my.oschina.net/u/4316165/blog/4696355

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值