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>
一个网页模板
Html+css 一个简单的网页模板的更多相关文章
- OpenCms JSP 模板开发——创建一个简单的JSP模板
OpenCms中的JSP模板就是一个普通的JSP页面,在特定的位置使用标签来包含内容,在这个的例子中,我们将要开发一个简单JSP模板,这个模板只是在内容(如<html>.<body& ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- jmeter压力测试的简单实例+badboy脚本录制（一个简单的网页用户登录测试的结果）
JMeter的安装:在网上下载,在下载后的zip解压后,在bin目录下找到JMeter.bat文件,双击就可以运行JMeter. http://jmeter.apache.org/ 在使用jmeter ...
- 一个简单地template模板
之前的项目中用到了artTemplate模板,感觉挺有意思,于是查看相关资料,自己动手写了个简单地template模板插件.虽然会有一些不足,但也是自己的一番心血.主体代码如下 /* * 一个简单地t ...
- python实现的一个简单的网页爬虫
学习了下python,看了一个简单的网页爬虫:http://www.cnblogs.com/fnng/p/3576154.html 自己实现了一个简单的网页爬虫,获取豆瓣的最新电影信息. 爬虫主要是获 ...
- 一个简单的PHP模板引擎
PHP早期开发中通常是PHP代码和HTML代码混写,这也使代码中充斥着数据库操作,逻辑处理等.当项目不大时,这样的代码还可以接受,但是随着项目不断扩大,我们就会发现同一个文件中同时存在前端逻辑和后端处 ...
- 一个简单的网页布局HTML+CSS
<!doctype html> <html> <head> <meta charset="utf-8"/> <title> ...
- python Django 学习笔记（二）—— 一个简单的网页
1,创建一个django项目 使用django-admin.py startproject MyDjangoSite 参考这里 2,建立视图 from django.http import HttpR ...
- python3一个简单的网页抓取
都是学PYTHON.怎么学都是学,按照基础学也好,按照例子增加印象也好,反正都是学 import urllib import urllib.request data={} data['word']=' ...
随机推荐
- PS文字
点文本 直接单击鼠标可输点文字 输完后在离文字较远的地方出现白色箭头单击可结束输入,也可选择其他图层结束输入 再次修改文字可双击文字缩览图 出现黑色小箭头可以在输入到的情况下拖动文字,文字工具下按Ct ...
- DateDiff() 方法语法 T-SQL语法
表达式DateDiff(timeinterval,date1,date2 [, firstdayofweek [, firstweekofyear]]) 允许数据类型: timeinterval 表示 ...
- 【应用服务 App Service】App Service 中部署Java应用中文乱码现象
问题情形 有时候部署在 Azure App Service的 Java应用会出现乱码 详细日志 无 问题原因 因为 App Service默认的编码为gbk,所以在显示页面或传递中文字符时就会出现乱 ...
- matplotlib作图 归零编码、曼切斯特编码、非归零编码、差分曼切斯特编码
效果图 代码 import matplotlib.pyplot as plt config = { 'color': 'black', 'lw': 5, } def init(): plt.figur ...
- SaaS系统怎么做物流行业年度经营报告，MVC+js+echarts实现
前言 马上就到年底了,很多公司都要汇总这一年的经营情况,如果一个系统没有自动生成年报的功能, 需要人工手工去做年报,我相信可能是一个不小的工作量,最近我通过一个星期的时间,结合系统情况自动生成年报,全 ...
- 如何发布代码到maven中心仓库
deploy to sonatype 参考文章 https://blog.csdn.net/xuefu_78/article/details/52494698 https://blog.csdn.ne ...
- GoSDK的安装及环境变量配置 入门详解 - 精简归纳
GoSDK的安装及环境变量配置 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 10 / 29 转载请注明出处!️ 目录 GoSDK的安装及环境变量配置 入门详解 - 精简归纳 一.进入G ...
- Qt5打包后缺少dll,启动失败问题
Qt5使用Qt自带的windeployqt打包程序教程很多,其过程也很简单,但是大部分人在打包过程中会出现提示缺少dll,或者错误0xXXXX等问题,网上各种说法,我测试过基本都不怎么正确,这里写一下 ...
- centos8 curl: (35) error:141A318A:SSL routines:tls_process_ske_dhe:dh key too small
centos8操作系统,curl -k https:/www.xxx.com 报错 curl: (35) error:141A318A:SSL routines:tls_process_ske_dh ...
- 用GitHub Pages搭建博客（三）
本篇介绍通过git工具替换网站主题,并发布 Jekyll和Hexo的简要介绍 GitHub Pages是基于Jekyll构建的,Jekyll 是一个简单的博客形态的静态站点生产工具,它有一个模版目 ...