效果图：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
border: 2px solid #ccc;
margin: 20px;
}
.header {
background: #ffcc66;
padding: 10px;
display: flex;
align-items: center;
border-bottom: 2px solid #ddd;
gap: 15px;
}
.header button {
height: 28px;
background: #fff;
border: 1px solid #ccc;
margin-right: 10px;
}
.header a {
text-decoration: none;
color: #333;
margin-right: 10px;
}
.content {
display: flex;
padding: 10px;
}
.logo {
width: 150px;
height: 70px;
background: #ffcc00;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 16px;
}
.line-wrapper {
display: flex;
gap: 10px;
}
.vertical-line {
height: auto;
border-right: 1px solid #ccc;
display: flex;
flex-direction: column;
padding: 5px;
}
.vertical-line ul {
list-style: none;
text-align: center;
}
.vertical-line li {
margin: 2px 0;
text-align: center;
font-size: 14px;
}
.vertical-line li img {
height: 12px;
margin: 0 3px;
}
</style>
<title>实训</title>
</head>
<body>
<div class="wrapper">
<div class="header">
登录名<input type="text" style="width: 100px;">
密码<input type="password" style="width: 100px;" >
<select style="width: 100px;">
<option value="">选择去向</option>
</select>
<button style="width: 50px;">登录</button>
<a>注册通行证</a>
<a>找回密码</a>
<a>客服帮助</a>
<a style="gap: 15px;">企业邮箱 <img src="../img/line.gif" height="15px"></a>
</div>
<div class="content">
<div class="logo">
<img src="../img/搜狐.png" height="100px" width="100px">
</div>
<div class="line-wrapper">
<div class="vertical-line">
<ul>
<li>
<font style="background-color: red;">新闻</font>
<img src="../img/line.gif" style="display: inline-block;"> 军事
<img src="../img/line.gif" style="display: inline-block;"> 社会
</li>
<li>
<font><b>视频</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 博客
<img src="../img/line.gif" style="display: inline-block;"> 大片
</li>
<li>
<font><b>游戏</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 玩玩
<img src="../img/line.gif" style="display: inline-block;"> 交友
</li>
</ul>
</div>
<div class="vertical-line">
<ul>
<li>
<font style="background-color: red;">财经</font>
<img src="../img/line.gif" style="display: inline-block;"> 股票
<img src="../img/line.gif" style="display: inline-block;"> 基金
</li>
<li>
<font><b>房产</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 地产
<img src="../img/line.gif" style="display: inline-block;"> 家居
</li>
<li>
<font><b>城市</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 广东
<img src="../img/line.gif" style="display: inline-block;"> 上海
</li>
</ul>
</div>
<div class="vertical-line">
<ul>
<li>
<font><b>科技</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 手机
<img src="../img/line.gif" style="display: inline-block;"> 数码
</li>
<li>
<font><b>读书</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 教育
<img src="../img/line.gif" style="display: inline-block;"> 健康
</li>
<li>
<font><b>生活</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 旅游
<img src="../img/line.gif" style="display: inline-block;"> 电商
</li>
</ul>
</div>
<div class="vertical-line">
<ul>
<li>
<font><b>体育</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 中超
<img src="../img/line.gif" style="display: inline-block;"> NBA
</li>
<li>
<font><b>女性</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 星座
<img src="../img/line.gif" style="display: inline-block;"> 育儿
</li>
<li>
<font><b>短信</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 商城
<img src="../img/line.gif" style="display: inline-block;"> 彩信
</li>
</ul>
</div>
<div class="vertical-line">
<ul>
<li>
<font><b>娱乐</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 明星
<img src="../img/line.gif" style="display: inline-block;"> 音乐
</li>
<li>
<font><b>乐库</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 尚品
<img src="../img/line.gif" style="display: inline-block;"> 宠物
</li>
<li>
<font><b>健身</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 下载
<img src="../img/line.gif" style="display: inline-block;"> 导航
</li>
</ul>
</div>
<div class="vertical-line">
<ul>
<li>
<font style="background-color: red;">汽车</font>
<img src="../img/line.gif" style="display: inline-block;">图库
<img src="../img/line.gif" style="display: inline-block;">车型
</li>
<li>
<font><b>空间</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 邮箱
<img src="../img/line.gif" style="display: inline-block;"> 出国
</li>
<li>
<font><b>商城</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 天气
<img src="../img/line.gif" style="display: inline-block;"> 爱问
</li>
</ul>
</div>
<div class="vertical-line">
<ul>
<li>
<font><b>博客</b></font>
<img src="../img/line.gif" style="display: inline-block;">微博
<img src="../img/line.gif" style="display: inline-block;">草根
</li>
<li>
<font><b>论坛</b></font>
<img src="../img/line.gif" style="display: inline-block;">
<font>show</font>
<img src="../img/line.gif" style="display: inline-block;"> UC
</li>
<li>
<font><b>空间</b></font>
<img src="../img/line.gif" style="display: inline-block;"> 公益
<img src="../img/line.gif" style="display: inline-block;"> 世博
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
