html-列表-布局-选择器

无序列表

用粗体圆点标记，必须有ul嵌套在外边

<ul>
<li>Coffee</li>
<li>Mike</li>
</ul>

• Coffee
• Mike

有序列表

通过数字进行标记，必须有ol嵌套在外边

<<ol>
<<li>Coffee</li>
<<li>Milk</li>
<</ol>

1. Coffee
2. Milk

HTML布局

City Gellery

London
Paris
Tokyo

London

London is the captial city of England.It is the most populous city in the Unite Kindom,with a metropolitan areaof over 13 million inhabitants.

Standing on the River Thanes,London has been a major settlement for two millenia,its history going back to its founding by the Romans,who named it Londinium.

Copyright ?

width	height	br
宽度	高度	换行符

选择器

id选择器

#sample p {
font-style: italic;
text-align: right;
margin-top: 0.5em; }
<div id="sample">
<p>nihao</p>
</div>

由于id是一个盒子身份的象征，只能存在一个，所以做的样式只能被对应id的盒子引用，但是可以这样->即用作 --------------派生选择器
#sample p{ }
#sample h1{ }。

2. 还可以这样

<style type="text/css">
table,th,td{
border:1px solid blue;
}
</style>

—这样可以同时不用的元素应用一个样式，但是是对全局的—

类选择器

.cemter{
text-align: center}

<h1 class="center">
this heading will be center-alignd
</h1>

一个样式可以被多个盒子选择引用，不像id需要单独为一个盒子做样式，同样的，class也可以用做----------派生选择器—>>类名是sample的盒子里面的td表格单元全是sample类型的样式

.sample td {
color: #f60;
background: #666;
}
<div class="sample">
<td>123</td>
</div>

响应式Web设计（Responsive Web Design）