学习任务在继续...css...
<!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="">PHP 专场招聘</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>
</body>
</html>
/*初始化状态*/
body,li,ul,div{
margin: 0px;
padding: 0px;
list-style: none;
}
body{
background: url(../image/indexmainbg.jpg) no-repeat center bottom;
}
/*头部盒子 头部logo部分*/
.head{
text-align: center;
width: 100%;
height: 58px;
background-color:#191d3a;
}
.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;
width:1348px;
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;
浏览器缩放50%下的视图
最后一个div中的ui li就粗糙排了 改改就好
学习任务在继续...css...的更多相关文章
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- 学习使用html与css，并尝试写php
这两天看了一点php,本想着实践一下,发现自己的服务器还没弄好,php的代码只写了两三行嵌在html中,还运行不了,同时还发现自己这几天学的html和css还不够,总是频频出现问题,学习的样式和布局都 ...
- CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
- 2017年学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- [CSS3] 学习笔记-HTML与CSS简单页面效果实例
一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8&quo ...
- CSS学习笔记一：css 画平面图形
最近在学习CSS,先从CSS画点平面图形入手,发现除了正方形.长方形此类比较简单,只要有长宽设置恰当即可,画圆要涉及radius,然后恢复到做界面的最讨厌的状态了,不断的修改设值,调整数据,所幸并不多 ...
- CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- 2010年腾讯前端面试题学习（jquery,html,css部分）
看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,js部分已学习,这是jquery,html和css部分,学习一下:) 原文地址:https://segmentfau ...
- 2017年值得学习的3个CSS特性
原文:https://bitsofco.de/3-new-css-features-to-learn-in-2017/译文:http://caibaojian.com/3-new-css-featur ...
- 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类
亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...
随机推荐
- SQLSERVER到底能识别多少个逻辑CPU?
SQLSERVER到底能识别多少个逻辑CPU? SQLSERVER到底能识别多少个逻辑CPU? 前言 在前几天在论坛有人遇到SQLSERVER识别逻辑CPU的问题 帖子地址: http://socia ...
- ibatis实战之基础环境搭建
关于ibatis的介绍.优缺点,以及ibatis和hibernate的比较再此不在赘述,可参阅其他资料. 一.准备工作 1.下载ibatis软件包http://download.csdn.net/de ...
- Eclipse plugin web site 发布和版本更新
Eclipse plugin web site 发布和版本更新 在eclipse插件开发过程中免不了要发布1.0, 1.1, 1.2…….等等,随着版本的递增,假如每次都发布一个插件zip包,那使用者 ...
- Hibernate配置XML连接数据库
一.hibernate.cfg.xml 1.配置连接Oracle <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate ...
- 一步一步深入spring(1)--搭建和测试spring的开发环境
1.引用jar包 到spring的网站上下载spring的jar包(本文是2.5.6),解压缩后找到 使用spring必须引用的jar包 spring.jar commons-logging.jar ...
- PostgreSQL 简明使用说明
原文地址:http://www.ruanyifeng.com/blog/2013/12/getting_started_with_postgresql.html 期间,作者有写错的地方,已经做更改了. ...
- VIM批量文件查找和替换
使用vim时间不长,linux命令行下常用的文本编辑工具,所以需要掌握一些基本的用法.很多不会的不是百度就谷歌,总有你想要的答案. 1. 批量文件查找内容 vimgrep 比如在当前目录下查找带有“a ...
- JS高程5.引用类型（6）Array类型的位置方法，迭代方法，归并方法
一.位置方法 ECMAScript5为数组实例添加了两个位置:indexOf()和 lastIndexOf().这两个方法接收两个参数:要查找的项和(可选的)表示查找起点位置的索引(如在数组[7,8, ...
- Asp.Net 网站访问人数及在线人数
利用Application对象和Session对象可以统计历史访问人数和当前在线人数. 在会话开始和结束时,一定要进行加锁和解锁操作.由于多个用户可以共享Application对象,因此加锁是必要的, ...
- HDU 2064 菜鸡第一次写博客
果然集训就是学长学姐天天传授水铜的动态规划和搜索,今天讲DP由于困意加上面瘫学长"听不懂就是你不行"的呵呵传授,全程梦游.最后面对连入门都算不上的几道动态规划,我的内心一片宁静,甚 ...