html：

<!DOCTYPE html>

<html>

	<head>

		<meta http-equiv=“content-type” content=“text/html;charset=utf-8”/>

		<title>第一个页面</title>

		<link rel='stylesheet' type='text/css' href='c.css' />

	</head>

	<body>

		<div class='pg-header'>

			<div class='logo'>ZhangShun</div>

		</div>

		<div class='pg-body'>

			<div class='menu'>

				<ul>

					<li>菜单1</li>

					<li>菜单2</li>

					<li>菜单3</li>

					<li>菜单4</li>

					<li>菜单5</li>

					<li>菜单6</li>

					<li>

						<a href='#test'>查找test</a>

					</li>

					<li>菜单8</li>

					<li>菜单9</li>

					<li>菜单10</li>

					<li>菜单11</li>

					<li>菜单12</li>

					<li>菜单13</li>

					<li>菜单14</li>

					<li>菜单15</li>

					<li>菜单16</li>

					<li>菜单17</li>

					<li>菜单18</li>

					<li>菜单19</li>

					<li>菜单20</li>

					<li>菜单21</li>

					<li>菜单22</li>

					<li>菜单23</li>

					<li>菜单24</li>

					<li>菜单25</li>

					<li>菜单26</li>

					<li>菜单27</li>

					<li>菜单28</li>

					<li>菜单29</li>

					<li>菜单30</li>

					<li>菜单31</li>

					<li>菜单32</li>

					<li>菜单33</li>

					<li>菜单34</li>

					<li>菜单35</li>

				</ul>

			</div>

			<div class='content'>

				<div style='height:1000px;background-color:#BEC14B;'>

					<div style='height:700px'></div>

					<div id='test'>

					<h1>test</h1>

					</div>

				</div>

			</div>

		</div>

	</body>

</html>

css：

body{

	margin:0px auto;

}

.pg-header{

	background-color:#999;

	height:50px;

	position:fixed;　

	top:0px;

	width:100%;

}

.pg-header .logo{

	font-size:30px;　　#字体大小

	line-height:50px;　　

	margin-left:30px;

	font-family:fantasy;　　#字体形式

	color:white;

}

.pg-body{

	background-color:#4296DC;

	min-height:500px;

}

.pg-body .menu{

	width:250px;

	background-color:#D3F9D8;

	position:fixed;　　#固定

	top:50px;　　#上边距、下边距、下拉框

	bottom:5px;

	overflow:auto;

}

.pg-body .menu ul{

	margin:0px auto;　　#上边距 0px 对齐

}

.pg-body .menu ul li{

	padding:3px;

}

.pg-body .content {

	margin-left:260px;　　#左边距 260px

	margin-top:50px;　　#上边距 50px

}

展示：

html/css:简单网页的更多相关文章

  1. 纯css 简单网页

    <div id="wrapper"> <header> <section> <h1>Web Design<h1> < ...

  2. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  3. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  4. css+div网页设计（一）--基础知识

    css是网页制作不可缺少的部分,我会用三篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一 ...

  5. PHP.3-DIV+CSS标准网页布局准备工作（上）

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  6. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  7. CSS简单使用

    CSS简单使用 标签 : 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...

  8. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  9. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

随机推荐

  1. LuoguP2055 [ZJOI2009]假期的宿舍【二分图最大匹配】By cellur925

    题目传送门 这道题开始感觉不出是二分图最大匹配的qwq.但是今天学了匈牙利算法,想来做几个题qwq.做这个题的时候想了很久它哪里是二分图,脑子里是“两列,每列有很多点的那种图 qwq.” 然后看了题解 ...

  2. Hdu 5459 Jesus Is Here (2015 ACM/ICPC Asia Regional Shenyang Online) 递推

    题目链接: Hdu 5459 Jesus Is Here 题目描述: s1 = 'c', s2 = 'ff', s3 = s1 + s2; 问sn里面所有的字符c的距离是多少? 解题思路: 直觉告诉我 ...

  3. 转 PHP scandir() 函数

    实例 列出 images 目录中的文件和目录: <?php $dir = "/images/"; // 以升序排序 - 默认 $a = scandir($dir); // 以 ...

  4. getAttribute()方法的第二个参数

    对于一个img元素,我们想获取它的src属性时可以有两种方式: 1.xxx.getAttribute("src") 2.直接通过xxx.src获取属性值 在src的属性值为相对路径 ...

  5. Linux--NiaoGe-Service-01

    安装环境介绍 CentOS 6.9_x86_64 我们选择的是基本安装,也即“Basic Server”. 安装完成后重启来到(runlevel 3)纯文本界面. 例题 批量创建账号:假设有5个账号x ...

  6. java.util.Properties类的介绍-配置文件的读写【-Z-】

    简介:java.util.Properties是对properties这类配置文件的映射.支持key-value类型和xml类型两种. #打头的是注释行,Properties会忽略注释.允许只有key ...

  7. hadoop的安装和配置

    hadoop安装 在Apache Hadoop主页的下载页面https://hadoop.apache.org/releases.html选择版本进行下载: 下载下来的是压缩包: 将压缩包使用Xftp ...

  8. angular（一）路由的配置（1）

    本篇文章是最近在公司里做项目的时候,尝试配置路由的过程.由于头尾,和路由主体,包括控制器组长都已配置好,我这里只是单纯的写一些配置单个副页面的过程.大家肯定会有看不懂的地方,后续会陆续更新完整的配置全 ...

  9. hihocoder1744 hohahola

    思路: 二分. 实现: #include <bits/stdc++.h> using namespace std; typedef long long ll; const ll INF = ...

  10. 设计 REST API 的13个最佳实践

    写在前面 之所以翻译这篇文章,是因为自从成为一名前端码农之后,调接口这件事情就成为了家常便饭,并且,还伴随着无数的争论与无奈.编写友好的 restful api 不论对于你的同事,还是将来作为第三方服 ...