Blogger Information
Blog 18
fans 0
comment 0
visits 13917
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第4期学习班-1.14作业-【html结构】-【html文本标签】-【CSS仿淘宝导航】-【CSS仿淘宝导航下拉菜单加强版】
八七乱乱
Original
683 people have browsed it

实例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&lt;h1&gt;&lt;/h1&gt;</h1>

<h2>标题2&lt;h2&gt;&lt;/h2&gt;</h2>

<h3>标题3&lt;h3&gt;&lt;/h3&gt;</h3>

<h4>标题4&lt;h4&gt;&lt;/h4&gt;</h4>

<h5>标题5&lt;h5&gt;&lt;/h5&gt;</h5>

<h6>标题6&lt;h6&gt;&lt;/h6&gt;</h6>

<p>段落文本&lt;p&gt;</p>

文本的换行标记&lt;br&gt;<br>

<strong>文本加粗&lt;strong&gt;&lt;/strong&gt;</strong>

<p><u>字体带下划线&lt;u&gt;&lt;/u&gt;</u></p>

<p><em>斜体文本&lt;em&gt;&lt;/em&gt;</em></p>

<ul>

  <li>项目列表标签&lt;ul&gt;&lt;/ul&gt;</li>

  <li>列表项标签 &lt;li&gt;&lt;/li&gt;</li>

  <li>以符号表示的列表也可称为无序列表</li>

</ul>

 <ol>

   <li>编号列表,也称为有序列表&lt;ol&gt;&lt;/ol&gt;</li>

   <li>列表项标签 &lt;li&gt;&lt;/li&gt;</li>

 </ol>

 <p><font color="#f00" size="+3" face="黑体">文本字号,大小,颜色等,以前有一个&lt;font&gt;标签,但现在基本不使用此标签,文本的修饰一般使用CSS来控制。</font></p>

 <p>还有一些特殊的文本符号:&lt; &gt; &#8220; &#8221; &#8212; &#8211; &pound; &#8364; &yen; &copy; &reg; &#8482;</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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

Correction status:qualified

Teacher's comments:这两天作业呢??天天没上课吗?
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments