html+css3完成的一个网站首页

<!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" onselectstart="return false">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>博雅网</title>
</head>
<style type="text/css">
 *{margin:0px;padding:0px;}

/*导航条*/
 .header{
  width:100%;height:65px;
  margin:0px auto;
  background:rgba(25, 28, 60, 1);
 }
 .header img{
  height:100%;
  float:left;
  margin-left:100px;
  margin-right:50px;
 }
 .header ul{
  width:100%;height:100%;
 }
 .header ul li{
  list-style:none;
  display:inline-block;
  width:100px;height:100%;
  line-height:70px;
  text-align:center;
  font-size:18px;
  font-family:"微软雅黑";
  color:#979797;
  border-left:1px solid #3b3b3b;
  float:left;
 }
 .header ul li:hover{
  cursor:pointer;
  color:#ddd;
  /*background:rgba(68, 72, 102, 1);*/
 }
 .header ul li#last{
  border-right:2px solid #303030;
 }
 .header ul li#next{
  border-left:none;
  height:40px;width:120px;
  color:white;
  background:rgba(51, 185, 114, 1);
  border-radius:3px;
  margin-top:15px;
  margin-left:10px;
  line-height:40px;
 }
 .header ul li#_text{
  float:right;
  margin-right:60px;
  border-left:none;
 }
 .header ul li#_text #btn_1{
  font-size:18px;
  color:rgba(51, 185, 114, 1);
 }
 .header ul li#_text #btn_2{
  font-size:18px;
  margin-left:10px;
  color:#ddd;
 }
 .header ul li#_text #btn_2:hover{
  color:rgba(51, 185, 114, 1);
 }

/*大轮播图*/
 .lun{
  width:1349px;height:465px;
  background: url("images/banner.jpg") no-repeat center top;
  margin:0 auto;
  position:relative;
 }
 .lun ul{
  width:120px;height:30px;
  position:absolute;
  left:615px;top:420px;
 }
 .lun ul li{
  list-style:none;
  display:inline-block;
  width:16px;height:18px;
  border-radius: 100%;
  background:white;
  margin-left:9px;
  margin-right:9px;
 }
 .lun ul li:hover{
  width:28px;
  margin-left:3px;
  margin-right:3px;
  border-radius: 8px 8px;
  background:pink;
 }
 /*小轮播图*/
 .minlun{
  width:100%;height:260px;
  margin:60px auto;
 }
 .minlun ul{
  width:100%;height:100%;
 }
 .minlun ul li{
  display:inline-block;
  width:300px;height:100%;
  float:left;margin-left:30px;
 }
 .minlun ul li:hover .content{
  background:rgba(51, 185, 114, 1);
 }
 .minlun ul li:hover .content #text_2{
  color:white;
 }
 .minlun ul li img{
  width:300px;height:179px;
 }
 .minlun ul li .content{
  width:100%;height:81px;
  transition:background 0.5s;
 }
 .minlun ul li .content:hover{
  background:rgba(51, 185, 114, 1);
 }
 .minlun ul li .content:hover #text_2{
  color:white;
 }
 .minlun ul li .content #text_1{
  display:inline-block;
  width:100%;height:30px;
  text-align:center;
  line-height:30px;
 }
 .minlun ul li .content #text_2{
  display:inline-block;
  width:100%;height:30px;
  text-align:center;
  line-height:30px;
  margin-top:10px;
  color:rgba(51, 185, 114, 1);
 }

/*小轮播图的圆点*/
 .circle{
  margin-top:30px;
  width:120px;height:30px;
  margin-left:615px;
  position:relative;
 }
 .circle:before{
  content:"";
  display:inline-block;
  width:580px;border:1px solid #aaa;
  margin-left:130px;
  margin-top:13px;
 }
 .circle:after{
  content:"";
  display:inline-block;
  width:580px;border:1px solid #aaa;
  margin-right:118px;
  float:right;
 }
 .circle ul{
  position:absolute;
  top:0px;left:13px;
 }
 .circle ul li{
  list-style: none;
  display:inline-block;
  float:left;
  width:14px;height:14px;
  border-radius:100%;
  background:rgb(51, 185, 114);
  margin-top:8px;
  margin-left:6px;
  margin-right:6px;
 }
 .circle ul li:hover{
  width:20px;
  margin-left:3px;
  margin-right:3px;
  border-radius:7px 7px;
  background:pink;
 }
 .bg_down{
  width:1630px;height:364px;
  background: url("images/indexmainbg.jpg");
  margin-top:50px;
 }
 .bg_down .left{
  float:left;
  width:500px;height:310px;
  background: url(‘images/bynewsbg.jpg‘);
  margin-left:175px;
 }
 .bg_down .right{
  width:500px;height:310px;
  background: url(‘images/byhrbg3.jpg‘);
  float:left;
 }
 .last_bg{
  width:100%;height:100px;
  margin-top:30px;
  background:rgba(25, 28, 60, 1);
 }
 .bg_down .left ul{
  width:460px;height:50%;
  margin-left:20px;
  margin-top:121px;
 }
 .bg_down .left ul li{
  list-style:none;
  display:inline-block;
  width:100%;height:46px;
  border-bottom:1px solid #ccc;
 }
 .bg_down .left ul li a{
  display:inline-block;
  height:100%;
  font-size:14px;
  color:#666;
  text-align:center;
  line-height:46px;
  text-decoration:none;
  float:left;
 }.bg_down .left ul li a:hover{
  color:rgba(51, 185, 114, 1);
 }
 .bg_down .left ul li span{
  display:inline-block;
  height:100%;
  font-size:14px;
  color:#bbb;
  text-align:center;
  line-height:46px;
  float:right;
 }

