html/css:简单网页
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:简单网页的更多相关文章
- 纯css 简单网页
<div id="wrapper"> <header> <section> <h1>Web Design<h1> < ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- css+div网页设计（一）--基础知识
css是网页制作不可缺少的部分,我会用三篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一 ...
- PHP.3-DIV+CSS标准网页布局准备工作（上）
DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- CSS简单使用
CSS简单使用 标签 : 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...
- 精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
随机推荐
- Marriage Ceremonies LightOJ - 1011
Marriage Ceremonies LightOJ - 1011 常规状压dp.popcount(S)表示S集合中元素数量.ans[S]表示S中的女性与前popcount(S)个男性结婚的最大收益 ...
- LIS(变形) HDOJ 5489 Removed Interval
题目传送门 题意:求删掉连续L长度后的LIS 分析:记rdp[i]表示以a[i]为开始的LIS长度,用nlogn的办法,二分查找-a[i].dp[i]表示以a[i]为结尾并且删去[i-L-1, i-1 ...
- selenium处理的操作
- SpringCloud开发学习总结（七）—— 声明式服务调用Feign（三）
Feign中的Ribbon配置 由于Spring Cloud Feign的客户端负载均衡是通过Spring Cloud Ribbon实现的,所以我们可以直接通过配置Ribbon客户端的方式来自定义各个 ...
- 当css样式表遇到层
(附:White-space:pre可以是样式表里卖弄body的属性,作用是保持html源代码的空格与换行,等同<pre>标签.) Css样式表可以通过被封在层里的方式来限制页面所修饰的内 ...
- 129 Sum Root to Leaf Numbers 求根叶数字总和
给定一个只包含 0-9 数字的二叉树,每个根到叶的路径可以代表一个数字.例如,从根到叶路径 1->2->3则代表数字 123.查找所有根到叶数字的总和.例如, 1 / \ 2 ...
- jQuery中面向对象思想实现盒子内容切换
这里主要是模拟小米官网中的首页的内容模块实现的主要动态效果 布局:采用了bootstrap框架进行布局,及其其中的字体图标 html: <!-- 内容 --> <div class= ...
- Clean Code 第十章 : 类
最近的CleanCode读到了第十章.这一张主要讲了如何去构造一个类,感觉的CleanCode至此已经不仅仅是单纯的讲如何'写'出漂亮的代码,而是从设计方向上去构造出好的代码了. 本章节主要讲了: * ...
- Javaweb学习笔记6—EL表达式与JSTL及自定义标签
今天来讲javaweb的第六阶段学习. EL表达式与JSTL及自定义标签是对上篇文章介绍的JSP的扩展,不能说是很重要的东西,但是也要了解. 老规矩,首先先用一张思维导图来展现今天的博客内容. ps: ...
- vue+element ui项目总结点（一）select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...