HTML+CSS写一个简单的网页界面

学习了HTML和CSS入门的基本命令后，写出来一个简单的登录网页界面，可以跳转、登录。

主界面代码(log.html)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/logc.css"></head><body><!--首先写一个网页最上方的块--><!--块也是从上往下依次放的，每个块设置了宽度或者高度，就会占据一定的位置--><div style="width: 100%;height: 70px;background: url(img/snow_top.png);"><div style="float:right;"><!--最上方图片的右侧加入一个logo--><img src="img/lazy.png"></div><div style="height: 10px;"></div><!--左边图片有点小，位置不在中间，在左侧图片块上面加一个高度10px的块占据位置--><div style="float: left;"><!--最上方图片的左侧加入一个logo图片--><img src="img/egg.png"></div>  </div><!--选择条--><div style="height: 40px;background-color:skyblue;"><ul style="list-style: none;"><!--去除掉原有标签格式--><li style="float: left;text-align: center;padding: 6px;"><a href="sky.html" class="connect">蓝天</a><!--设置一个链接标签--></li><li style="float: left;text-align: center;width: 8px;padding: 11px;"><img src="img/tiao.png" ></li><li style="float: left;text-align: center;padding: 6px;"><a href="cloud.html" class="connect">白云</a><!--设置一个链接标签--></li><li style="float: left;text-align: center;width: 8px;padding: 11px;"><img src="img/tiao.png" ></li><li style="float: left;text-align: center;padding: 6px;"><a href="sunset.html" class="connect">夕阳</a><!--设置一个链接标签--></li><li style="float: left;text-align: center;width: 8px;padding: 11px;"><img src="img/tiao.png" ></li><li style="float: left;text-align: center;padding: 6px;"><a href="sea.html" class="connect">大海</a><!--设置一个链接标签--></li></ul></div><!--主界面图片设置--><div style="width: 100%;margin-top: 10px;"><div style="width: 100%;height: 500px;background: url(img/snow_back.png);"><!--下面雪的背景图案--><div style="float:left;width:300px;height: 300px;background: url(img/blue.png);margin-top: 120px ;margin-left: 950px;"><img src="img/life.png" style="margin-left: 35px;"><ul style="list-style-type: none;"><li><form action="/user.php" method="POST">用户名&nbsp;<input type="text" name="name"/><br/>密&nbsp;&nbsp;&nbsp;码&nbsp;<input type="password" name="pass"/><br/><br/><input type="submit" value="登录" style="margin-left: 100px;"></form></li></ul><img src="img/llazy.png" style="margin-top: -35px;margin-left: 10px;" >   </div></div></div></body>
</html>

跳转界面1(sky.html)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/test2.css"></head><body class="sky"><h1>美好收藏家</h1><p id="p1">蓝天白云 晴空万里</p><p id="p1">随心随意</p><p id="p3">我情愿化成一片落叶，让风吹雨打到处飘零；或流云一朵，在澄蓝天，和大地再没有些牵连。我情愿化成一片落叶，让风吹雨打到处飘零；或流云一朵，在澄蓝天，和大地再没有些牵连。我情愿化成一片落叶，让风吹雨打到处飘零；或流云一朵，在澄蓝天，和大地再没有些牵连。</p><a href="index.html">你的云间小屋</a><ul><li>飞鸟</li><li>晚霞</li><li>蓝天</li><li>星光</li><li>月亮</li></ul></body>
</html>

跳转界面2(cloud.html)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/test2.css"></head><body class="cloud"><h1>美好收藏家</h1><p id="p1">我的喜欢都写在云里</p><p id="p1">从此整个世界都是你</p><p id="p2">你瞧这些白云 聚了又散 散了又聚 人生离合 亦复如斯。你瞧这些白云 聚了又散 散了又聚 人生离合 亦复如斯。你瞧这些白云 聚了又散 散了又聚 人生离合 亦复如斯。你瞧这些白云 聚了又散 散了又聚 人生离合 亦复如斯。你瞧这些白云 聚了又散 散了又聚 人生离合 亦复如斯。你瞧这些白云 聚了又散 散了又聚 人生离合 亦复如斯。</p><a href="index.html">你的云间小屋</a><ul><li>柔软</li><li>轻和</li><li></li><li>白云</li><li>棉花糖</li></ul></body>
</html>

