仿写静态微博界面

于 2018-08-09 09:18:34 发布
阅读量1.2k 收藏 5
点赞数 1
分类专栏： css&html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42313071/article/details/81530458
版权

本次仿写的微博界面主要就是练习HTML和css的一些基本操作；例如：插入图片，使用盒子模型及其嵌套；

整个页面的布局；如何使用图标库font Awesome等。下面为微博界面代码：

<!DOCTYPE html>
 <!--[if lt IE ]> <html class="no-js lt-ie9 lt-ie8 lt-ie"> <![endif]-->
 <!--[if IE ]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
 <style type = "text/css">
 body{
 background-color:white;
 background-image:url('../task/photo/sky.jpg');
 background-attachment:fixed;
 background-position:200px 0px;
 }
  
 .main ul{
  
 list-style-type:none;
  
 display:inline;
 }
  
 .main ul li
 {
 color:black;
 text-decoration:none;
 text-align:center;
 display: inline;
  
 font-size:15px;
 margin:0;
 pagging:10px 40px;
 word-spacing:20px;
 }
 .main a{
 text-decoration:none;
 }
  
 .p2{
 position:relative;
 top:-20px;
 width:300px;
 heigth:50px;
 line-heigth:0px;
 border:1px solid transparent;
 color:red;
 font-size:12px;
 }
 h3{
 font-size:15px;
 }
  
 p5{
 color:gray ;
 font-size:.835em;
 }
  
 .touxian{
 border-bottom:5px solid red;
 }
 .weibo
 {
 position:absolute;
 top:6px;
 left:100px;
 }
 .find
 {
 position:absolute;
 top:3px;
 left:210px;
 z-index:100;
 text-align: left;
 display: -webkit-flex;
 -webkit-align-items: center;
 align-items: center;
 background-color:lightgray;
 background-color:rgba(255,255,255,0.8);
 width:345px;
 height:10px;
 margin:5px auto;
 padding:10px 20px 10px 20px;
 border:1px solid darkgray;
 color:gray;
 }
 .main
 {
 position:absolute;
 top:8px;
 right:0;
 z-index:100;
 text-align: right;
 background-color:white;
 width:97%;
 height:30px;
 margin:0 auto;
 right:0;
 padding:10px 20px 10px 20px;
 border:1px solid transparent;
 }
 .p4 ul{
  
 list-style-type:none;
 display:inline;
 }
  
 .p4 ul li
 {
 text-decoration:none;
 display: inline;
 font-size: 13px;
 word-spacing: 10px;
 }
  
 .p4{
 position:absolute;
 top:50px;
 color:black;
 width:550px;
 heigth:50px;
 border:1px solid transparent;
 margin:80px -50px;
 }
  
 .p1
 {
 color:blue;
 font-size:16px;
 font-family: STXingkai ;
 }
 .contain {
 position:absolute;
 top:22px;
 right:10px;
 background-color:white;
 width:550px;
 height:145px;
 margin:0 25%;
 padding:10px 20px 10px 20px;
 border:1px solid white;
  
 }
 .inner_contain {
 position:absolute;
 top:12px;
 width:530px;
 height:70px;
 border:1.2px solid lightgray;
 margin-left:50px;
 margin:30px auto;
 }
 .xiao{
 text-align:center;
 background-color:tomato;
 color:white;
 width:60px;
 height:25px;
 border:1px ;
 margin:-25px -30px;
 }
 .contain{margin-top:0}
 .box22{
 margin:-25px -35px;
 word-spacing: 20px;
 }
 .box2 ul{
 list-style-type:none;
 color:black;
 }
  
 .box2 ul li
 {
  
 text-decoration:none;
 text-align:center;
 display: inline;
 font-size:13px;
 word-spacing:10px;
 }
 .box2 a{
 text-decoration:none;
 }
 .box2
 {
 background-color: white;
 width:550px;
 height:20px;
 margin:130px auto;
 margin-left: -22px;
 padding:10px 20px 10px 20px;
 border:1px solid transparent;
 }
  
 #box3{
 width:150px;
 height:10px;
 margin:-5px;
 padding:10px 20px 10px 20px;
 border:1px solid lightgray;
 color:gray;
 font-size:13px;
 display: -webkit-flex;
 align-items:center;//垂直居中
 -webkit-justify-content: center;
 }
 .mask p{
 font-size: 13px;
 }
 .mask{
 position:absolute;
 left:0px;
 background-color:white;
 width:550px;
 height:582px;
 margin:45px -2px;
 padding:10px 20px 10px 20px;
 border:1px solid white;
 text-align:center;
 color:black;
 }
  
 .tou{
 position:absolute;
 top:40px;
 right:100px;
 }
 .yhm{
 margin:25px;
 word-spacing: 20px;
 line-height: 0px;
  
 }
 .yonghu{
 position:absolute;
 top:-231px;
 right:-247px;
 background-color:white;
 width:235px;
 height:165px;
 text-align: center;
 border:1px solid transparent;
  
  
 }
 .box li a{
 color:white;
 font-size:15px;
 text-decoration: none;
  
 line-height: 30px;
 margin-left:-40px;
 }
 .box
 {
 position:relative;
 top:22px;
 left:-30px;
 color:white;
 background-color:white;
 background-color: rgba(255, 255, 255, 0.1);
 text-decoration: none;
 width:76%;
 height:800px;
 margin:20px auto;
 padding:10px 20px 10px 20px;
 border:1px solid transparent;
  
 }
 .xuxian{
 border-bottom:1px solid lightgray;
 width:150px;
 margin-left:-60px;
 }
 h4{
 font-size:14px;
 }
 .film{
 position:absolute;
 top:-55px;
 right:-246px;
 float:right;
 background-color:white;
 width:235px;
 height:320px;
 border:1px solid white;
 word-spacing: 95px;
 text-align:center;
 line-height: 5px;
 }
 .text{
 position:absolute;
 top:60px;
 right:0;
 font-size:13px;
 }
 .photo{
 width:100%;
 height:170px;
  
 }
 .shixian{
 border-bottom:1px solid lightgray;
 width:235px;
 margin-left:0;
 }
 .huati{
 position:absolute;
 top:335px;
 background-color:white;
 width:235px;
 height:320px;
 border:1px solid white;
 word-spacing: 15px;
 list-style-type:none;
 }
 .ming{
  
 text-align: left;
 margin:0px;
 font-size: 13px;
 color:gray;
 line-height: 25px;
 }
 .shuju{
  
 text-align: right;
 margin:-240px 10px;
 font-size: 13px;
 color:gray;
 line-height: 25px;
 }
 </style>
 <title>我的首页-微博-随时随地发现新鲜事</title>
 </head>
 </head>
 <body>
 <!--[if lt IE ]>
 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
 <![endif]-->
 <div class="touxian"></div>
 <div class="main">
 <ul>
 <li><a href="#"><span style="color:red"><i class="fa fa-home fa-2g"></i>首页</span> </a> </li>
 <li><a href="#"><span style="color:black"><i class="fa fa-camera-retro fa-2g"></i>视频 </span> </a></li>
 <li><a href="#"><span style="color:black"><i class="fa fa-compass fa-2g"></i>发现 </span> </a></li>
 <li><a href="#"><span style="color:black"><i class="fa fa-gamepad fa-2g"></i>游戏 </span> </a></li>
 <li><a href="#"><span style="color:black"><i class="fa fa-user-o fa-2g"></i>用户171547956
 <i class="fa fa-envelope-o fa-2g"></i> <i class="fa fa-gear fa-2g"></i></span>
 <span style="color:red"> <i class="fa fa-edit fa-2g"></span></i> &nbsp; </a></li>
 <div align=left> <div class="weibo"><img src="../task/photo/top.png" /> </div>
 <div class="find">大家正在搜:延禧攻略<div align=right> <i class="fa fa-search fa-1x"></i></div>
 </ul></div>
 <div class="box">
 <ul>
 <li><a href="#"> <span style="font-weight:bold"> 首页</span></a> </li>
 <li><a href="#"> <span style="font-weight:bold">我的收藏 </span></a></li>
 <li><a href="#"> <span style="font-weight:bold">我的赞 </span></a></li><br><div class="xuxian"></div><br>
 <li><a href="#"> <span style="font-size:13px"> <img src="../task/photo/hot.png">热门微博 </span></a></li>
 <li><a href="#"> <span style="font-size:13px"> <i class="fa fa-camera-retro fa-1x"></i>热门视频 </span></a></li><br>
 <div class="xuxian"></div><br>
 <li><a href="#"> <span style="font-size:13px"> <i class="fa fa-gratipay fa-1x"></i>好友圈</span></a></li>
 <li><a href="#"> <span style="font-size:13px"><i class="fa fa-heartbeat fa-1x"></i> 特别关注</span> </a></li>
 <li><a href="#"> <span style="font-size:13px"><i class="fa fa-vimeo fa-1x"> </i>v+微博 </span></a></li>
 <li><a href="#"> <span style="font-size:13px"> <img src="../task/photo/point.png"/>明星 </span></a></li>
 <li><a href="#"> <span style="font-size:13px"><img src="../task/photo/point.png"/>高校</span> </a></li>
 <li><a href="#"> <span style="font-size:13px"><img src="../task/photo/point.png"/>名人明星</span> </a></li>
 <li><a href="#"> <span style="font-size:13px"><i class="fa fa-user-circle-o fa-1x"></i> 群微博 </span></a></li>
 <li><a href="#"> <span style="font-size:13px"> <i class="fa fa-leaf fa-1x"></i>悄悄关注 </span></a></li>
 <div class="xuxian"></div>
 <ul>
 <div class="contain">
 <div align=left><div class="p1">有什么新鲜事想告诉大家？</div>
 <div align=right><div class="p2">聊天记录将成为有效证据，你怎么看？ 热门微博</div>
 <div class="inner_contain"> </div>
 <div align=left><div class="p4"> <ul>
 <li><span style="color:orange"><i class="fa fa-smile-o fa-2g"></i></span>表情 </li>
 <li><span style="color:green"><i class="fa fa-photo fa-2g"></i></span>图片 </li>
 <li><span style="color:deepskyblue"><i class="fa fa-video-camera fa-2g"></i></span>视频 </li>
 <li><span style="color:blue"><i class="fa fa-hashtag fa-2g"></i></span>话题 </li>
 <li><span style="color:orange"><i class="fa fa-bolt fa-2g"></i></span>头条文章 <span style="font-size:20px">... </span></li>
 <li> 公开 <div align=right><div class="xiao"> 发布</div></li>
 </ul></div>
 </div>
 <div class="box2">
 <div align=right><div id=box3><p>搜索我关注人的微博 <i class="fa fa-search fa-1x"></i></p></div>
 <div align=left><div class="box22"><ul><li><span style="font-weight:bold">全部</span></li> <li> 原创</li> <li> 图片</li>
 <li> 视频</li> <li> 音乐</li> <li> 文章</li></ul></div>
 </div>
 <div class="mask">
 <div align=left><li><span style="color:orange"><i class="fa fa-lightbulb-o fa-1x"></span></i>热门</li>
 <h3>西安邮电大学</h3>
 <p><span style="font-size:10px">月2日23：45 来自iPhone客户端</span></p><br>
 <p><span style="color:red;">#晚安西邮#</span>生活就像一张床，它只想让你伏在它身上，听听它的声音，
 当你休息好了，听够了，随时可以站起来。世界就像一堵墙，我们就像一只猫，我必须要在这个墙上留下我的抓痕，
 在此之前，我才不会把爪子对向自己。——韩寒，晚安（via十点读书）
 </p>
 <img src="../task/photo/xiyou.jpg" width="442" height="343"/>
 </div>
 <div class="yonghu">
 <div class="tou">
 <img src="../task/photo/tou.png" width="60" height="60"/></div>
 <img src="../task/photo/001.jpg" width="235" height="85"/><br>
 <div class="yhm">
 <p><span position="relative:bottom;">用户115495 </span></p>
 <p><span position="relative:left;">157 1 1&nbsp;</span></p>
 <p><span style="font-size:13px">关注 粉丝 微博</span></p></div>
 </div>
 <div class="film">
 <h4>微博热议榜 <span style="font-weight:normal"> 换一换<i class="fa fa-undo fa-1x"></i></span></h4>
 <div class="shixian"></div>
 <div align=left> <div class="photo"><br> <img src="../task/photo/mo.jpg" width="100px" height="130px"/><br>
 <br><br><p><span style="color:red;">2、</span>我不是药神 96.7</p><br><div class="shixian"></div><br>
 <p><span style="color:red;">3、</span>邪不压正 94.6</p><br><div class="shixian"></div>
 <br><div align=center> <p> 查看更多></p>
 </div>
 <div class="text">
 <h4><span style="color:red;">1、</span><span style="font-weigth:bold">摩天营救</span></h4>
 <p> <span style="color:gray">导演：罗森.马歇尔.瑟伯<br><br><br>主演：道恩.强森/巴<br> <br><br><br> 97.4</span></p> </div>
  
 </div>
 <div align=left><div class="huati">
 <h4>热门话题 <span style="font-weight:normal">&nbsp;&nbsp;&nbsp;&nbsp;换一换<i class="fa fa-undo fa-1x"></i></span></h4><div class="shixian"></div>
 <div class="ming">
 <li>#剧版镇魂# </li>
 <li>#请镇魂编剧改行# </li>
 <li>#延禧攻略#</li>
 <li>#镇魂结局一起死了# </li>
 <li>#明日之子# </li>
 <li>#亚洲新歌榜# </li>
 <li>#面对性侵不该沉默#</li>
 <li>#公益圈me too# </li></div><div class="shixian"></div>
 <span style="font-size:13px"><br><br><div align=center>查看更多</span><br><br><br>
 <br><br><div class="shixian"></div>
 <div class="shuju"><li> 110.6亿</li> <li> 3777万</li> <li>10.3亿</li> <li>2486万</li>
 <li>114.5亿</li> <li> 490亿</li><li>1377万</li> <li>1亿</li></div>
  
 </div>
 </div>
 <script src="" async defer></script>
 </body>
 </html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值