CSS综合示例(博雅首页)

项目源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}body{font-size: 14px;font-family: "Microsoft YaHei","SimSun";height: 2000px;}.header{height: 58px;background-color: #191D3A;}.inner_c{width: 1000px;/*height: 58px;*/margin: 0 auto;}.header .logo{float: left;padding-left: 12px;padding-right: 40px;/*margin-right: 40px;*/width: 184px;height: 58px;}.header .logo a{display: block;width: 184px;height: 58px;background: url("images/logo.png") no-repeat;text-indent: -999em;}.header .nav{float: left;}.header .nav ul{list-style: none;}.header .nav ul li{float: left;width: 100px;line-height: 58px;text-align: center;border-left: 1px solid #252947;}.header .nav ul li.last{border-right: 1px solid #252947;}.header .nav ul li a{color: #818496;text-decoration: none;display: block;}.header .nav ul li a:hover{color: greenyellow;background-color: #252947;}.header .nav ul li a.current{background-color: #252947;}.header .jrwm_box{float: left;padding-left: 48px;padding-top: 12px;}.banner{height: 465px;background: url("images/banner.jpg") no-repeat center top;}.content{padding-top: 50px;height: 650px;background: url("images/indexmainbg.jpg") no-repeat center bottom;/*background: pink;*/}.content .product{height: 229px;border-bottom: 1px solid #DBE1E7;}.content .product ul{list-style: none;}.content .product ul li{float: left;width: 218px;margin-right: 43px;}.content .product ul li.last{margin-right: 0;width: 217px;}.content .product ul li img{width: 218px;height: 130px;}.content .product ul li.last img{width: 217px;}.content .product ul li h3{text-align: center;line-height: 38px;font-size: 14px;font-weight: bold;}.content .product ul li p.djbf{text-align: center;line-height: 16px;}.content .product ul li p.djbf a{font-size: 12px;color: #38B774;text-decoration: none;background:url("images/sanjiaoxing.png") no-repeat right center;padding-right: 14px;}.content .info{padding-top: 53px;}.content .info .boyaanews{float: left;width: 500px;/*height: 314px;*/background: url("images/bynewsbg.jpg");padding-top: 110px;position: relative;}.content .info .boyaajobs{float: left;width: 500px;height: 314px;background: url("images/byhrbg3.jpg");position: relative;}.content .info .boyaajobs .more2{position: absolute;top: 40px;left: 218px;width: 67px;height: 28px;}.content .info .boyaanews .more{position: absolute;top: 40px;left: 218px;width: 67px;height: 28px;}.content .info .boyaanews ul{list-style: none;padding: 0 20px;}.content .info .boyaanews ul li{line-height: 50px;border-bottom: 1px solid #DBE1E7;font-size: 12px;}.content .info .boyaanews ul li span{color: #AFBECF;margin-right: 20px;}.content .info .boyaanews ul li a{color: #444866;text-decoration: none;font-size: 14px;}.content .info .boyaanews ul li a:hover{color: orange;}.content .info .boyaajobs .title{padding-top: 40px;padding-left: 80px;}.content .info .boyaajobs .title h3{width: 119px;height: 51px;background:url("images/zczp.png") no-repeat;text-indent: -999em;}.content .info .boyaajobs h4{padding-top: 18px;padding-left: 20px;color: white;}.content .info .boyaajobs ul{padding-left: 20px;width: 305px;list-style: none;}.content .info .boyaajobs ul li{border-bottom: 1px solid #6FDEA3;line-height: 37px;}.content .info .boyaajobs ul li a{font-size: 12px;color: white;text-decoration: none;}.content .info .boyaajobs ul li a:hover{color: orange;}</style>
</head>
<body><div class="header"><div class="inner_c"><h1 class="logo"><a href="#">博雅互动-世界上最好的游戏公司</a><!--<img src="data:images/logo.png" alt="">--></h1><div class="nav"><ul><li><a href="#" class="current">首页</a></li><li><a href="#">博雅游戏</a></li><li><a href="#">博雅新闻</a></li><li><a href="#">关于我们</a></li><li><a href="#">客服中心</a></li><li class="last"><a href="#">投资者关系</a></li></ul></div><div class="jrwm_box"><a href="#" class="jrwm"><img src="data:images/jrwm.png" alt=""></a></div></div></div><div class="banner"></div><div class="content"><div class="inner_c"><div class="product"><ul><li><p><img src="data:images/pro1.jpg" alt=""></p><h3>BPT宣传片</h3><p class="djbf"><a href="#">点击播放</a></p></li><li><p><img src="data:images/pro2.jpg" alt=""></p><h3>BPT宣传片</h3><p class="djbf"><a href="#">点击播放</a></p></li><li><p><img src="data:images/pro3.jpg" alt=""></p><h3>BPT宣传片</h3><p class="djbf"><a href="#">点击播放</a></p></li><li class="last"><p><img src="data:images/pro4.jpg" alt=""></p><h3>BPT宣传片</h3><p class="djbf"><a href="#">点击播放</a></p></li></ul></div><div class="info"><div class="boyaanews"><p><a class="more" href="#"><img src="data:images/more.png" alt=""></a></p><ul><li><span>09 / 28</span><a href="#">2015博雅国际博客大赛(BPT)在澳门落幕</a></li><li><span>09 / 28</span><a href="#">2015博雅国际博客大赛(BPT)在澳门落幕</a></li><li><span>09 / 28</span><a href="#">2015博雅国际博客大赛(BPT)在澳门落幕</a></li><li><span>09 / 28</span><a href="#">2015博雅国际博客大赛(BPT)在澳门落幕</a></li></ul></div><div class="boyaajobs"><!--<h3>--><!--<img src="data:images/zczp.png" alt="">--><!--</h3>--><p><a class="more2" href="#"><img src="data:images/more2.png" alt=""></a></p><div class="title"><h3>专场招聘</h3></div><h4>专场招聘岗位:</h4><ul><li><a href="#">WEB前端开发工程师</a></li><li><a href="#">WEB前端开发工程师</a></li><li><a href="#">WEB前端开发工程师</a></li><li><a href="#">WEB前端开发工程师</a></li></ul></div></div></div></div>
</body>
</html>

CSS综合示例(博雅首页)相关推荐

C结构体工具DirectStruct（综合示例二）
2019独角兽企业重金招聘Python工程师标准>>> C结构体工具DirectStruct(综合示例二) 1.编写定义文件,用工具dsc处理之,自动生成XML转换代码和ESQL代码 ...
个人HTML、CSS综合
关于HTML:是用于开发网页的一门语言.(如建造房子时所用到的砖块) 关于CSS:用于美化.渲染网页的一门语言.( 如装修房子时用到的石灰.油漆等涂料) 目录一.HTML概述 1.1 ...
HTML+CSS综合实验之简单实现环球互联网产业园网页--渐入HTML4
HTML+CSS综合实验之简单实现环球互联网产业园网页--渐入HTML4 预计效果图代码展示关键代码解释 CSS css概述多重样式将层叠为一个伪类锚伪类伪类与 CSS 类结果展示预计 ...
关于完成“博雅首页”作业后的感想
经过一周多的时间,我们完成了HTML和CSS的学习,铭哥给我们留了一道作业,就是完成一个博雅首页的网页,铭哥说让我们用我们现在所学到的所有知识,尽自己的努力去完成他,经过3天的时间,通过与同学们的讨论 ...
make--变量与函数的综合示例自动生成依赖关系
一.变量与函数的示例示例的要求 1.自动生成target文件夹存放可执行文件 2.自动生成objs文件夹存放编译生成的目标文件 3.支持调试版本的编译选项 4.考虑代码的扩展性完成该示例所需的 1 ...
CSS仿艺龙首页鼠标移入图片放大
CSS仿艺龙首页鼠标移入图片放大,效果似乎没有js好...... <!DOCTYPE html> <html lang="en"> <head> ...
xml控制html样式,XML与CSS综合设置实例
XML与CSS综合设置实例 HTTP代码如下: @charset "utf-8"; @charset "utf-8"; bookname{ display:bl ...
QT综合示例：QT串口通信
QT综合示例:QT串口通信 0.界面: 1.代码: 如果用qt写程序作为上位机,然后通过和usb和下位机通信的时候,就需要用到qt中的串口通信了. 0.界面: 1.代码: 1).pro 添加: QT ...
QT+Halcon综合示例：clip回形针2D位姿检测
QT+Halcon综合示例(一):clip回形针2D位姿检测 0.halcon源码: 1.Qt代码: 2.运行结果: 下载:clip回形针2D位姿检测 0.halcon源码: * clip.hdev: ...

CSS综合示例(博雅首页)

CSS综合示例(博雅首页)相关推荐

最新文章

热门文章