第一个网页作品

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xiaowenwenwenwenwen/article/details/53976067
<!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>博雅浏览器</title>
	<link  rel="stylesheet" type="text/css" href="style/index.css">

    <style type="text/css">

.style1 {font-size: 12px}

    </style>
</head>
<body>
	<div class="header">
		<div class="logo">
			<h1>
				<a href="http://www.boyaa.com" title="博雅互动网">博雅互动网</a>
			</h1>	       
	    </div>	     
	</div>	   	
     <div class="nav1">
     	<a href="http://www.boyaa.com/game.html" title="祝大家">首页</a>
     </div>
     <div class="nav2">
        <a href="http://www.boyaa.com/news.html" title="在">博雅游戏</a>
     </div>
     <div class="nav3">
        <a href="http://www.boyaa.com/news.html" title="新的">博雅新闻</a>
     </div>
     <div class="nav4">
        <a href="http://www.boyaa.com/about.html" title="一年里">关于我们</a>
     </div>
     <div class="nav5">
        <a href="http://www.boyaa.com/services.html" title="身体健康">客服中心</a>
     </div>
     <div class="nav6">
        <a href="http://www.boyaa.com.hk/s/investor.php" title="万事如意">投资者关系
        </a>
     </div>

     <div class="nav7">
     	<div class="buttom">
     		<h1>
				<a href="http://join.boyaa.com/" title="美女们!快来吧!">加入我们</a>
			</h1>
     	</div>
     </div>    
     <div class="photo1">
         <a href="https://www.nuomi.com/" title="走过路过,千万不要错过!">帅帅哒</a>
     </div>
     <div class="photo2">
         <a href="http://www.sohu.com/" title="黄老师是大家的小鲜肉!">美美哒</a>
     </div>
     <div class="photo3">
         <a href="http://www.4399.com/" title="杨老师是大家的女神!">哈哈哈</a>
     </div>
     <div class="photo4">
         <a href="http://www.7k7k.com/" title="来来来,我是你的宝贝!">嘻嘻嘻</a>
     </div>
     <section class="photonews">
      <article class="indexnewscon">
          <ul class="newslist c1">
            <li class="c1">
              <a href="http://www.baidu.com">博雅互动受邀出席2016中国移动全球合作伙伴大会</a>
             <span class="time">12 / 20</span>
            </li>
            <li class="cl">
              <a href="http://www.4399.com">2016BPT海天盛筵站冠军出炉,新丝路模特“惊艳”决赛赛场</a>
              <span class="time">12 / 11</span>
            </li>
            <li class="cl">
               <a href="http://www.codecombat.cn/play/level/gems-in-the-deep">博雅互动公布2016第三季度业绩  公司收益稳步增长</a>
                <span class="time">11 / 29</span>
            </li>
            <li class="cl">            
                <a href="http://mediaqueri.es/">博雅互动牵手“海天盛筵”展会,打造高端棋牌竞技赛事</a>
                <span class="time">11 / 09</span>
            </li>
           </ul>
            
        

      </article>

     </section>
     <div class="photowoman">
        <div class="stit">
                <h1>专场招聘</h1>
                <p>BOYAA JOBS</p>
            </div>
            <article class="recruit">
                <h3>专场招聘岗位:</h3>
                <a href="http://sports.sina.com.cn/nba/">
                <ul class="recruitlist">
                    <li>PHP开发工程师 </li>
                    <li>C++开发工程师 </li>
                    <li>WEB前端开发工程师</li>
                    <li>大数据开发工程师</li>
                </ul>
                </a> 
            </article>
     </div>
     <div class="photobottom">
           <nav class="area"> 
                <span class="copyright">Copyright © 2004 - 2016 博雅互动(Boyaa Interactive) 
                      <a target="_blank" href="http://www.miibeian.gov.cn/">粤ICP备05062536号
                      </a>  
                      网络文化经营许可证:粤网文[2015]1991-405号  增值电信业务经营许可证:粤B2-20110513 
                      <a target="_blank" href="http://szcert.ebs.org.cn/3a08cc75-94e5-4d0c-b6ae-92a13a947618">     
                      <img style="border-width:0px;border:hidden; border:none;" alt="深圳市市场监督管理局企业主体身份公示" title="深圳市市场监督管理局企业主体身份公示" src="http://szcert.ebs.org.cn/Images/govIcon.gif" width="36" height="50" border="0">
                      </a>
                      <script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js" type="text/javascript">                                  
                      </script>
                </span> 
                <span class="fl"> 
                      <a href="http://map.baidu.com/">网站地图</a> | 
                      <a href="https://www.baidu.com/duty/index.html">免责声明</a> 
                </span> 
            </nav>
     </div>
     <div class="MORE1">
            <a href="http://www.boyaa.com/news.html" title="更多">MORE1</a>
     </div>
     <div class="MORE2">
            <a href="http://www.webhek.com/misc/3d-album/" title="程序员给女朋友的礼物">MORE2</a>
     </div>
     </body>
</html>

