365215022
0852-74076310
导航

论HTML和CSS之间的关系|硬核解答!

发布日期:2021-09-21 16:59

本文摘要:网站分静态网站和动态网站,相信小同伴们对这两个词略有耳闻或者已经相识,那么小编还是烦琐一下这两种网站有什么区别。

博亚体育app

网站分静态网站和动态网站,相信小同伴们对这两个词略有耳闻或者已经相识,那么小编还是烦琐一下这两种网站有什么区别。01网页上的内容是随着数据库读取出来的内容纷歧样或者用户操作纷歧样而改变的,举个例子,好比网页上的用户登录,刚会见网页的时候用户登录状态是无登录状态,当用户点击登录,弹出输入账号密码的窗口的时候,这还不算是动态,还属于静态,那么接下来,用户点击登录按钮,网页将账号密码提交到服务器后台,服务器把账户密码拿去跟数据库内里存的做比力,如果一样,则登录乐成,网页显示登录乐成状态,如果核对没有完全一致,则登录失败,网页保持无登录状态。

像这种随着用户操作而改变内容的网站,才称之为动态网页。02看了上面的动态网站,其实对静态网站也能有一定明白了,不明白也没关系,这里再详细说明下!静态网站是指网站无论用户操作什么,都是一模一样的,不会有任何改变,那么有小同伴可能又要问了,有些网站上有导航栏,我点击首页,会跳转到首页,点击关于我们,又换了一个页面,这岂非不是动态吗?不是的,这是静态,你无论怎么操作,你会发现你跳转来跳转去的网页长得一摸一样,没有任何改变。其实除了看网页变化来判断是静态网页还是动态网页之外,另有个方法,看网页地址栏的扩展名,如果.html就是静态网页,如果是.asp或者.php那就是动态网页。

可是这种说法并不完全正确,现在可以消息分散,可以明白为有没有数据库支持!如图所示是我在网络上找到的一个asp动态网站。Html网站网上很是多一抓一大把,php也不少,有兴趣的小同伴可以自己上网搜索下!接下来进入主题,我们先来看看我们今天要实现的效果是什么?鼠标经由有效果对吧。

我们先看看效果图:这是一个网站的导航栏接下来我们把鼠标放上去看看会发生什么?这种神奇的效果要如何设计呢?大家都知道网页设计的三大利器是什么?谜底:HTML+CSS+JavaScript本章的这个案例我们只需要用到HTML+CSS,还是很简朴的,我们先来看看导航栏怎么写:<!DOCTYPE html><html><head> <title>August精彩编程</title></head><body> <div class="header"> <a href="#"><img src="logo.png"></a> <div class="header-word"> <ul> <a href="#"><li>CONTACT</li></a> <a href="#"><li>EVENTS</li></a> <a href="#"><li>FACULTY</li></a> <a href="#"><li>GALLERY</li></a> <a href="#"><li>ABOUT</li></a> <a href="#"><li>HOME</li></a> </ul> </div> </div> <div class="clear"></div></body></html>这样写我们的导航栏就写出来了,可是效果是什么样的呢?我们需要对这个页面加上CSS(层叠样式表)。代码如下:<!DOCTYPE html><html><head> <title>August精彩编程</title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ width: 100%; } html{ height: 2400px; } .header{ width: 100%; height: 100px; background:#07cbc9; } .header img{ height: 48px; width: 260px; padding: 26px 26px; padding-left: 10%; float: left; } a{ color: #fff; text-decoration: none; } .header .header-word{ padding-right:75px; } .header .header-word ul li{ float: right; font-size: 16px; font-family: "微软雅黑"; padding-right: 10px; padding-left: 10px; list-style: none; line-height: 100px; color: #fff; }<。


本文关键词:论,HTML,和,CSS,之,间的,关系,硬核,解答,网站,分,博亚体育app下载

本文来源:博亚体育-www.cczkyh.com