跳转界面3(sunset.html)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/test2.css"></head><body class="sun"><h1>美好收藏家</h1><p id="p1">晚风轻踩着云朵</p><p id="p1">夕阳深处有一家橙色的便利店贩卖着橙色与温柔</p><p id="p2">路漫漫，夕阳西下，映红漫天，橘黄的街道，有我们的欢声笑颜，美好的画面不断浮现在眼前，我喜欢背着你的包，牵着你的手，一起走到永远,路漫漫，夕阳西下，映红漫天，橘黄的街道，有我们的欢声笑颜，美好的画面不断浮现在眼前，我喜欢背着你的包，牵着你的手，一起走到永远,路漫漫，夕阳西下，映红漫天，橘黄的街道，有我们的欢声笑颜，美好的画面不断浮现在眼前，我喜欢背着你的包，牵着你的手，一起走到永远。</p><a href="index.html">你的云间小屋</a><ul><li>夕阳</li><li>晚霞</li><li>蓝天</li><li>白云</li><li>大海</li></ul></body>
</html>

跳转界面4(sea.html)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/test2.css"></head><body class="sea"><h1>美好收藏家</h1><p id="p1">每一座孤岛</p><p id="p1">都被深海紧紧拥抱</p><p id="p2">是谁说蓝色就等于忧伤，你看看天空和海洋。夕阳落山不久，西方的天空还燃烧着一片橘红色的晚霞。大海，也被这霞光染成了红色，但是，它比天空的景色更要壮观。因为它是活动的，每当一排排波浪涌起的时候，那映照在浪峰上的霞光，又红又亮，简直就像一片片霍霍燃烧着的火焰，闪烁着，滚动着，消失了。而后面的一排，则又闪烁着，滚动着涌了过来，在这幽美的夜晚中，我踏着软绵绵的沙滩，沿着海边，慢慢地向前走去。海水，轻轻地抚摸着细软的沙滩，发出温柔的“刷刷”声，晚来的海风，清新而又凉爽。</p><a href="index.html">你的云间小屋</a><ul><li>沙滩</li><li>贝壳</li><li>海风</li><li>波浪</li><li>大海</li></ul></body>
</html>

lod.css代码

.connect:link{text-decoration: none;font-size: 20px;color: royalblue;
}
.connect:hover{color: orange;
}

test2.css代码

#p1{color: white;text-align: center;
}
#p2{visibility: visible;   /*隐藏标签*/text-align: justify;   /*两端对齐*/color: white;
}
#p3{visibility: visible;   /*隐藏标签*/text-align: justify;   /*两端对齐*/color: white;
}
ul{color: white;
}
li{display: inline;
}
h1{color: white;text-align: center;text-decoration: underline;   /*加入下划线*/
}
a:link{color: skyblue;   /*未点击，蓝色*/
}
a:visited{color: orange;   /*点击之后橙色*/
}
a:hover{color: blueviolet;   /*鼠标移动上去紫色*/
}
.he2{color: bisque;text-align: center;font-size: 20px;
}
.sun{background-image: url(../img/countryside.png);/*设置背景图*/background-size: cover;   /*背景图全部铺满*/
}
.sea{background-image: url(../img/sea.jpeg);/*设置背景图*/background-size: cover;   /*背景图全部铺满*/
}
.sky{background-image: url(../img/sky.png);/*设置背景图*/background-size: cover;   /*背景图全部铺满*/
}
.cloud{background-image: url(../img/cloud.jpg);/*设置背景图*/background-size: cover;   /*背景图全部铺满*/
}

登陆后登记结果：

HTML+CSS写一个简单的网页界面相关推荐

基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
写一个简单的Java界面程序
写一个简单的Java界面程序有时候未免想写一些有界面的java小程序练练手,那么如何写一个比较好看的界面话程序呢?下面小编就带你一步一步来搭建这个小洋房. 实现界面化编程要用到的一个主要包impor ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
如何用Html+css3写一个简单的网页
!DOCTYPE html> */我这次利用一门前端开发语言Html开发一个简单的网页/* <html> <hea ...
纯HTML、CSS写一个简单的水滴特效，水滴里面可加图标
CSS写水滴特效,里面可加图标代码如下(示例): HTML部分 <!DOCTYPE html> <html lang="en"> <head> ...
如何用python创建一个下载网站-用Python写一个简单的网页下载
作为一个Python+爬虫的小白,今天要搞点爬虫的活儿,以前没做过,从零开始. win10的系统,python我的电脑上以前不记得什么时候安装过,安装的是3.6的版本,能用.代码工具,先使用VS co ...
JSP写一个简单的登录界面
系列文章目录 JSP实现不链接数据库的简单登录功能实现文章目录系列文章目录前言一.jsp是什么? 二.使用到的页面代码 1.login.jsp 2.index.jsp 3.LoginServl ...
使用HTML+CSS制作一个简单的网页
简单学习了一下HTML和CSS,制作了下面这个网页(第一次做还在学习中),里面包含一些基础的布局包括导航条.分页栏.悬浮列表等内容. 网页预览(网页中的图片与图标均来自阿里巴巴矢量图标库) CSS代码 ...

HTML+CSS写一个简单的网页界面

HTML+CSS写一个简单的网页界面相关推荐

最新文章

热门文章