Html+css 一个简单的网页模板

一个简单的网页模板,有导航、子菜单、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>

一个网页模板

原文地址:https://www.cnblogs.com/hellangels333/p/8303889.html

时间: 2024-10-09 23:08:02

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

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

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

一个简单的makefile模板

在Linux下编译工程,makefile是必不可少的工具,下面记录一个简单的makefile模板. 多个文件目录下的makefile写法推荐参考博文:http://www.cnblogs.com/Anker/p/3242207.html DIR_SRC = ./ DIR_BIN = ../bin PROGRAMNAME = program TARGET = ${DIR_BIN}/${PROGRAMNAME} SRC = $(wildcard ${DIR_SRC}/*.cpp) CC = g++

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

学习了下python,看了一个简单的网页爬虫:http://www.cnblogs.com/fnng/p/3576154.html 自己实现了一个简单的网页爬虫,获取豆瓣的最新电影信息. 爬虫主要是获取页面,然后对页面进行解析,解析出自己所需要的信息进行进一步分析和挖掘. 首先需要学习python的正则表达式:http://www.cnblogs.com/fnng/archive/2013/05/20/3089816.html 解析的url:http://movie.douban.com/ 查看

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

JMeter的安装:在网上下载,在下载后的zip解压后,在bin目录下找到JMeter.bat文件,双击就可以运行JMeter. http://jmeter.apache.org/ 在使用jmeter前要先下载jdk包,配置java环境.(参见Java环境配置教程) 配置完成后在运行窗口检查一下java -version确定java环境配置完成. 一.利用badboy进行自动脚本录制 下载BadboyInstaller-2.2.5.exe 并安装 下载地址:http://download.csd

javascript源码之js实现的一个简单的网页拾色器

今天学习了window对象,跟着学习了一个简单的网页拾色器的demo,拿出来和大家分享. 主页面代码: <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>拾色器</title></head><body><h1>网页拾色器</h1>    <scr

编写一个简单的js模板替换工具 rtt----replace templete tool

最近一段时间在修改自己的个人在线简历.  这个在线简历用到了css3来制作3D的旋转效果, 因此会有兼容性问题, 针对于不支持css3的3D透视的浏览器, 比如 IE,  360等等, 我使用的是另一套css文件兼容.  针对于移动端浏览器, 尽管基本都是webkit内核, 但经测试发现3D效果并不流畅, 因此移动端是识别userAgent切换到另一套非3D页面.  因为没用任何数据库, 那么问题就来了, 移动端和pc端两套页面是共用的一套数据, 我想到的方法有两个: 一是页面加载之后用ajax

[bootstrap] 打造一个简单的系统模板(1) 左侧折叠菜单

1. 前言 最近需要做一个后台管理系统,我打算使用bootstrap弄一个好看的后台模板.网上的好多模板我觉的css和js有点重. 于是就打算完全依靠bootstrap搭建一个属于自己的模板. 首先从左侧的折叠菜单开始.看图. 2. CSS 代码 以下是自定义的css代码,由于系统是内部使用,所以优先考虑chrome,firefox 不考虑IE了. #main-nav { margin-left: 1px; } #main-nav.nav-tabs.nav-stacked > li > a {

一个简单的PHP模板引擎

PHP早期开发中通常是PHP代码和HTML代码混写,这也使代码中充斥着数据库操作,逻辑处理等.当项目不大时,这样的代码还可以接受,但是随着项目不断扩大,我们就会发现同一个文件中同时存在前端逻辑和后端处理,当逻辑越来越复杂时,代码的可读性和可维护性都会变得非常差,以至于后来不得不进行大规模的代码重构.所以后来就出现了代码分层的思想,尽量拆分开前端代码和后端代码. PHP模板引擎能解决这种混乱吗?当然可以.但是呢,即使你不用专门的模板引擎也可以写出逻辑清晰的代码,重点是要有分层的思想,有专门的脚本去

一个简单的网页浏览器

自己写的,实现简单的网页浏览,就是不能实现观看视频全屏还不能下载,有History. 标签: Android Applications Manager [1].[文件] History.java ~ 5KB    下载(42) 跳至 [1] [2] [3] [4] [5] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40