.bg_down .right .topText{
  width:200px;height:100px;
  margin-left:78px;
 }
 .bg_down .right .topText .leftText{
  width:60%;height:60%;
  margin-top:36px;
 }
 .bg_down .right .topText .leftText #b_text{
  font-size:28px;
  color:#fff;
 }
 .bg_down .right .topText .leftText #m_text{
  font-size:12px;
  color:#fff;
 }
 .bg_down .right .bottomText{
  width:300px;height:170px;
  margin-top:-22px;
  margin-left:20px;
 }
 .bg_down .right .bottomText span{
  font-size:18px;
  color:#fff;
 }
 .bg_down .right .bottomText ul{
  margin-top:10px;
 }
 .bg_down .right .bottomText ul li{
  list-style:none;
  display:inline-block;
  width:100%;
  height:35px;
  border-bottom: 1px solid #bbb;
  font-size:14px;
  color:#fff;
  line-height:35px;
 }
 .bg_down .right .bottomText ul li:hover{
  cursor:pointer;
 }
 
</style>
<body>
 <!--导航条开始-->
 <div class="header">
  <img src="images/logo.png">
  <ul>
   <li>首页</li>
   <li>博雅游戏</li>
   <li>博雅新闻</li>
   <li>关于我们</li>
   <li>客服中心</li>
   <li id="last">投资者关系</li>
   <li id="next">加入我们</li>
   <li id="_text">
    <span id="btn_1">中文</span>
    <span id="btn_2">EN</span>
   </li>
  </ul>
 </div>
 <!--导航条结束-->
 
 <!--轮播图开始-->
 <div class="lun">
  <ul>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </div>
 <!--轮播图结束-->

<!--小轮播图开始-->
 <div class="minlun">
  <ul>
   <li>
    <img src="images/pro1.jpg">
    <div class="content">
     <span id="text_1">德州扑克</span>
     <span id="text_2">TWO PLAYER MAHJONG</span>
    </div>
   </li>
   <li>
    <img src="images/pro2.jpg">
    <div class="content">
     <span id="text_1">博雅互动宣传视频</span>
     <span id="text_2">TWO PLAYER MAHJONG</span>
    </div>
   </li>
   <li>
    <img src="images/pro3.jpg">
    <div class="content">
     <span id="text_1">斗地主</span>
     <span id="text_2">TWO PLAYER MAHJONG</span>
    </div>
   </li>
   <li>
    <img src="images/pro4.jpg">
    <div class="content">
     <span id="text_1">德州扑克</span>
     <span id="text_2">TWO PLAYER MAHJONG</span>
    </div>
   </li>
  </ul>
 </div>
 <!--小轮播图结束-->

<!--小轮播图的小圆点-->
 <div class="circle">
  <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </div>

<!--博雅新闻-->
 <div class="bg_down">
  <div class="left">
   <ul>
    <li>
     <a href="#">博雅互动公布2016全年业绩，经调整纯利增长46.7%</a>
     <span>03/29</span>
    </li>
    <li>
     <a href="#">博雅互动出席“Top棋牌智力游戏启动仪式”</a>
     <span>03/23</span>
    </li>
    <li>
     <a href="#">博雅互动荣获“2016最佳棋牌游戏&棋牌大厅金苹果奖”</a>
     <span>02/22</span>
    </li>
    <li>
     <a href="#">博雅互动泰国分公司携手玩家开展公益赈灾活动</a>
     <span>01/22</span>
    </li>
   </ul>
  </div>
  <div class="right">
   <div class="topText">
    <div class="leftText">
     <span id="b_text">专场招聘</span>
     <span id="m_text">BOYAA JOBS</span>
    </div>
    <span></span>
   </div>
   <div class="bottomText">
    <span>专场招聘岗位:</span>
    <ul>
     <li>Php开发工程师</li>
     <li>C++开发工程师</li>
     <li>Web前端开发工程师</li>
     <li>大数据开发工程师</li>
    </ul>
   </div>
  </div>
 </div>

<!--收尾 底部声明条-->
 <div class="last_bg">
  
 </div>
</body>
</html>

实现效果如下：

时间： 2024-11-03 00:24:47

html+css3完成的一个网站首页的相关文章

