页⾯制作——HTML的单元作业【云阅读的畅销书排⾏榜效果
图,请写出其中的HTML代码】
html网页设计的标题原图
效果图
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.readtop{width: 270px;}
.
prompt1{border:1px solid #db3340;font-weight:400 ; padding-left:5px; padding-right: 5px; cursor: hand; color: #db3340;}
.prompt{border:1px solid #ccc; padding-left: 5px;padding-right: 5px;}
li{list-style:none;padding:5 5 5 5;line-height:50px; font-weight: bold;}
.top1{font-weight:700;}
.top{border-top:1px dashed #ccc;}
a:hover{color:#db3340;}
a{cursor:pointer;}
</style>
</head>
<body>
<ul class="readtop">
<li class="top1">图书畅销榜</li>
<li class="top">
<span class="prompt1"><strong>1</strong></span> <a title="当我⾜够好,才会遇见你">当我⾜够好,才会遇见你</a>
</li>
<li class="top"><span class="prompt1"><strong>2</strong></span> <a title="⽪囊">⽪囊</a></li>
<li class="top"><span class="prompt1"><strong>3</strong></span> <a title="当我⾜够好,才会遇见你">李光耀论中国与世界</a></li> <li class="top"><span class="prompt"><strong>4</strong></span> <a title="乖,摸摸头">乖,摸摸头</a></li>
<li class="top"><span class="prompt"><strong>5</strong></span> <a title="男⼥内参">男⼥内参</a></li>
</ul>
</body>
</html>
这个css样式,不适合在项⽬中使⽤,⾓度不够⾼
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论