求帮忙看一下这个用html5怎么写
发布网友
发布时间：2022-04-26 16:57
共4个回答
热心网友
时间：2023-10-15 16:21
应该是你想要的，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,h3{
margin: 0;
padding: 0;
}
#top ul,#top li{
margin: 0;
padding: 0;
float: right;
list-style: none;
margin-right: 20px;
}
#top ul li a{
color: #000000;
}
#top{
width: 100%;
height: 30px;
border: 1px solid transparent;
}
.hx{
margin-left: 15px;
}
#content ul {
width: 100%;
text-align: center;
}
#content ul .con{
list-style: none;
position: relative;
width: 25%;
height: 300px;
float: left;
}
#content ul .con img{
width:50%;
height: 75%;
}
#content ul .con ul li{
list-style: disc;
text-align: left;
margin-left: 90px;
margin-bottom: 6px;
}
#content ul .con ul li a{
color: #000000;
}
#content ul .con .bq{
position: absolute;
width: 100%;
height: 20px;
top: 200px;
left: -120px;
text-align: right;
font-weight: bold;
font-size: 20px;
line-height: 20px;
}
</style>
</head>
<body>
<h3>原创</h3>
<div id="top">
<ul>
<li><a href="#">更多</a></li>
<li><a href="#">彩虹计划</a><span class="hx">|</span></li>
<li><a href="#">5事拍客</a><span class="hx">|</span></li>
<li><a href="#">上传作品</a><span class="hx">|</span></li>
</ul>
</div>
<div id="content">
<ul>
<li class="con">
<img src="img/6409FMHW55E.jpg" >
<span class="bq">高清</span>
<ul>
<li><a href="#">大学洗去了我们的青涩</a></li>
<li><a href="#">猪猪</a></li>
<li>201591</li>
</ul>
</li>
<li class="con">
<img src="img/6409FMHW55E.jpg" >
<span class="bq">高清</span>
<ul>
<li><a href="#">大学洗去了我们的青涩</a></li>
<li><a href="#">猪猪</a></li>
<li>201591</li>
</ul>
</li>
<li class="con">
<img src="img/6409FMHW55E.jpg" >
<span class="bq">高清</span>
<ul>
<li><a href="#">大学洗去了我们的青涩</a></li>
<li><a href="#">猪猪</a></li>
<li>201591</li>
</ul>
</li>
<li class="con">
<img src="img/6409FMHW55E.jpg" >
<span class="bq">高清</span>
<ul>
<li><a href="#">大学洗去了我们的青涩</a></li>
<li><a href="#">猪猪</a></li>
<li>201591</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
热心网友
时间：2023-10-15 16:22
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.flex {
display: flex;
}
.between {
justify-content: space-between;
}
div a {
padding: 0 10px;
border-right: 1px solid black;
}
div a:last-child {
border-right-width: 0;
}
.red {
color: red;
}
ul p {
font-weight: bold;
}
img {
width: 100%;
height: 90px;
}
</style>
</head>
<body>
<h2>原创</h2>
<header class="flex between">
<div></div>
<div>
<a href="">上传作品</a>
<a href="">上传作品</a>
<a href="">上传作品</a>
<a href="">上传作品</a>
</div>
</header>
<main class="flex between">
<div>
<img src="http://iconfont.alicdn.com/t/1550898018467.jpeg@100h_100w.jpg" alt="">
<div class="flex between">
<div></div>
<span>超清</span>
</div>
<ul>
<li>
<a href="">大学洗去了我们的青涩</a>
</li>
<li>
<a href="">猪猪<span class="red">正</span></a>
</li>
<li>
<p>201,591</p>
</li>
</ul>
</div>
<div>
<img src="http://iconfont.alicdn.com/t/1550898018467.jpeg@100h_100w.jpg" alt="">
<div class="flex between">
<div></div>
<span>超清</span>
</div>
<ul>
<li>
<a href="">大学洗去了我们的青涩</a>
</li>
<li>
<a href="">猪猪<span class="red">正</span></a>
</li>
<li>
<p>201,591</p>
</li>
</ul>
</div>
<div>
<img src="http://iconfont.alicdn.com/t/1550898018467.jpeg@100h_100w.jpg" alt="">
<div class="flex between">
<div></div>
<span>超清</span>
</div>
<ul>
<li>
<a href="">大学洗去了我们的青涩</a>
</li>
<li>
<a href="">猪猪<span class="red">正</span></a>
</li>
<li>
<p>201,591</p>
</li>
</ul>
</div>
</main>
</body>
</html>
请采纳
热心网友
时间：2023-10-15 16:22
热心网友
时间：2023-10-15 16:23
