PHP初入，简易网页整理（布局&特效的使用）
html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*全局设置*/
*{
margin: 0px;
padding: 0px;
}
.all{
width: 100%;
height: 100%;
border: 0px solid black;
position: absolute;
}
.top{
width: 950px;
height: 30px;
border: 0px solid black;
margin: auto;
background-color: cadetblue;
text-align: center;
line-height: 30px;
/*相对与寞默认位置的移动*/
position: relative;
/*top: 0px;
right: 150px;*/
top: 0px;
left:2px;
}
.logo{
width: 950px;
height: 200px;
border: 0px solid black;
overflow: hidden;
margin-right: 200px;
/*position: relative;
top: 0px;*/
line-height: 200px;
text-align: center;
margin: auto;
}
.nav-top{
width: 950px;
height: 30px;
border: 0px solid black;
margin: auto;
line-height: 30px;
text-align: center;
background-color: orange;
}
.gps{
width: 950px;
height: 30px;
border: 0px solid black;
margin: auto;
/*使字体居中*/
line-height: 30px;
text-align: left;
}
.right-code{
/*锁定位置*/
position: fixed;
left: 0px;
top: 160px;
}
.left-code{
/*锁定位置*/
position: fixed;
right: 0px;
top: 160px;
}
.left-new{
position: fixed;
right: 0px;
top: 300px;
}
.right-new{
position: fixed;
left: 0px;
top: 300px;
}
a{
text-decoration: none; /*超链接去字体下划线*/
color: #000000;
}
/*正文start*/
.tt{
width: 950px;
height: 670px;
border: 0px solid black;
align-content: center;
margin: auto;
position: relative;
line-height: 28px;
}
.left-top{
width: 223px;
height: 215px;
border: 0px solid black;
/*相对与寞默认位置的移动*/
position:relative;
top: 0px;
left:0px;
/*background-color: red;*/
}
.right-top{
width: 223px;
height: 210px;
border: 0px solid black;
position: absolute;
right: 0px;
top: 32px;
/*background-color: blueviolet;*/
overflow: hidden;
}
.missdle-top{
width: 495px;
height: 340px;
margin: auto;
border: 0px solid black;
position: relative;
top: -425px;
/*background-color: powderblue;*/
}
.left-missdle{
width: 223px;
height: 210px;
border: 0px solid black;
position: relative;
top: 0px;
left: 0px;
line-height: 30px;
/* background-color: orangered;*/
}
.right-missdle{
width: 220px;
height: 310px;
border: 0px solid black;
position: absolute;
top: 245px;
right: 0px;
/*background-color: deepskyblue;*/
}
.right-bottom{
width: 223px;
height: 70px;
border: 0px solid black;
position: absolute;
top: 570px;
right: 0px;
/*background-color: palevioletred;*/
}
.left-bottom{
width: 223px;
height: 200px;
border: 0px solid black;
position: absolute;
top: 467px;
left: 0px;
/*background-color: red;*/
}
.missdle-bottom{
width: 495px;
height: 293px;
border: 0px solid black;
position: absolute;
top: 375px;
left: 227px;
}
.job{
position: absolute;
top: 0px;
left: 0px;
}
.jpg{
position: absolute;
top: 0px;
}
/*第二模块*/
.two-all{
position: relative;
width: 950px;
height: 670px;
border: 0px solid black;
align-content: center;
margin: auto;
position: relative;
line-height: 28px;
}
.zibo-logo{
position: relative;
top: 10px;
left: 0px;
}
</style>
</head>
<body bgcolor="white">
<!--全局-->
<!--<div class="all">-->
<!--最上方广告栏-->
<div class="top">
欢迎来到淄博市政府中心网站。
<input type="text" />
<input type="submit" width="100px" height="10px" />
</div>
<!--logo栏-->
<div class="logo">
<img src="logo.jpg" />
</div>
<!--nav-top导航栏-->
<div class="nav-top">
<<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 丨首页</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 丨工作状态</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 丨服务指南</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 丨专题专栏</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 丨在线答询</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 丨法律法规</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 丨考试信息</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 丨党建园地</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 丨政策信息</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 丨政府公开</a>
</div>
<!--固定位置专用，-->
<div class="tt">
<!--位置导航栏-->
<div class="gps">您现在的位置： 淄博市人力资源和社会保障网 >> 首页</div>
<!--正文左上-->
<div class="left-top">
<div class="left-top-img"></div>
<img src="专题专栏.jpg" />
<ul style="list-style: none;">
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 毕业生档案查询</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公务员招考</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 事业单位招聘</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 参保缴费查询</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 社保卡查询</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 成绩查询</a></li>
</ul>
</div>
<!--正文右上-->
<div class="right-top">
<img src="通知公告.jpg" />
<ul style="list-style: none;">
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市公安</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市消防</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市防震</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市交通</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市城管</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市安全</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市政务</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市汽车</a>
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市油品</a>
</div>
<!--正文左中-->
<div class="left-missdle">
<img src="机构设置.jpg" />
<ul type="circle">
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 领导班子</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 机构职责</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 直属单位</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 区县机构</a></li>
</ul>
</div>
<!--正文右中-->
<div class="right-missdle">
<img src="党建园地.jpg" />
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 市人社局党委组织集体学习</a><br />
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 弘扬优良家风，加强廉政建设</a><br />
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 市人社局党委书记上专题党课</a><br />
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 市人社局组织党员到原山革命根据地进行参观学习</a><br />
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 市人社局召开"两学一做"专项学习大会</a><br />
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 市人社局党委理论学习中心组织召开学习大会</a><br />
<a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 市人社局两学一做正在进行中</a><br />
</div>
<!--正文左下-->
<div class="left-bottom">
<img src="4大框.jpg" />
</div>
<!--正文右下-->
<div class="right-bottom">
<div class="jpg">
<img src="公告.jpg"/></div>
</div>
<!--正文中上-->
<div class="missdle-top">
<img src="missdle-top.jpg" />
</div>
<!--正文中下-->
<div class="missdle-bottom">
<div class="job">
<img src="工作动态.jpg" /></div><br />
<ul style="list-style: none;">
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017年8月17日我市公安局全体干警出动,只为一举缉拿日本省</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市消防部队全部出动，对四川地震区域进行抗震救灾活动</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市防震部署委发布消息称：山东处于内陆地区版块，</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市交通局发布第107号令，其中详细要求我市机动车不得..</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市城管大队出动，一举歼灭日本省武装反抗力量，对全世界</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市安全</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市政务</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市汽车</a></li>
<li><a href="http://www.weibo.com/?c=spr_sinamkt_buy_hyww_weibo_t112" target="_blank" /> 公告：2017淄博市油品</a></li>
</div>
</div>
<div class="two-all">
<div class="zibo-logo">
<img src="淄博logo.jpg" /></div>
</div>
<!--左侧广告栏-->
<div class="left-new">
<img src="国务院.jpg" />
</div>
<!--右侧广告栏-->
<div class="right-new">
<img src="国务院.jpg" />
</div>
<!--左侧二维码-->
<div class="left-code">
<img src="二维码.jpg" />
</div>
<!--右侧二维码-->
<div class="right-code">
<img src="二维码.jpg" />
</div>
<!-- </div>-->
</body>
</html>
PHP初入，简易网页整理（布局&特效的使用）的更多相关文章
- 初学HTML5、初入前端
学习HTML5是一个漫长的过程,当中会遇到很多技术与心态上的变化.刚开始学习,我们不能发力过猛,需要一个相对稳定的状态去面对.多关注一些自己感兴趣的网站和技术知识,建立自己的信心与好奇心,为以后的学习 ...
- 初入职场的建议--摘自GameRes
又开始一年一度的校招了,最近跑了几个学校演讲,发现很多话用短短的一堂职业规划课讲还远远不够,因为那堂课仅仅可能帮大家多思考怎样找到一份合适的工作,并没有提醒大家怎样在工作中发展自己的职业. 见过这么多 ...
- 【Xbox one S】开箱&开机&初入坑心得
再来一发水贴,先上产品标准照镇贴: 前言 身为一个资深单机游戏玩家,常年混迹在PC平台,但内心深处一直对主机有种迷之向往,感觉那才是单机游戏的正处之地,坐沙发上拿着手柄对着电视跌宕起伏才是正确的游戏姿 ...
- 初入pygame——贪吃蛇
一.问题利用pygame进行游戏的编写,做一些简单的游戏比如贪吃蛇,连连看等,后期做完会把代码托管. 二.解决 1.环境配置 python提供一个pygame的库来进行游戏的编写.首先是安装pygam ...
- 初入码田--ASP.NET MVC4 Web应用之创建一个空白的MVC应用程序
初入码田--ASP.NET MVC4 Web应用开发之一 实现简单的登录 初入码田--ASP.NET MVC4 Web应用开发之二 实现简单的增删改查 2016-07-29 在此之前,需要一台电脑( ...
- CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版
CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...
- Scala初入
何为Scala物 Scala为基于JVM虚拟机中的面向对象与函数式编程思想并且完全兼容Java的混合编程语言,可以是Scala与Java是同根同源的,既然Scala与JAVA都是基于JVM之上的编程语 ...
- 0x00linux32位汇编初入--前期准备
0x00汇编初入--前期准备 一.汇编工具 在linux平台下常用的编译器为as,连接器为ld,使用的文本编辑器为vim,汇编语法为att 以下是一些工具: addr2line 把地址转换为文件名和行 ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
随机推荐
- 一步一步学MySQL-一致性非锁定读和锁定读
一致性非锁定读(consistent nonlocking read) 一致性非锁定读是值InnoDB存储引擎通过多版本控制(multi versioning)的方式来读取当前执行时间数据库中的数据. ...
- Linux的nginx环境的vue 部署
1.使用WebStrom编程好的vue 进入到Terminal运行npm run build 2.使用WinSCP进入到nginx 目录配置文件下面,找到nginx.conf文件: ...
- 2017年最重要的HTML5开发手册，传播正能量
今天给大家推荐这个HTML5开发手册,希望能帮助正在学习web前端的人,鄙人也是刚学习前端没多久,借助于一点资讯平台能够结识更多前端大牛,这是我的HTML5进阶学习一点资讯群:250777811,里面 ...
- JavaScript入门（一）
一.什么叫JS? 1.JS的概念JS,是JavaScript的缩写形式,而JavaScript是一种基于对象和事件驱动并且具有相对安全性的客户端脚本语言.它在Web开发中JS占据着举足轻重的地位,所有 ...
- Mac实用操作技巧（二）
输入特殊字符.Emoji表情符号 有的场景需要输入诸如café中的é字母,这时可以按下Option + E之后,再按下E即可输入(注意需要将中文输入法关闭,包括搜狗输入法).还有更多的特殊符号可以输入 ...
- LxNx前端F2F面试问题整理
LxNx前端面试问题: 1. 你用过前端哪些框架?它们项目中会用到Angular.js Backbone.js 我回答jQuery, bootstrap, 而Augular.js只是学过 2. 那既然 ...
- 【Centos7 GRUB】修改开机等待时间
centos7与之前版本不同,在/boot/grub/下没有 grub.conf文件,但在/etc/grub2/grub.cfg可找到帮助信息 [root@za default]# cat /boot ...
- 大咖云集！IMWebConf 2017 前端大会即将在深圳盛大开幕
2017年火热的夏季,一年一度的IMWebConf强势来袭!9月16日,深圳科兴国际会议中心,我们将全心全意打造一场前端盛宴,恭候各位的光临. 作为一名前端老鸟,笔者有幸也参与了本次的大会的主题分享& ...
- node中package.json全方面解析
Name 必须字段. 小提示: 不要在name中包含js, node字样: 这个名字最终会是URL的一部分,命令行的参数,目录名,所以不能以点号或下划线开头: 这个名字可能在require()方法中被 ...
- The Karting 2017ccpc网络赛 1008
The Karting championship will be held on a straight road. There are N keypoints on the road. The pat ...