.net 网站首页，本次的项目中用到的一个网站首页中统计网页访问量的工具方法，我觉得它应该在pagebase里面，拿来用一下

需要建立一个根文件夹 ~/xml/couter.txt #region 网站访问量         protected void pageviews() {             int count = 0;             //数据累加             int Stat = 0;             StreamReader srd;             //取得文件的实际路径             string file_path = Server.MapPath

如何布局网站首页

如何布局网站首页良好的页面布局及代码优化对用户体验和搜索引擎友好度有很好的促进作用.在设计网站首页应该注意以下几点:一.主导航覆盖的信息要全面导航是一个网站的重点,相当于文章的核心,跟标题作用差不多.方便用户快速了解网站大概信息.二.左侧分出二级导航二级导航是对主导航的进一步补充和说明,因为很多时候主导航想表达的信息不一定完善,这个时候就需要二级导航来进行补充.有效的提高用户体验.三.文字图片共存不管单一是图片还是文字.感觉都缺乏说服力.所以就需要图文并茂.这样更能向用户成功推荐一个产品.四.首

一个优秀的网站首页是如何设计的？

网站首页是用户进入你网站看到的第一面,如果这第一面给用户的印象不好,不够吸引,那样会让用户没有了继续浏览的欲望.一个不够吸引人的网站首页,就算你网站推广做的再好,IP量再高,但是往往就是因为网站首页设计的不够好.不够精致.不够吸引,从而导致了网站转化率不高.网站首页的设计不但在网站建设过程中很重要,在网站优化中也起到了关键作用.那么一个优质的网站首页该怎么样设计呢?一个震撼的网站首页用什么设计呢? 网站首页无论是放在网站设计,还是网站建设和网站优化中都是首要针对的步骤.不管是企业网站.个人网站,

用HTML+CSS编写一个计科院网站首页的静态网页

一.HTML代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>首页</title> 6 7 </head> 8 <body> 9 <div id="page"> 10 <div id="page_head"> 11 <div i

用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果

今天看到淘宝ued博客上左边的菜单导航动画效果不错,就用jQuery和css3做了一个简单的例子,主要是实现运用了jQuery 事件和css3 transition属性. 用一个元素来实现鼠标滑动到某个导航的背景效果,文字颜色也运用css3 transition 渐变的效果 当鼠标滑动其他导航的时候,加背景的元素的top值也会随着变化,定位到当前的导航上,同时文字字体颜色也会跟着改变: 主要实现的html代码如下: <div class="menuBox"> <div

css3媒体查询实现网站响应式布局

响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词.因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给人不同的使用感受和体验呢?这样既节约制造成本,又节省空间,还能体验创意性的生活. 先来给大家欣赏几张图大黄蜂: 沙发床: 没错!大黄蜂为应对紧急战斗而瞬间由汽车变为战斗机,沙发床.沙发座椅是我们见过再平常不过的家具了.我们总是惊叹外国人为什么有这么丰富的想象力和神奇的创造力.而是什么驱动他们去想象进而

HTML&amp;CSS——使用DIV和CSS完成网站首页重构

1.DIV 相关的技术 Div 它是一个 html 标签,一个块级元素(单独显示一行).它单独使用没有任何意义,必须结合CSS来使用.它主要用于页面的布局. Span 它是一个 html 标签,一个内联元素(显示一行).它单独使用没有任何意义,必须结合CSS 来使用.它主要用于对括起来的内容进行样式的修饰. 2.CSS 的作用 HTML:它是整个网站的骨架. CSS:它是对整个网站骨架的内容进行美化(修饰). 3.CSS 如何使用 语法和规范 选择器{   属性名 1:属性值 1;     属性

基于nginx + dwz定制一个网站

前言 原创文章欢迎转载,请保留出处. 若有任何疑问建议,欢迎回复. 邮箱:[email protected] 稍微花了点时间定制了一个简单的dwz网站,主要利用框架制作了主界面和简单地调用了jQuery.ajax查询json. 利用dwz框架模板 之前已经搭建好dwz了,由于之前搭建的dwz后来使用的时候出现了bug,所以这里我使用新版的dwz 1.4.6,可以到https://code.google.com/p/dwz/downloads/list下载.这里我们只是使用dwz框架而已,所以暂时

CSS3实战开发:仿天猫首页图片展示动画特效实战开发

各位网友大家好,我是陌上花会开,人称陌陌.今天我带领大家开发一个仿天猫首页图片展示动画特效的案例.一如往常,我既不提供源码给大家,也不提供Demo给大家,只是希望大家能跟着我的讲解,然后将代码一步步复制到本地,本人可以保证,页面上的代码复制到本地,绝对百分百运行,且得到与陌陌一样的运行效果.我这么做只为激起大伙的动手能力,望大家能明白我的用心. 好了,不废话了,直接本篇的实战开发吧. 我们看一下我们今天要做的实战案例效果图: 1. 鼠标划过前: 2. 鼠标划过右侧的图片时: 可能大伙看这个静态截