每天点滴的进行,css+div简单布局...布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>博雅互动</title> <link rel="stylesheet" type="text/css" href="css/boya.css" /> </head> <body> <div class="head"> <div class="head_logo_conten"> <ul> <li class="head_logo_logo"></li> <li><a href="#">首页</a></li> <li><a href="#">博雅互动</a></li> <li><a href="#">博雅互动</a></li> <li><a href="#">博雅互动</a></li> <li><a href="#">博雅互动</a></li> <li><a href="#">博雅互动</a></li> <li class="head_logo_right"></li> </ul> </div> </div> <div class="head_banner"> </div> <div class="conten"> <div class="conten_top"> <div class="conten_top_img"> <ul> <li><img src="data:image/bpt1.jpg" /></li> <li>博雅互动</li> <li><a href="#">点我互动</a></li> </ul> </div> <div class="conten_top_img"> <ul> <li><img src="data:image/bpt2.jpg" /></li> <li>博雅互动</li> <li><a href="#">点我互动</a></li> </ul> </div> <div class="conten_top_img"> <ul> <li><img src="data:image/bpt1.jpg" /></li> <li>博雅互动</li> <li><a href="#">点我互动</a></li> </ul> </div> <div class="conten_top_img"> <ul> <li><img src="data:image/bpt2.jpg" /></li> <li>博雅互动</li> <li><a href="#">点我互动</a></li> </ul> </div> </div> <hr /> <div class="conten_footer"> <div class="conten_footer_left"> <ul> <li></li> <li></li> <li></li> <li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23 </span></p></li> <li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23 </span></p></li> <li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23 </span></p></li> </ul> </div> <div class="conten_footer_right"> <ul> <li class="title"><a href="">招聘岗位</a></li> <li><a href="">PHP 专场招聘</a></li> <li><a href="">PHP 专场招聘</a></li> <li><a href="">PHP 专场招聘</a></li> <li><a href="">PHP 专场招聘</a></li> </ul> </div> </div> </div> <div class="top_head"> <a href="#top"><img src="data:image/jiantou.png"/></a> </div> </body> </html>
css:
/*初始化状态*/ body,li,ul,div{ margin: 0px; padding: 0px; list-style: none; } body{ background: url(../image/indexmainbg.jpg) no-repeat center bottom; padding-top: 58px; } /*头部盒子 头部logo部分*/ .head{ text-align: center; width: 100%; height: 58px; background-color:#191d3a; position: fixed; top: 0px; left: 0px; } .head_logo_conten{ width: 1000px; height: 58px; margin: 0px auto; } .head_logo_conten .head_logo_logo{ width:184px ; background: url(../image/logo.png) no-repeat center center; } .head_logo_conten .head_logo_right{ width:184px ; background: url(../image/jrwm.png) no-repeat center center; } .head_logo_conten li{ width: 100px; height: 58px; line-height: 58px; float: left; } a{ text-decoration: none; } a:link,a:visited{ color: gray; } a:hover{ color: white; font-weight: bold; } /*banner部分*/ .head_banner{ margin: 0 auto; background: url(../image/banner.jpg) no-repeat center center; width:100%; height: 465px; } /*conten内容部分*/ .conten{ margin: 0 auto; width: 1100px; height: 650px; } .conten_top{ width: 1100px; height: 320px; text-align: center; } hr{ font-weight: bold; width: 1000px; } .conten_top_img{ width: 220px; height: 260px; margin:50px 0 0 40px; float: left; } .conten_top_img li{ margin-bottom: 10px; } .conten_top_img li a{ color: green; font-size: 12px; padding-right: 10px; background: url(../image/xjt.png) no-repeat right center; } /*底部部分*/ .conten_footer{ width: 1100px; height: 310px; } .conten_footer_left,.conten_footer_right{ width: 500px; height: 310px; margin-left: 30px; float: left; } .conten_footer_left{ background: url(../image/bynewsbg.jpg) no-repeat center; } .conten_footer_left li{ margin-left: 20px; height: 45px; list-style: 45px; } .conten_footer_left li p{ height: 28px; border-bottom: 1px dashed gray; } .conten_footer_left li span{ float: right; } .conten_footer_right{ background: url(../image/zczp.jpg) no-repeat center; } .conten_footer_right li{ margin-left:20px; margin-top: 20px; font-weight: bold; width: 350px; height: 40px; line-height: 40px; padding-left:10px ; } .title{ background: url(../image/jrwm.png) no-repeat right center; } .conten_footer_right .title a{ font-size: 18px; font-weight: bold; color:black; padding-left: 50px; } /*返回顶部 定位*/ .top_head{ width:19px ; height: 19px; border: 1px solid gainsboro; border-radius:19px; position: fixed; right: 50px; bottom: 50px; }
效果图50%窗口:
每天点滴的进行,css+div简单布局...布局的更多相关文章
- HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- HTML CSS + DIV实现局部布局
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...
- 【转载】CSS + DIV 实现局部布局
HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标:使用div + ul-li实现导航菜单布局 ...
- 【转载】CSS + DIV 实现整理布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- HTML CSS + DIV实现整体布局 part1
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版
CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...
- HTML CSS + DIV实现排版布局
HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...
- HTML CSS + DIV实现整体布局 part2
9.盒模型的层次关系 我们通过一个经典的盒模型3D立体结构图来理解,如图: 从上往下看,层次关系如下: 第1层:盒子的边框(border), 第2层:元素的内容(content).内边 ...
- css+html简单的布局demo
于html介绍css作风.可以改变html块状布局,局更加美观.接下来看一个基础布局的小样例: <html> <head> <meta http-equiv=" ...
随机推荐
- SpringMVC入门笔记一
SpringMVC优势 性能比struts2好 简单 便捷 易学 和Spring无缝集成(使用spring ioc aop) 约定优于配置 能够简单进行Junit测试 ...
- GC算法精解(五分钟让你彻底明白标记/清除算法)
GC算法精解(五分钟让你彻底明白标记/清除算法) 相信不少猿友看到标题就认为LZ是标题党了,不过既然您已经被LZ忽悠进来了,那就好好的享受一顿算法大餐吧.不过LZ丑话说前面哦,这篇文章应该能让各位彻底 ...
- javascript计算字符串中出现最多的字符和个数
代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...
- 解决MSSQL 2008不能用IP登录的问题
解决MSSQL 2008不能用IP登录的问题 前提准备:mssql 2008已安装好了一个实例(我按默认情况下安装的实例是:SQLEXPRESS),并安装了SQL Server Manag ...
- VC 编程ANSI环境下读写Unicode文件
没有注意到文件编码的不同会产生这么多的问题,在动手以前查询了很多资料,在本博客中收藏了不少先辈的成果,在这里一并表示致敬! 关于ANSI和Unicode编码的原理在这里也不说了,主要讲下如 ...
- C#新功能--命名参数与可选参数
C#新功能--命名参数与可选参数 可能是篇幅太短了,又被打入冷宫了.先重发一篇加上可选参数.本来不想加这个呢,因为可选参数可能大家用的会多点.其实这 两个在VB中早就有了,在C#中,只有在.net4以 ...
- POJ 1033 Defragment
根据http://hi.baidu.com/algorithm/item/d51b15f7a8ea1c0a84d278be这个开始练习ac,刚开始接触这道题时以为是道搜索题,读完之后深思了一下,感觉不 ...
- 【使用教程】论Windows下必备的抓包工具Fiddler2如何安装证书(查看Https)
一.写在前面 好久没更新博客了,最近也是忙着年前的一些事情,所以一直没来得及弄一些有价值的东西,还是来冒个泡.随着苹果公司要求的2017年开始上架审核必须是Https,而原本Http的上架需要提交强烈 ...
- [ios2]ASIHTTPReques 清除所有持久连接
http://www.winddisk.com/2012/08/27/iphone_screenlock_network_disconnection/ + (void)clearPersistentC ...
- [ios2]ios系统中各种设置项的url链接
在代码中调用如下代码:(ps: ios 5.0 以后不可用)NSURL*url=[NSURL URLWithString:@"prefs:root=WIFI"];[[UIAppli ...