这种新闻排版用html代码怎么写

这种新闻排版用html代码怎么写,第1张

<div class="大盒子">                   //总宽

 <div class="第一个小盒子">            //第一个盒子的宽度 要加个左浮动

  <div class="左边的日期">             //左浮动

   <ul>

    <li>五月</li>

    <li>20</li>

   </ul>

  </div>

  <div class="右边的内容">             //左浮动

   <ul>

    <li><h1>新闻标题</h1></li>

    <li><span></span></li>

    <li><p>新闻内容</p></li>

   </ul>

  </div>

 </div>

</div>

再具体的css你自己写吧 不清楚可以再问

<html>

<head>

<title>标题</title>

</head>

<body>

网页的主要内容。。。复制,粘贴到记事本,另存为xxx.html就是以及各最简单的网页了。。

</body>

</html>

<html>

<body>

<div ><table height="33" width="390px">

<tr>

<td height="33" style="align: leftbackground

-color: #ff0000padding-left: 16px">

<span style="font-size: 16px"><span

style="color: rgb(255,255,255)">新闻</span></span></td></tr>

</table></div>

<div id=butong_net_bottom style=overflow:hiddenheight:100width:390>

<div id=butong_net_bottom1>

<li style="list-style-position:outsidepadding-left:20px">当你孤单会想

谁</li>

<li style="list-style-position:outsidepadding-left:20px">你的心情总飞在</li>

<li style="list-style-position:outsidepadding-left:20px">什么事都去追</li>

<li style="list-style-position:outsidepadding-left:20px">烟火</li>

<li style="list-style-position:outsidepadding-left:20px">是否记得一起看烟火你在我眼里三说

</li>

<li style="list-style-position:outsidepadding-left:20px">当年孤单会

</li>

<li style="list-style-position:outsidepadding-left:20px">大家好我是百度

</li>

<li style="list-style-position:outsidepadding-left:20px">大家好我是新浪

</li>

</div>

<div id=butong_net_bottom2></div>

</div>

<script>

var speed=30

butong_net_bottom2.innerHTML=butong_net_bottom1.innerHTML

butong_net_bottom.scrollTop=butong_net_bottom.scrollHeight

function Marquee2(){

if(butong_net_bottom1.offsetTop-butong_net_bottom.scrollTop>=0)

butong_net_bottom.scrollTop+=butong_net_bottom2.offsetHeight

else{

butong_net_bottom.scrollTop--

}

}

var MyMar2=setInterval(Marquee2,speed)

butong_net_bottom.onmouseover=function() {clearInterval(MyMar2)}

butong_net_bottom.onmouseout=function() {MyMar2=setInterval

(Marquee2,speed)}

</script>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7077541.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存