码迷，mamicode.com
首页 > 其他好文 > 详细

h5-爆料view

时间：2016-05-25 10:43:00      阅读：265      评论：0      收藏：0      [点我收藏+]

标签：

技术分享

 

  <div class="search w">
    <form action="" method="get">
        <input name="" type="text" class="search_input" placeholder="请输入您想要查找的爆料">
        <!-- .search_input { 																.search_submit {
				width: 85%;																		float: left;
				margin: 0px;																	width: 20%;	
				padding-top: 12px;																height: 37px;
				padding-right: 0px;																border-top-width: 0px;
				padding-bottom: 10px;															border-right-width: 0px;
				padding-left: 40px;																border-bottom-width: 0px;
				float: left;																	border-left-width: 0px;	
				border-top-width: 0px;															border-top-style: none;
				border-right-width: 0px;														border-right-style: none;
				border-bottom-width: 0px;														border-bottom-style: none;
				border-left-width: 0px;															border-left-style: none;
				border-top-style: none;															outline: none;
				border-right-style: none;														font-family: Helvetica, "Microsoft YaHei", Arial, Helvetica, sans-serif;
				border-bottom-style: none;														font-size: 14px;
				border-left-style: none;														line-height: 37px;
				outline: none;		/* 元素周围的一条轮廓线 */										color: #FFFFFF;
				font-family: Helvetica, "Microsoft YaHei", Arial, Helvetica, sans-serif;		background-color: #009999;
				font-size: 13px;															}
				color: #666666;
				background-image: url(../images/iconfont-sousuo.png);
				background-repeat: no-repeat;
				background-position: 10px center;  /*图片水平位置,垂直方向的位置 */
				background-size: 20px;  /* 图片大小 */
				width: 80%;
			 }-->
        <input name="" type="button" class="search_submit" value="搜索">
    </form>
  </div>

 技术分享

<div class="bl_view_img"><img src="http://baoliao.178hui.com/upload/2015/0710/12332059693.jpg" /></div>
	<!--   	.bl_view_img {								.bl_view_img img {
			text-align: center;图片居中					max-height: 150px;  图片缩放 
			padding: 10px;							}
		} -->
    <div class="bl_view_title">
    <!-- .bl_view_title {
			padding: 10px;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #F2F2F2;
			font-size: 14px;
			color: #333333;
			line-height: 22px;  行距
		} -->
	    <span class="bl_type">白菜</span>
	    <!-- .bl_type {
				font-size: 10px;
				color: #FFFFFF;
				padding-top: 2px;
				padding-right: 5px;
				padding-bottom: 1px;
				padding-left: 5px;
				border-radius: 5px;
				background-color: #ff3030;
				margin-right: 2px;
			} -->
	    <span class="bl_type" style="background-color:#53bf1e;">活动</span>
	    <span class="bl_type" style="background-color:#00bb9c;">优质</span>
	         韩国现代（HYUNDAI) BD-YS2003 多功能养生壶 煎药壶2.0L 
    </div>

 

