腾讯小白结业作业-博客页面

最新推荐文章于 2024-06-20 13:40:39 发布

lmx_xss

最新推荐文章于 2024-06-20 13:40:39 发布

阅读量320

点赞数

本文链接：https://blog.csdn.net/lmx_xss/article/details/70574542

版权

jieye.html

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>笑三少的个人博客页面</title>
<link href=" sviper.css" rel="stylesheet">
</head>
<body>

<div id="tou">
<div id="logo"><a href="#"></a></div>
<nav class="topa" id="topa">
<a href="#"><span>首页</span><span class="en">Portal</span></a>
<a href="#"><span>技术问答</span><span class="en">Technology</span></a>
<a href="#"><span>知识库</span><span class="en">Knowledge</span></a>
<a href="#"><span>个人主页</span><span class="en">Main</span></a>
<a href="#"><span>消息中心</span><span class="en">Message</span></a>
</nav>
</div>


<div class="begin">
<div class="box">
    <ul class="texts">
      <p>web学习，从小白做起;</p>
      <p>然后，假期找个实习;</p>
      <p>毕业，争取成为一只程序猿~</p>
    </ul>
    <div class="star"><a href="#"><span>笑三少</span></a> </div>
</div>
</div>

<div id="middle">
<div id="product">
    <h1>腾讯小白十天训练营总结</h1>
    <p>  经过了在腾讯课堂IMWeb十天紧张的学习，对HTML，CSS有了深刻了解，对网页布局 CSS+DIV有了初步的了解，并能自己做一些简单的响应式图片，网页页面。这十天很充实，以后还有这样的培训我还要继续参加，IMWeb很棒！</p>

</div>
<div id="page">
<ul class="vv">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ul>
</div>
</div>


<div id="footer">
<p>Design by lmx </p>
</div>
</body>
</html>

sviper.css

* { margin: 0; padding: 0 }
body {font: 12px "微软雅黑"; color: #756F71 }

ul {
   list-style: none;
}
a:link {
   text-decoration: none;
   color: #333;
}

.box{
   width:1000px;
   margin:auto;
   overflow:hidden
}

#tou {
   width: 1000px;
   margin: auto;
      height: 80px;
      position: relative;
      overflow: hidden
}
#logo a {
   width: 260px;
   height: 60px;
   margin: 10px 0 0 0;
   position: absolute;
   background: url(jjj.png)
   no-repeat;
   display: block;
}
nav {
   float: right;
   width: 100%;
   margin: 30px 0 0 0;
   text-align: right
}
nav a {
   position: relative;
   display: inline-block;
   font-size: 18px;
   font-family: "微软雅黑";
}
nav a:hover {
text-decoration: none
}
.topa a {
   margin: 0 5px;
   padding: 0 8px;
      }
.topa a span:first-child {
   display: block;
    }
.topa a span:last-child {
   display: block;
   color: #999;
   font: 12px;
   text-align: center
}
.topa a:hover span:last-child, .topnav a:focus span:last-child { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translateY(0%); }

.en {
   color: #999;
   font-size: 12px;
   z-index: 1;
   display: block;
}

.begin {
   background: url(http://pic2.ooopic.com/12/52/76/42bOOOPIC81_1024.jpg) top center;
   height: 265px;
   overflow: hidden
}
.texts {
   width: 350px;
   line-height: 26px;
   margin: 60px 0 0 20px;
   float: left;
   font-size:14px;
}
.star {
   float: right;
   margin: 40px;
   width: 130px;
   height: 130px;
   border-radius: 100%;
   overflow: hidden;
   border: #FFF 4px solid
}
.star a {
   display: block;
   padding-top: 97px;
   width: 160px;
   background: url(2283929cd5860be506139e2fba57d47e_r.jpeg) no-repeat;
   background-size: 130px 130px
}
.star a span {
   display: block;
   margin-top: 63px;
   padding-top: 8px;
   width: 130px;
   height: 55px;
   text-align: center;
   line-height: 20px;
   color: #fff;
   background: rgb(0, 0, 0,);
}
   .star a:hover span {
    display: block;
    margin-top: 0;
}

#middle{
   width: 100%;
   height: 300px;
}
#product{
   width:60%;
   height: 100%;
   margin: 10px;
   margin-left: 40px;
   border: white 1px solid;
   float:left;
   box-shadow:2px 2px 10px #6789ad;
}
#page{
   width: 20%;
   height: 100%;
   border: white 1px solid;
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: 160px;
   float: left;
   box-shadow:2px 2px 10px #6789ad;

}
#footer {
   position: absolute;
   text-align: center;
   line-height: 40px;
   margin-top: 40px;
   border-top: #E8E8E8 1px solid ;
   width:100%;
   padding-top: 10px;
   margin-bottom: 10px;
   }
h1{
   font-size: 35px;
   text-align: center;
}
p{
   font-size: 30px;
}
.vv{
   font-size: 30px;
   text-align: center;
}

lmx_xss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
腾讯小白结业作业-博客页面

jieye.html 笑三少的个人博客页面首页Portal 技术问答Technology 知识库Knowledge 个人主页Main 消息中心Message web学习，从小白做起; 然后，假期找个实习; 毕业，争取
复制链接

扫一扫