一个简单的网页模板，有导航、子菜单、banner部分

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

 2         "http://www.w3.org/TR/html4/loose.dtd">

 3 <html>

 4 <head>

 5     <title>网页</title>

 6     <meta charset="UTF-8">

 7     <style>

 8         .header,.footer,.con2{width: 100%;}

 9         .header{background-color: #00a2e8}

10         .nav{margin: 50px 100px 0 100px;background-color: #ffb9ab;height: 23px;}

11             /*float: left;*/

12         .nav1:hover>ul{display: block;}

13         .nav1>ul>li{list-style:none}

14         .nav>div{display: inline-block;width: 20%}

15             /*相对父级元素定位*/

16         .nav>div>ul{display: none;float: left;}

17             /*给ul加浮动*/

18         .nav>div>div:hover ul{top:0;}

19             /*display:block;*/

20         .banner{width: 80%;min-height:100px;border: #660077 solid 1px;}

21             /*高度靠内容撑大，这里设置一个最低高度*/

22         .banner>div{height: 80%;width: 100%;background-color: gold;}

23         /*banner里面的元素*/

24         .banner>div:nth-child(1){}

25         .neirong2{width:80%;height: 500px;background-color: #00a2e8;}

26         .neirong3{width:80%;height: 500px;background-color: darkolivegreen;}

27         .foot{width:80%;height: 500px;background-color: yellow;}

28         #guding{width: 100px;height: 100px;background-color: #660077;position: fixed;top:200px;left:200px;)}

29     </style>

30 </head>

31 <body style="align-content: center">

32 <center>

33     <!--页头headstart-->

34     <div class="header">页头

35         <div class="nav">

36             <div class="nav1">导航1

37                 <ul>

38                     <li>1.1</li>

39                     <li>1.2</li>

40                     <li>1.3</li>

41                     <li>1.4</li>

42                 </ul>

43             </div>

44             <div>导航2</div>

45             <div>导航3</div>

46             <div>导航4</div>

47         </div>

48

49     </div>

50     <!--headend-->

51

52     <!--station1 start-->

53     <div class="banner">内容1，banner

54

55         <div>

56         1111111111111111111

57         </div>

58         <img src="" alt="banner图片3张">

59     </div>

60     <!--station1 end-->

61     <!--station1 start-->

62     <div class="neirong2">内容2

63     <div>

64

65     </div>

66     </div>

67     <!--station1 end-->

68     <!--station1 start-->

69     <div class="neirong3">内容3

70     </div>

71     <!--station1 end-->

72     <div id="guding">

73         这是固定在电脑屏幕一个位置的部件

74     </div>

75

76     <!--station1 start-->

77     <div class="foot">页脚

78     <div>

79     </div>

80     </div>

81     <!--station1 end-->

82 </center>

83 </body>

84 </html>

一个网页模板

Html+css 一个简单的网页模板的更多相关文章

  1. OpenCms JSP 模板开发——创建一个简单的JSP模板

    OpenCms中的JSP模板就是一个普通的JSP页面,在特定的位置使用标签来包含内容,在这个的例子中,我们将要开发一个简单JSP模板,这个模板只是在内容(如<html>.<body& ...

  2. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  3. jmeter压力测试的简单实例+badboy脚本录制（一个简单的网页用户登录测试的结果）

    JMeter的安装:在网上下载,在下载后的zip解压后,在bin目录下找到JMeter.bat文件,双击就可以运行JMeter. http://jmeter.apache.org/ 在使用jmeter ...

  4. 一个简单地template模板

    之前的项目中用到了artTemplate模板,感觉挺有意思,于是查看相关资料,自己动手写了个简单地template模板插件.虽然会有一些不足,但也是自己的一番心血.主体代码如下 /* * 一个简单地t ...

  5. python实现的一个简单的网页爬虫

    学习了下python,看了一个简单的网页爬虫:http://www.cnblogs.com/fnng/p/3576154.html 自己实现了一个简单的网页爬虫,获取豆瓣的最新电影信息. 爬虫主要是获 ...

  6. 一个简单的PHP模板引擎

    PHP早期开发中通常是PHP代码和HTML代码混写,这也使代码中充斥着数据库操作,逻辑处理等.当项目不大时,这样的代码还可以接受,但是随着项目不断扩大,我们就会发现同一个文件中同时存在前端逻辑和后端处 ...

  7. 一个简单的网页布局HTML+CSS

    <!doctype html> <html> <head> <meta charset="utf-8"/> <title> ...

  8. python Django 学习笔记（二）—— 一个简单的网页

    1,创建一个django项目 使用django-admin.py startproject MyDjangoSite 参考这里 2,建立视图 from django.http import HttpR ...

  9. python3一个简单的网页抓取

    都是学PYTHON.怎么学都是学,按照基础学也好,按照例子增加印象也好,反正都是学 import urllib import urllib.request data={} data['word']=' ...

随机推荐

  1. docker启动服务---------------kafka+zookeeper

    docker run -d --name zookeeper -p 2181:2181 wurstmeister/zookeeperdocker run -d --name kafka -p 9092 ...

  2. canal 整合RabbitMQ

    环境如下: canal: 1.15-alpha-1 mysql  5.6.49 rabbitmq 3.7.14 Erlang 21.3 canal 安装和启动 见上篇文章 canal快速安装启动 但是 ...

  3. swoole创建进程

    <?php /** * Created by PhpStorm. * User: mac * Date: 2020/4/23 * Time: 21:57 */ use Swoole\Proces ...

  4. STM32芯片型号的命名规则

    意法半导体已经推出STM32基本型系列.增强型系列.USB基本型系列.增强型系列:新系列产品沿用增强型系列的72MHz处理频率.内存包括64KB到256KB闪存和20KB到64KB嵌入式SRAM.新系 ...

  5. Solr6.4.2异常：org.apache.solr.common.SolrException: Error opening new searcher

    版权声明:本文为博主原创文章,转载请附上原文出处链接和本声明. 原文链接:https://www.cnblogs.com/chenghu/p/13840021.html Solr版本6.4.2 启动S ...

  6. JAVA 线上故障排查套路，从 CPU、磁盘、内存、网络到GC 一条龙！

    线上故障主要会包括cpu.磁盘.内存以及网络问题,而大多数故障可能会包含不止一个层面的问题,所以进行排查时候尽量四个方面依次排查一遍. 同时例如jstack.jmap等工具也是不囿于一个方面的问题的, ...

  7. Compareto方法

    很多时候我们写Compareto方法是用于排序,那么排序就涉及到数据位置交换. 所以要注意compareto返回值的含义,通过一个例子来看一下: 假设对象的num属性作为比较标准,对象为testVO ...

  8. app反编译遇到360加固,傻瓜式脱壳

    转载https://blog.kieng.cn/2051.html 第一步 电脑安装安卓模拟器,我使用的是雷电模拟器(推荐). 第二步 打开模拟器,准备安装软件: 1.需要脱壳的软件 2.XP 框架. ...

  9. LSM 树详解

    LSM树(Log Structured Merged Tree)的名字往往给人一个错误的印象, 实际上LSM树并没有严格的树状结构. LSM 树的思想是使用顺序写代替随机写来提高写性能,与此同时会略微 ...

  10. Qlik Sense学习笔记之Mashup开发（一）

    date: 2018-12-21 12:33:29 updated: 2018-12-21 12:33:29 Qlik Sense学习笔记之Mashup开发(一) 1.基于Qlik Sense API ...