用HTML制作一个好看的网页模板

大家好，我是星空工作室官方！

今天我给大家推荐好看的HTML模板

代码如下

<html>
<head>
<meta name="code-stutio" content="code-123" />
</head>
<meta charset="utf-8">
<title>My...</title>
<style>
.a {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
.b {
overflow: hidden;
color:#f2f2f2;
background-color: rgb(72,72,72);
}

.b a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.b a:hover {
background-color: #ddd;
color: black;
}

.f {
overflow: hidden;
color:#f2f2f2;
background-color: gray;
height:740px;
text-align:center;
width:188px;
float:right;
}

.f a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px 70px;
text-decoration: none;
}

.f a:hover {
background-color: #ddd;
color: black;
}

.c {
line-height:30px;
background-color:gray;
color:white;
height:700px;
width:104px;
float:left;
padding:20px;
}
.d {
width:350px;
float:left;
padding:10px;
}
.e {
background-color:rgb(40,40,40);
color:rgb(200,200,200);
clear:both;
text-align:center;
padding:1px;
}
.e a {
color: rgb(200,200,200);
padding: 0px 0px;
text-decoration: none;
}
.e a:hover {
color: rgb(250,250,250);
}

</style></head>

<body>

<div class="a">
<div id="box" style="opacity: 0.01;"> <h1>Vcode的个人主页</h1></div>
<script>
var i = 1;
   var flag = true;
   function fade() {
   var box = document.getElementById('box');
   if (document.all) {
   box.style.filter = "alpha(opacity='+i+')";
   } else {
   box.style.opacity = parseFloat(i / 100);
   }
   if (i < 100 && flag) {
   i += 5;
   }
   else {
   flag = false;
    }
   if (i > 0 && !flag) {
   i -= 5;
   }
   else {
   flag = true;
   }
   setTimeout('fade()', 50);
   }
   fade();
   </script>
</div>

</div>

<div class="c">
<h2>你好，我是Vcode！</h2>
<p>喜欢编程、足球</p>
<p>是一个特别喜欢编程的xxs</p>

</div>

<div class="d">
<h2>Vcode：一名朝气蓬勃的xxs</h2>

<p>LIFE 不止 • CODE 不息</p>
<p>编程改变世界，编程改变未来</p>
<p>会Python、HTML、图形化编程。</p>
<p>I like coding!</p>
<p>来C站，遇见自己，发现伙伴。编程你好，未来我来。Hello Code Hello World</p>

</div>

</p>

</body>
</html>

用HTML制作一个好看的网页模板相关推荐

vue制作一个好看的网页
1.安装并配置node.js (见本人博客-node.js) 2.建好的项目目录如下 build: 用来存放项目构建脚本 config: 存放项目的一些基本配置信息,最常用的就是端口转发 node_ ...
使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节查看作业目录需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具实现思路: 使用history对象中的 forward() 方法和 ...
HTML5+CSS大作业——简单的程序员个人博客(7页) 大学个人博客网页制作教程表格布局网页模板
HTML5+CSS大作业--简单的程序员个人博客(7页) 大学个人博客网页制作教程表格布局网页模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家 ...
HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计常见网页设计作业 ...
Html+css 一个简单的网页模板
一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...
教你快速制作一个简单的网页
像下面这样一个简单的网页怎么制作呢? 通过这篇文章,可以让你基本掌握一个HTML的结构和常用标签的使用需要用到的常用标签 <b> 加粗</b> ~~~~~~~~~~~~~~~ ...
程序员过中秋丨用代码制作一个祝福小网页(html+css)
大家好,我是陈橘又青,兰经香风满,松窗夜月圆!都说我们程序员过节最没仪式感,再过两周就是中秋节了,今天我们就来制作一个简单的中秋祝福小网页,祝愿看到的所有人好运安康!(附上完整源码,需要的小伙伴自取即 ...
如何制作一个可视化大屏模板
今天我们来一篇demo实例来讲述如何用finereport制作一个合格的大屏demo. 按照文章中所言的几种常见排布方式: 以上是几种常见的大屏排布方式,依据各个大屏模板所需要展示的具体信息我们可以自 ...
使用HTML+CSS制作一个简单的网页
简单学习了一下HTML和CSS,制作了下面这个网页(第一次做还在学习中),里面包含一些基础的布局包括导航条.分页栏.悬浮列表等内容. 网页预览(网页中的图片与图标均来自阿里巴巴矢量图标库) CSS代码 ...

用HTML制作一个好看的网页模板

用HTML制作一个好看的网页模板相关推荐

最新文章

热门文章