HTML+CSS学习笔记（四）-- HTML 页面跳转 href、image、input 到资料传出去 php。。

最新推荐文章于 2021-06-03 05:59:44 发布

READ LEE

最新推荐文章于 2021-06-03 05:59:44 发布

阅读量813

点赞数

文章标签： css html html5 php mysql

本文链接：https://blog.csdn.net/weixin_45889834/article/details/108560974

版权

HTML 学完这些就差不多了

HTML 的逻辑判断和流程跳转的能力太差，常常需要Javascrip 或php 帮忙，但是 HTML 却是最后呈现的 web 规范，这个在教导上有许多取舍问题。
所以，个人认为，学 HTML 先搞定下面这些部分，其他的到了有需要在弄清楚。

页面布局，就是我第二次笔记的内容。其中还包含了区块的操作概念，就是
…
的观念。
表格 th、td 和列表样式 ul、li。。
页面跳转、档案连接的 <a href=“ 。。”>
资料输入 .

页面如果没有美工设计的底子，要弄的很博人眼球是很费功夫，常常是事倍功半，浪费时间；更何况有许多外挂可以抄来使用。

页面跳转的技巧

延续前一篇的笔记，我们要修改一些部分：

建立一个 .css 档案，把之间的程式移到 .css 里面。因为等一下要建立3~4 个 html 档案，一个一个写 style 是很费时间，也不容易修改。
用原来的 HTML 档案拷贝几个要跳转的档案如附图。

我把主画面设定成下图的状态。.

所以，主程式是下面这样；

<!DOCTYPE html>
<html>
<head>
	<title>sidebar_zen.html</title>
	<link rel="stylesheet" type="text/css" href="sidebar.css" media="all">
	<style></style>	
</head>
<body>
	<div id="container">
	 	<header > 
	 	<h1>header</h1>
	 	</header>
	 	<nav>
	 		<div id="menu">
	 			<ul>
			        <li><a  href="sidebar_zen.html">首页</a></li>
			        <li><a  href="我们公司.html">我们公司</a></li>
			        <li><a  href="公告服务.html">公告服务</a></li>
			        <li><a  href="友好连接.HTML">友好连接</a></li>
			        <li><a  href="联络中心.html">联络中心</a></li>
			    </ul>
			</div>
	 	</nav>
	 	<aside><h1>aside</h1>
			<div id="s_nav">
			  <ul>
			    <li><a href="#section-1">Section 1</a></li>
			    <li><a href="#section-2">Section 2</a></li>
			    <li><a href="#section-3">Section 3</a></li>
			    <li><a href="#section-4">Section 4</a></li>
			    <li><a href="#section-5">Section 5</a></li>
			    <li><a href="#section-6">尚未设定内容</a></li>
			    <li><a href="公告服务.html">公告服务</a></li>
			    <li><a href="#section-9">尚未设定内容</a></li>
			    <li><a  target="_blank" href="https://www.leiphone.com/">
				      <img src="leifeng.JPG" alt="雷锋网" width="100" height="70">
				    </a></li>	
			  </ul>
			</div>
	 	</aside>
	  	<article>
	 		<div id="section-1">
				<div id="item1" style="background-color:#Ffddcc";>  这里是 Section 1   第 1  块 </div>
				<div id="item1" style="background-color:#ccddcc";>  这里是 Section 1  第 2  块 </div>
				<div id="item1" style="background-color:#aaddcc";>  这里是 Section 1  第 3  块  </div></div>
			<div id="section-2">
				<div id="item1" style="background-color:#88ddcc";> <h5> 这里是 Section 2</h5> <h1>   第 4  块   </h1></div>
				<div id="item1" style="background-color:#66ddcc";> <h5> 这里是 Section 2</h5> <h1>   第 5 块   </h1></div>
				<div id="item1" style="background-color:#33ddcc";> <h5> 这里是 Section 2</h5> <h1>   第 6  块   </h1></div></div>
			<div id="section-3">
				<div id="item1" style="background-color:#dd88cc";> <h5> 这里是 Section 3</h5> <h1>   第 7  块   </h1></div>
				<div id="item1" style="background-color:#dd66cc";> <h5> 这里是 Section 3</h5> <h1>   第 8 块   </h1></div>
				<div id="item1" style="background-color:#dd33cc";> <h5> 这里是 Section 3</h5> <h1>   第 9  块   </h1></div></div>
			<div id="section-4">
				<div id="item1" style="background-color:#ddcc88";> <h5> 这里是 Section 4</h5> <h1>   第 10  块   </h1></div>
				<div id="item1" style="background-color:#ddcc66";> <h5> 这里是 Section 4</h5> <h1>   第 11 块   </h1></div>
				<div id="item1" style="background-color:#ddcc33";> <h5> 这里是 Section 4</h5> <h1>   第 12  块   </h1></div></div>
	 	</article>
 	</div>

