zoukankan html css js c++ java

导航，头部，CSS基础

题目：

制作自己的导航条。
HTML头部元素：
1. <base> 定义了页面链接标签的默认链接地址
2. <style> 定义了HTML文档的样式
3. <link> 定义了一个文档和外部资源之间的关系
练习样式表：
1. 行内样式表
2. 内嵌样式表
3. 外部样式表
分别练习定义三类选择器：
1. HTML 选择器
2. CLASS 类选择器
3. ID 选择器

制作自己的导航条

　　代码如下：

 1 <nav>
 2     <div class="navbar-header">
 3         <img src="../static/logo.png" width="50px">
 4         <a class="" href="http://src.bookmarkye.com" target="_blank">主页</a>
 5     </div>
 6     <form class="navbar-form navbar-left" role="search">
 7         <div class="form-group">
 8             <input type="text" class="form-control" placeholder="Search">
 9         </div>
10         <button type="submit" class="btn btn-default">搜索</button>
11     </form>
12     <div class="navbar-right" style="padding-top:5px;padding-right:30px;">
13         <button type="button" class="btn btn-danger">注册</button>
14         <button type="button" class="btn btn-success">登录</button>
15     </div>
16 </nav>

运行结果：

HTML头部元素：

<base> 定义了页面链接标签的默认链接地址
<style> 定义了HTML文档的样式
<link> 定义了一个文档和外部资源之间的关系

代码如下：

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>MIS问答平台</title>
 4     <base href="../static/" target="_blank">
 5     <!-- 引入 Bootstrap -->
 6     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 7     <style>
 8         p{
 9             color:blue;
10         }
11         .starone{
12             color:red;
13         }
14         #content{
15             color:green;
16         }
17     </style>
18 </head>

练习样式表：

行内样式表

　　代码如下：

1 <div class="navbar-right" style="padding-top:5px;padding-right:30px;">
2         <button type="button" class="btn btn-danger">注册</button>
3         <button type="button" class="btn btn-success">登录</button>
4 </div>

　　2.内嵌样式表

　　代码如下：

 1 <style>
 2         p{
 3             color:blue;
 4         }
 5         .starone{
 6             color:red;
 7         }
 8         #content{
 9             color:green;
10         }
11 </style>
12 
13 
14 <div>
15     <p>今天全场3折</p>
16     <p>今天全场3折</p>
17     <p>今天全场3折</p>
18     <h1 class="starone">今天全场1折起</h1>
19     <span id="content">3999元起</span>
20 </div>

　　3.外部样式表

　　代码如下：

 1 <!-- 引入 Bootstrap -->
 2 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 3 <nav>
 4     <div class="navbar-header">
 5         <img src="../static/logo.png" width="50px">
 6         <a class="" href="http://src.bookmarkye.com" target="_blank">主页</a>
 7     </div>
 8     <form class="navbar-form navbar-left" role="search">
 9         <div class="form-group">
10             <input type="text" class="form-control" placeholder="Search">
11         </div>
12         <button type="submit" class="btn btn-default">搜索</button>
13     </form>
14     <div class="navbar-right" style="padding-top:5px;padding-right:30px;">
15         <button type="button" class="btn btn-danger">注册</button>
16         <button type="button" class="btn btn-success">登录</button>
17     </div>
18 </nav>

分别练习定义三类选择器

　　代码如下：

 1 {#        1  .HTML 选择器#}
 2         p {
 3             color: blue;
 4         }
 5 {#        2  .CLASS 类选择器#}
 6         .starone {
 7             color: red;
 8         }
 9 {#        3  .ID 选择器#}
10         #content {
11             color: green;
12         }

全网站运行结果如下：

查看全文

相关阅读:
格式化数字，将字符串格式的数字，如：1000000 改为 1 000 000 这种展示方式
 jquery图片裁剪插件
 前端开发采坑之安卓和ios的兼容问题
 页面消息提示，上下滚动
 可以使用css的方式让input不能输入文字吗？
智慧农村“三网合一”云平台测绘大数据农业信息平台应急
 三维虚拟城市平台测绘大数据规划三维信息平台智慧城市
 农业大数据“一张图”平台测绘大数据房产国土农业信息平台
 应急管理管理局安全生产预警平台应急管理系统不动产登记测绘大数据规划科教三维信息平台
 地下综合管廊管理平台测绘大数据地下管线三维信息平台

原文地址：https://www.cnblogs.com/alliancehacker/p/7688543.html