*{margin:0;padding: 0;}
body{font:12px/150% "宋体",arial;color: black;
background:url(../images/banner.jpg) center 60px no-repeat;}
/*h1,h2,h3,h4,h5,h6{font-size: 100%;}  /*就是让所有的h标题和body字体大小一样大*/*/
img{border:0;display:block;}  /*清除图片底侧数据*/
ul,ol{list-style: none;} /*把列表中的小点去掉*/
a{text-decoration:none;color: #444866;} /*链接属性*/
a:hover{text-decoration: underline;} /*链接下划线*/
.clearfix:after{
	  content: "";
	  display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
 /* .clearfix{zoom:1;} */
 .header{
 	width: 230px;
 	height: 60px;
 	background-color: #191D3A;
 	padding: 0 0 0 175px;
 	float:left;
 }


 .logo{
 	width: 174px;
 	height: 58px;
 	background: url(../images/logo.png) no-repeat;
 	text-indent:-9999em;
 	
 }
 .logo a{
 	display: block;
 	height: 58px;
 	
 }
 .nav1,.nav2,.nav3,.nav4,.nav5,.nav6{
   	width: 90px;
   	height: 36px;
   	background: #191D3A;
   	float: left;
   	text-align: center;
   	padding-top:24px; 
   	font-size:14px;
    color: #c0c0c0;
    font-family: Georgia;
    border-right-style: inset;
    border-right-width: 1px;
    border-right-color: #c0c0c0;
 }
 .nav7{
 	width: 254px;
 	height: 48px;
 	background: #191D3A;
 	position: absolute;
  left: 951px;
  top: 0px;
 	padding: 12px 0 0 138px;

 }
 .buttom{
 	width:100px;
 	height:34px;
 	background: url(../images/button.png) no-repeat;
 	text-indent:-9999em;

 }
 .buttom a{
 	display: block;
 	height: 34px;
 }
  a:hover { text-decoration: none; color: #33b972; } 
 
 .photo1{
  height:128px;
  width: 218px;
  background: url(../images/bpt.jpg) no-repeat; 
  position: absolute;
  left: 172px;
  top: 568px;
  text-indent:-9999em;
 }
 .photo1 a{
  display: block;
  height: 128px;
 }
 .photo2{
  height:128px;
  width:218px;
  background: url(../images/video.jpg) no-repeat;
  position:absolute;
  left: 433px;
  top: 568px;
  text-indent: -9999em;
 }
 .photo2 a{
  display: block;
  height:128px;
 }
 .photo3{
  height: 128px;
  width: 218px;
  background: url(../images/gamepic3.jpg) no-repeat;
  position: absolute;
  left:694px;
  top:568px;
  text-indent:-9999em;
 }
 .photo3 a{
  display: block;
  height: 128px;
 }
 .photo4{
  height: 128px;
  width: 218px;
  background: url(../images/gamepic1.jpg) no-repeat;
  position: absolute;
  left:955px;
  top:568px;
  text-indent: -9999em;
 }
 .photo4 a{
  display:block;
  height: 128px;
 }
 .photonews{
  height: 278px;
  width: 488px;
  background:url(../images/bynewsbg.jpg);
  position: absolute;
  left: 191px;
  top: 834px;
 }
 .photowoman{
  height: 278px;
  width: 450px;
  background: url(../images/byhrbg3.jpg);
  position: absolute;
  left: 678px;
  top: 834px;
 }
 .photobottom{
  height: 128px;
  width: 100%;
  background-color: #191D3A;
  position: absolute;
  top: 1163px;
 }
 .MORE1{
  height: 25px;
  width: 59px;
  background:url(../images/more.png);
  position: absolute;
  top: 882px;
  left: 402px;
  text-indent: -9999em;
 }
 .MORE1 a{
  display:block;
  height: 25px;
 }
 .MORE2 { 
  height: 25px;
  width: 59px;
  background:url(../images/more2.png);
  position: absolute;
  top: 868px;
  left: 882px;
  text-indent: -9999em;
 }
 .MORE2 a{
  display:block;
  height: 25px;
 }
 .indexnewscon{
  width: 487px;
  height: 158px;
 /*  background-color: black; */
  position: absolute;
  top:120px;
  left: 0px;
  padding: 0 20px; 
  padding-left: 20px; 
 }
 .newslist li{
  border-bottom: 1px solid #dbele7; 
  padding:10px 0;
  font-size: 1.166em;
  line-height: 20px;
 }
 .newslist li .time { 
  margin-left: 18px; 
  color: #afbecf; 
  font-size: 12px; 
 }
 .stit{
  width: 125px;
  height: 40px;
  position:absolute;
  top:35px;
  left: 68px;
 }
 .stit h1{
  font-size: 28px;
  font-family: 粗体;
  display: block;
  line-height: 34px;
  font-weight: 700px;
  color:#fff;

 }
 .stit p{
  font-family: Roman;
  color:#fff; 
  font-size: 12px;
  margin-left: 3px; 
 }
 .recruit{
  width: 290px;
  height: 180px;
  position:absolute;
  top:100px;
  left: 20px;
 }
 .recruitlist li {
  border-bottom: 1px solid #dbele7;
  font-size: 1.16em;
  line-height: 34px;
  color:#fff;
  font-family: 宋体;
 }

 .recruit h3{ 
  color: #fff; 
 }
 .area{
  width: 958px;
  height: 46px;
  position: absolute;
  top: 10px;
  left: 230px;
  color:#444866;
 }

展开阅读全文

没有更多推荐了,返回首页