技术分享

    <div class="bl_view_note">手机端：99元包邮</div>
    <!-- .bl_view_note {
			font-size: 14px;
			color: #FF6600;
			padding: 10px;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #F2F2F2;
			line-height: 22px;
		} -->
    <div class="bl_view_tag">
    <!-- .bl_view_tag {
			font-size: 12px;
			line-height: 40px;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #F2F2F2;
			height: 40px;
			padding-right: 1%;
			padding-left: 1%;
		} -->
   		<div class="bl_view_price">￥99.00</div>
   		<!-- .bl_view_price {
				font-size: 16px;
				color: #FF3300;
				float: left;
				margin-left: 1%;
			} -->
        <div class="bl_view_oprice">￥138.00</div>
                <!-- .bl_view_oprice {
						font-size: 12px;
						color: #666666;
						text-decoration: line-through;
						text-align: right;
						float: left;
						margin-left: 5%;
					} -->
        <div class="bl_view_mall">商城：京东商城</div>
        <!-- .bl_view_mall {
					font-size: 12px;
					text-align: center;
					float: right;
					color: #666666;
					margin-right: 1%;
				} -->
    </div>
    <div class="bl_view_tag">
    	<div class="bl_view_user">爆料者：xye1**</div>
    	<!-- .bl_view_user {
				font-size: 12px;
				color: #666666;
				text-align: left;
				float: left;
				margin-left: 1%;
			} -->
        <div class="bl_view_time">人气：360次浏览</div>
        <!-- .bl_view_time {
				font-size: 12px;
				color: #666666;
				text-align: right;
				float: right;
				margin-right: 1%;
			} -->
    </div>
    <div class="bl_view_tag">
    	<div class="bl_view_user">喜欢：2人喜欢</div>
        <div class="bl_view_time">时间：2015-07-10 12:33:36</div>
    </div>
    <div class="go_buy"><a href="#">直达链接</a></div>
    <!-- .go_buy {						.go_buy a {
			line-height: 40px;				color: #FFFFFF;
			height: 40px;					background-color: #00bb9c;
			text-align: center;				text-align: center;
		}									line-height: 40px;
											float: left;
											width: 100%;
											text-decoration: none;
											font-size: 16px;
										}
		 -->
  </div>

 技术分享

  <div class="bl_view_content w">
  	<h1>推荐理由<span>优质爆料QQ群①：186666517</span></h1>
  	<!-- .bl_view_content h1 {					.bl_view_content h1 span {
			font-size: 16px;						float: right;
			font-weight: normal;					font-size: 12px;
			color: #FF6600;							color: #999999;
			line-height: 45px;						margin-right: 5px;
			border-bottom-width: 1px;			}	
			border-bottom-style: solid;
			border-bottom-color: #F3F3F3;
			text-indent: 10px;
			margin: 0px;
			padding: 0px;
		} -->
    <div class="bl_view_word">
    <!-- .bl_view_word {
			padding: 10px;
			font-size: 14px;
			color: #666666;
			line-height: 22px;
			overflow: hidden;
		} -->
		<p>
		<!-- .bl_view_word p {			.bl_view_word a {
				margin-top: 5px;			color: #00bb9c;
				margin-right: 0px;			text-decoration: none;
				margin-bottom: 5px;		}
				margin-left: 0px;
			} -->
			飞利浦PHILIPS LED球泡5W/E27日光色4连包，<a href="#">京东商城售价109元</a>，可以参加满200-60的活动，例如凑单2套，
			折合79元/套，不到20元/个，其它渠道都在39元/个左右。
		</p>
		<p>
			飞利浦PHILIPS LED球泡5W/E27日光色4连包，功率为5W，色温：6500K，家庭装修、商场、展示厅、酒店、办公室等，
			可直接替换相同灯座的灯泡。
		</p>      
		<p>
			特步男鞋跑步鞋男士运动鞋新款休闲鞋网面透气跑步鞋减震超轻慢跑鞋男 灰黄 42
		</p>
		<p>
			<strong>京东6月17日活动秒杀  10点 61.8元秒杀</strong>
		</p>
		<p>
			<img src="http://baoliao.178hui.com/upload/shaidan/20150617/1434503287905.jpg" _
			src="http://baoliao.178hui.com/upload/shaidan/20150617/1434503287905.jpg" />
		</p>         
		<p>
			<a href="http://jump.178hui.com/index.php?mod=jump&act=url&url=http%3A%2F%2Fsale.jd.com%2Fact%2FRS4tPQI3DuHor.html&uid=12405"
				rel="nofollow" target="_blank">
			 	<img src="http://baoliao.178hui.com/upload/shaidan/20150616/14344169658370.jpg" _
			 	src="http://baoliao.178hui.com/upload/shaidan/20150616/14344169658370.jpg" />
			</a>
		</p> 
    </div>
  </div>

 技术分享

  <div class="bl_comment w">
 	 <h1>猜您还喜欢</h1>
 	 <!-- .bl_comment h1 {
			font-size: 14px;
			font-weight: normal;
			color: #666666;
			margin: 0px;
			line-height: 40px;  h1的高度就确定了
			padding-left: 10px;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #F6F6F6;
		} -->
     <div class="comment_list">
     <!-- .comment_list {
			padding: 10px;
			font-size: 12px;
			color: #666666;
		} -->
     	<ul class="ui-list ui-border-tb">  
            <li>
                <div class="ui-list-thumb ui-avatar-s">
                   <span><img src="http://baoliao.178hui.com/upload/2015/0710/12332059693.jpg" /></span>                
                </div>
                <div class="ui-list-info ui-border-t">
                    <h4>韩国现代（HYUNDAI) BD-YS2003 多功能养生壶 煎药壶2.0L </h4>
                    <p>手机端：99元包邮</p>
                    <p style="color:#FF6600">￥99元</p>
                </div>
            </li>
            <li>
                <div class="ui-list-thumb ui-avatar-s">
                    <span><img src="http://baoliao.178hui.com/upload/2015/0710/12332059693.jpg" /></span>                </div>
                <div class="ui-list-info ui-border-t">
                    <h4>韩国现代（HYUNDAI) BD-YS2003 多功能养生壶 煎药壶2.0L </h4>
                    <p>手机端：99元包邮</p>
                    <p style="color:#FF6600">￥99元</p>
              </div>
            </li>
            <li>
                <div class="ui-list-thumb ui-avatar-s">
                    <span><img src="http://baoliao.178hui.com/upload/2015/0710/12332059693.jpg" /></span>                </div>
                <div class="ui-list-info ui-border-t">
                    <h4>韩国现代（HYUNDAI) BD-YS2003 多功能养生壶 煎药壶2.0L </h4>
                    <p>手机端：99元包邮</p>
                    <p style="color:#FF6600">￥99元</p>
              </div>
            </li>
            <li>
                <div class="ui-list-thumb ui-avatar-s">
                    <span><img src="http://baoliao.178hui.com/upload/2015/0710/12332059693.jpg" /></span>                </div>
                <div class="ui-list-info ui-border-t">
                    <h4>韩国现代（HYUNDAI) BD-YS2003 多功能养生壶 煎药壶2.0L </h4>
                    <p>手机端：99元包邮</p>
                    <p style="color:#FF6600">￥99元</p>
              </div>
            </li>
            
            <li>
                <div class="ui-list-thumb ui-avatar-s">
                    <span><img src="http://baoliao.178hui.com/upload/2015/0710/12332059693.jpg" /></span>                </div>
                <div class="ui-list-info ui-border-t">
                    <h4>韩国现代（HYUNDAI) BD-YS2003 多功能养生壶 煎药壶2.0L </h4>
                    <p>手机端：99元包邮</p>
                    <p style="color:#FF6600">￥99元</p>
              </div>
            </li>
        </ul>
     </div>
  </div>

 技术分享

  <div class="pl_icon"></div>  <!-- 评这个字 -->
  <!-- .pl_icon {
			background-image: url(../images/iconfont-fzst-ping.png);
			background-repeat: no-repeat;
			background-size: 40px;
			height: 40px;
			width: 40px;
			position: fixed;
			right: 10px;
			bottom: 100px;
		} -->
  <div class="bl_pinlun w">
	<form action="" method="get">
		<input name="" type="text" placeholder="我来说一句" class="pinlun_input">
		<!-- .pinlun_input {
				float: left; 
				width: 75%;  
				border-top-width: 0px;
				border-right-width: 0px;
				border-bottom-width: 0px;
				border-left-width: 0px;
				border-top-style: none;
				border-right-style: none;
				border-bottom-style: none;
				border-left-style: none;
				font-size: 14px;
				color: #333333;
				font-family:Helvetica, "Microsoft YaHei", Arial, Helvetica, sans-serif;
				outline: none;
				padding-left: 42px;  输入框里面文字的左边距
				padding-right: 10px; 输入框里面文字的右边据
				padding-top: 15px;  输入框里面的上边距
				padding-bottom: 10px; 输入框里面的下边据
				background-image: url(../images/iconfont-pinglun.png);  输入框里面前面的小图标
				background-repeat: no-repeat;
				background-size: 25px;  小图标的大小
				background-position: 10px center;  小图标的x,y位置
			} -->
		<input name="" type="button" class="pinlun_submit" value="发表评论">
		<!-- .pinlun_submit {
				line-height: 40px;  里面文字垂直居中
				color: #FFFFFF;
				height: 40px;  高度
				width: 25%;   宽度
				border-top-width: 0px;
				border-right-width: 0px;
				border-bottom-width: 0px;
				border-left-width: 0px;
				border-top-style: none;
				border-right-style: none;
				border-bottom-style: none;
				border-left-style: none;
				font-family:Helvetica, "Microsoft YaHei", Arial, Helvetica, sans-serif;
				outline: none;
				background-color: #7fc242;
			} -->
	</form>
  </div>
  <div class="no_login w">您需要登录才能发表牛评哦！<a href="#">马上登录</a><a href="#">免费注册</a></div>
  <!-- .no_login {																	.no_login a {			
			line-height: 45px;   div的line-height能够改变div的高度并且文字垂直居中			margin-left: 15px;
			text-align: center;  div里面的文字水平居中									}	
			color: #333333;
		} -->
  <div class="bl_comment w">
  	<h1>TA们的牛评（10）</h1>
  	<!-- .bl_comment h1 {
			font-size: 14px;
			font-weight: normal;
			color: #666666;
			margin: 0px;
			line-height: 40px;
			padding-left: 10px;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #F6F6F6;
		} -->
    <div class="comment_list">
    <!-- .comment_list {
			padding: 10px;
			font-size: 12px;
			color: #666666;
		} -->
    	<ul>
        	<li>
        	<!-- .comment_list li {
					float: left;
					border-bottom-width: 1px;
					border-bottom-style: dashed;
					border-bottom-color: #CCCCCC;
					width: 100%;
					padding-bottom: 10px;
					margin-bottom: 10px;
				} -->
       	  	  <div class="pl_user_img"><img src="http://baoliao.178hui.com/upload/avatar/0000/0015/24_avatar_middle.jpg" /></div>
       	  	  <!-- .comment_list  .pl_user_img {		.comment_list  .pl_user_img  img {
						float: left;						height: 30px;
						height: 30px;						width: 30px;
						width: 30px;						border-radius: 50%;
						overflow: hidden;				}
						border-radius: 50%;
					} 																		
					
					
					-->
              <div class="pl_user_top">
              <!-- .comment_list .pl_user_top {
						float: left;
						width: 50%;
						line-height: 30px;
						max-width: 98%;
					} -->
                  <div class="pl_user_name">xxx198**</div>
                  <!-- .comment_list  .pl_user_name {
							float: left;
							margin-left: 10px;
							color: #0099CC;
							font-size: 12px;
						} -->
                  <div class="pl_user_time">6天前</div>
                  <!-- .comment_list .pl_user_time {
							float: left;
							margin-left: 10px;
							color: #999999;
							font-size: 12px;
						} -->
              </div>
              <div class="pl_user_comment">可以一个号多撸，不限次数，大家悠着点，别整黑号了。可以一个号多撸，不限次数，大家悠着点，别整黑号了。</div>
              <!-- .comment_list .pl_user_comment {
					width: 97%;
					margin-top: 5px;
					padding-left: 2.2%;
					float: left;
					text-align: justify;
					line-height: 22px;
					font-size: 12px;
				} -->
            </li>
            <li>
       	  	  <div class="pl_user_img"><img src="http://baoliao.178hui.com/upload/avatar/0000/0015/24_avatar_middle.jpg" /></div>
              <div class="pl_user_top">
                  <div class="pl_user_name">xxx198**</div>
                  <div class="pl_user_time">6天前</div>
              </div>
              <div class="pl_user_comment">可以一个号多撸，不限次数，大家悠着点，别整黑号了。可以一个号多撸，不限次数，大家悠着点，别整黑号了。</div>
            </li>
            <li>
       	  	  <div class="pl_user_img"><img src="http://baoliao.178hui.com/upload/avatar/0000/0015/24_avatar_middle.jpg" /></div>
              <div class="pl_user_top">
                  <div class="pl_user_name">xxx198**</div>
                  <div class="pl_user_time">6天前</div>
              </div>
              <div class="pl_user_comment">可以一个号多撸，不限次数，大家悠着点，别整黑号了。</div>
            </li>
            <li>
       	  	  <div class="pl_user_img"><img src="http://baoliao.178hui.com/upload/avatar/0000/0015/24_avatar_middle.jpg" /></div>
              <div class="pl_user_top">
                  <div class="pl_user_name">xxx198**</div>
                  <div class="pl_user_time">6天前</div>
              </div>
              <div class="pl_user_comment">可以一个号多撸，不限次数，大家悠着点，别整黑号了。可以一个号多撸，不限次数，大家悠着点，别整黑号了。</div>
            </li>

 

h5-爆料view

标签：

原文地址：http://www.cnblogs.com/yaowen/p/5525876.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！