实例1.html基本文档结构
<!doctype html> <!--文档声明，声明此文档为html 5 的文档--> <html> <!--html开始标签--> <head> <!--网页头部标签，此标签内的内容是让浏览器看的--> <meta charset="utf-8"> <!--设置文档编码为utf-8，兼容性比较好--> <title>html标签介绍</title> <!--文档标题标签，会显示到网页浏览器的标题栏上--> </head> <!--头部标签结束--> <body> <!--网页主体标签，网页中可见的部分都在此标签内--> </body> <!--网页主体标签结束--> </html> <!--html结束标签-->
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例2.HTML中的文本标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html中的文本标签</title> </head> <body> <h1>标题1<h1></h1></h1> <h2>标题2<h2></h2></h2> <h3>标题3<h3></h3></h3> <h4>标题4<h4></h4></h4> <h5>标题5<h5></h5></h5> <h6>标题6<h6></h6></h6> <p>段落文本<p></p> 文本的换行标记<br><br> <strong>文本加粗<strong></strong></strong> <p><u>字体带下划线<u></u></u></p> <p><em>斜体文本<em></em></em></p> <ul> <li>项目列表标签<ul></ul></li> <li>列表项标签 <li></li></li> <li>以符号表示的列表也可称为无序列表</li> </ul> <ol> <li>编号列表，也称为有序列表<ol></ol></li> <li>列表项标签 <li></li></li> </ol> <p><font color="#f00" size="+3" face="黑体">文本字号，大小，颜色等，以前有一个<font>标签，但现在基本不使用此标签，文本的修饰一般使用CSS来控制。</font></p> <p>还有一些特殊的文本符号：< > “ ” — – £ € ¥ © ® ™</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例3.CSS制作导航条
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导航练习</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
font-size: 13px;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #f00;
}
body nav {
background-color: #f4f4f4;
}
.box {
width: 1200px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.box a {
line-height: 36px;
display: inline-block;
}
.box .nl {
float: left;
}
.box .nl a ,.box .nr a{
padding: 0 10px;
}
.box .nl a:nth-child(2) {
color: #f00;
}
.box .nr {
float: right;
}
.box .nr a:hover {
background-color: #fff;
}
.box .nr a:nth-child(4) {
background-color: #F4F4F4;
}
</style>
</head>
<body>
<nav>
<div class="box">
<span class="nl">
<a href="#">中国大陆</a>
<a href="#">亲，请登录</a>
<a href="#">免费注册</a>
<a href="#">手机逛淘宝</a>
</span>
<span class="nr">
<a href="#">我的淘宝</a>
<a href="#">购物车</a>
<a href="#">收藏夹</a>
<a href="#">商品分类</a>
<span>|</span>
<a href="#">卖家中心</a>
<a href="#">联系客服</a>
<a href="#">网站导航</a>
</span>
</div>
</nav>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例4.CSS制作下拉菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS下拉菜单练习</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
body {
padding: 0;
margin: 0;
font-size: 13px;
}
ul, li {
padding: 0;
margin: 0;
/* [disabled]list-style-position: inside;
*/
list-style-image: none;
list-style-type: none;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #f00;
}
body nav {
background-color: #f4f4f4;
}
.box {
width: 1200px;
margin-left: auto;
margin-right: auto;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 36px;
}
.box a {
line-height: 36px;
display: inline-block;
}
.box i {
margin-left: 5px;
margin-right: 5px;
}
.box .nl {
float: left;
}
.box .nl a:nth-child(2) {
color: #f00;
}
.red {
color: #f00;
font-weight: bold;
}
.box .nr {
float: right;
position: relative;
}
.box .nl a, .box .nr a {
display: inline-block;
text-align: center;
padding-top: 0;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 0;
position: relative;
}
.box .nr ul {
background-color: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
display: none;
text-align: left;
color: #000;
position: absolute;
top: 36px;
left: 0px;
padding-top: 10px;
}
.box .nr li {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 0 5px;
width: 90px;
}
.box .nr li:hover {
/* [disabled]padding: 0 10px; */
background-color: #f4f4f4;
}
.box .nr a:hover ul {
display: block;
}
.box .nr a:hover {
background-color: #fff;
}
.box .nr a:nth-child(4) {
background-color: #F4F4F4;
}
</style>
</head>
<body>
<nav>
<div class="box">
<span class="nl">
<a href="#">中国大陆<i class="fa fa-angle-down "></i></a>
<a href="#">亲，请登录</a>
<a href="#">免费注册</a>
<a href="#">手机逛淘宝</a>
</span>
<span class="nr">
<a href="#">我的淘宝<i class="fa fa-angle-down "></i>
<ul>
<li>已***的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href="#" ><i class="fa fa-shopping-cart red "></i>购物车<span class="red">0</span><i class="fa fa-angle-down "></i></a>
<a href="#" >
<i class="fa fa-star "></i>收藏夹<i class="fa fa-angle-down "></i>
<ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</a>
<a href="#" >商品分类</a>
<span>|</span>
<a href="#" >卖家中心<i class="fa fa-angle-down "></i></a>
<a href="#">联系客服<i class="fa fa-angle-down "></i></a>
<a href="#"><i class="fa fa-navicon red "></i>网站导航<i class="fa fa-angle-down "></i></a>
</span>
</div>
</nav>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
