网站首页 > 技术文章正文

HTML+CSS的网页竟能有如此效果（简述html css在网页制作中各自的作用）

nanyue 2024-10-21 06:20:19 技术文章 9 ℃

编辑：陈凌煜

本文出自微信公众号“August精彩编程”（ID：august-edu）

2019年8月12日

网站分静态网站和动态网站，相信小伙伴们对这两个词略有耳闻或者已经了解，那么小编还是啰嗦一下这两种网站有什么区别。

网页上的内容是随着数据库读取出来的内容不一样或者用户操作不一样而改变的，举个例子，比如网页上的用户登录，刚访问网页的时候用户登录状态是无登录状态，当用户点击登录，弹出输入账号密码的窗口的时候，这还不算是动态，还属于静态，那么接下来，用户点击登录按钮，网页将账号密码提交到服务器后台，服务器把账户密码拿去跟数据库里面存的做比较，如果一样，则登录成功，网页显示登录成功状态，如果核对没有完全一致，则登录失败，网页保持无登录状态。

像这种随着用户操作而改变内容的网站，才称之为动态网页。

看了上面的动态网站，其实对静态网站也能有一定理解了，不理解也没关系，这里再详细说明下！静态网站是指网站无论用户操作什么，都是一模一样的，不会有任何改变，那么有小伙伴可能又要问了，有些网站上有导航栏，我点击首页，会跳转到首页，点击关于我们，又换了一个页面，这难道不是动态吗？不是的，这是静态，你无论怎么操作，你会发现你跳转来跳转去的网页长得一摸一样，没有任何改变。

其实除了看网页变化来判断是静态网页还是动态网页之外，还有个方法，看网页地址栏的扩展名，如果.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;
 }
</style>
</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>

然后效果就出来啦，如图所示：

接下来就是今天我们所学内容最核心的内容，涉及到4个CSS的链接伪类。

链接伪类，是指链接的四个状态：激活状态（active）、已访问状态（visited）、未访问状态（link）、鼠标经过状态（hover）。

那么我们今天要使用的就是鼠标经过状态（hover），怎么使用呢？看已下这段CSS：

.header .header-word ul li:hover{
 float: right;
 font-size: 16px;
 font-family: "Microsoft YaHei UI";
 padding-right: 10px;
 padding-left: 10px;
 list-style: none;
 line-height: 100px;
 background: #000;
 color: #fff;
}

是哒，这样就完成了我们今天要制作的效果。

接下来附上完整代码：

<!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;
 }
 .header .header-word ul li:hover{
 float: right;
 font-size: 16px;
 font-family: "Microsoft YaHei UI";
 padding-right: 10px;
 padding-left: 10px;
 list-style: none;
 line-height: 100px;
 background: #000;
 color: #fff;
}
</style>
</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>

上一篇：前端页面如何原样快速导出PDF?附示例
下一篇：数据采集实践学习二(C)（数据采集实训）

网站首页 > 技术文章 正文

HTML+CSS的网页竟能有如此效果（简述html css在网页制作中各自的作用）

猜你喜欢

网站首页 > 技术文章正文