</body>
</html>

跳转页面的主要连接

这里对程式里面的几个连接做个说明：

.css 的档案连接是。这个 link 有一点像 c 语言的 include 指令，我们只要把 href 里面的连接位置写正确就好。记得，是 “位置+档案”.
换页连接，如下面的写法

<ul>
	        <li><a  href="sidebar_zen.html">首页</a></li>
	        <li><a  href="我们公司.html">我们公司</a></li>
	        <li><a  href="公告服务.html">公告服务</a></li>
	        <li><a  href="友好连接.HTML">友好连接</a></li>
	        <li><a  href="联络中心.html">联络中心</a></li>
 </ul>

有时候一个页面比较长，我们只需要在同一页比较下面的位置，那么这个写法如下面的程式；

这个时候，我们要在相应位置这么写

这里的

, “section-1” 可以不需要在 .css 档案里定义。
这个写法可以把图插在表列中，然后点按图面就可以跳转到外部页面，这里是跳到雷锋网当例子。
target="_blank"
是用新的页面打开目标网页。
我们这次在 .css 加入了下列的style，一个是 aside 区块用的 #s_nav，一个是在 article 主区块做小区块用的 #item1 。

/* side bar Start */
	#s_nav  {width: 100%;height: 90px; ;
        	 white-space: nowrap;
        	 display: flex;
    }
    #s_nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    #s_nav ul li a {
      display: block;
      padding: 0.5rem 1rem;
      color: blue;
      text-decoration: none;
    }
    #s_nav ul li a.current {
      background: black;
    }
    #s_nav a:hover {
      color: lightblue;
      text-decoration: none;
    }
  a img:hover {border:1px; border-color: red;}

  /*------side bar END-------------------------*/

/*Article 的主要项 */
	#item1 {height: 150px; width: 200px;  margin-left: 10px; border: 2px; }

Foundation5

这里介绍一个 HTML 版面规划很方便的 CSS 计划叫做 ”Foundation5“; 在菜鸟教程和 W3C 中文网站都有完整说明。有兴趣可以进入这两个网站了解一下。虽然这两个网站都有范例可以让使用者试试，但是速度比较慢，因为有一个 .css 和 3 个 .js 档案要参照的。所以，建议考下来，放在自己的电脑里，这样可以取得比较好的编译速度。
在这里插入图片描述

输入资料的处理

在 HTML上输入资料不难，但是资料的处理和储存才是不方便的。
后面的笔记，我计划用 PHP + MySQL 进行。

READ LEE

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS学习笔记（四）-- HTML 页面跳转 href、image、input 到资料传出去 php。。

HTML 学完这些就差不多了HTML 的逻辑判断和流程跳转的能力太差，常常需要Javascrip 或php 帮忙，但是 HTML 却是最后呈现的 web 规范，这个在教导上有许多取舍问题。所以，个人认为，学 HTML 先搞定下面这些部分，其他的到了有需要在弄清楚。页面布局，就是我第二次笔记的内容。其中还包含了区块的操作概念，就是 … 的观念。表格 th、td 和列表样式 ul、li。。页面跳转、档案连接的 <a href=“ 。。”>资料输入 .页面如果没有美工设计的底子，要
复制链接

扫一扫