361 lines
10 KiB
HTML
361 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2389461_e4bex6gjme7.css">
|
||
<style>
|
||
body,
|
||
ul,
|
||
li,
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6,
|
||
p {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.box {
|
||
background: red;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.box p {
|
||
color: #fff;
|
||
}
|
||
|
||
.box_2 {
|
||
width: 50px;
|
||
}
|
||
|
||
.box_2 p {
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.align {
|
||
text-align: center;
|
||
}
|
||
|
||
.user img {
|
||
width: 50px;
|
||
height: 50px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.search {
|
||
width: 160px;
|
||
height: 36px;
|
||
border: none;
|
||
outline: none;
|
||
border-radius: 18px;
|
||
padding-left: 16px;
|
||
padding-right: 39px;
|
||
box-sizing: border-box;
|
||
background: #f2f2f2 url("./search.png") no-repeat 127px center;
|
||
background-size: 12px;
|
||
}
|
||
|
||
.menu {
|
||
height: 34px;
|
||
background: #96b97d;
|
||
}
|
||
|
||
.center {
|
||
width: 1260px;
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.menu li {
|
||
float: left;
|
||
line-height: 34px;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.menu li a {
|
||
color: #fff;
|
||
}
|
||
|
||
.menu li a:hover {
|
||
color: #e3efd9
|
||
}
|
||
|
||
.menu_list {
|
||
width: 1024px;
|
||
padding: 12px 20px;
|
||
border: 1px solid #eaeaea;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
.menu_list li {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.menu_title {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
margin: 12px 0;
|
||
border-bottom: 1px solid #eaeaea;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.menu_title i {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.item li {
|
||
padding: 6px 16px;
|
||
background-color: #f6f6f6;
|
||
border-radius: 5px;
|
||
color: #bbb;
|
||
margin: 0 8px 10px 0;
|
||
width: 28%;
|
||
float: left;
|
||
}
|
||
|
||
.item h4 {
|
||
color: #64854c;
|
||
font-size: 16px;
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
line-height: 1.1;
|
||
}
|
||
.des {
|
||
overflow: hidden;
|
||
}
|
||
.des img {
|
||
width: 36px;
|
||
height: 36px;
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
float: left;
|
||
padding-top: 6px;
|
||
}
|
||
.des span {
|
||
color: #666;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
|
||
<div class="box">
|
||
<p>line-height 垂直居中</p>
|
||
</div>
|
||
|
||
<div class="box_2">
|
||
<p>text-overflow 的案例</p>
|
||
</div>
|
||
|
||
<div class="align">
|
||
<p>text-align测试1</p>
|
||
<p>text-align测试2</p>
|
||
</div>
|
||
|
||
<div class="user">
|
||
<img src="https://upload.jianshu.io/users/upload_avatars/6860761/b343643c-5ced-4421-ab58-1274e7bfe704" alt="">
|
||
<span>张三</span>
|
||
</div>
|
||
|
||
<input class="search" type="text" placeholder="输入搜索内容">
|
||
|
||
<div class="menu">
|
||
<div class="center">
|
||
<ul>
|
||
<li>
|
||
<a href="">首页</a>
|
||
</li>
|
||
<li>
|
||
<a href="">HTML</a>
|
||
</li>
|
||
<li>
|
||
<a href="">CSS</a>
|
||
</li>
|
||
<li>
|
||
<a href="">JavaScript</a>
|
||
</li>
|
||
<li>
|
||
<a href="">Node.js</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<ul class="menu_list">
|
||
<li>
|
||
<div class="menu_title">
|
||
<i class="iconfont icon-caidan"></i>
|
||
<span>HTML / CSS</span>
|
||
</div>
|
||
|
||
<ul class="item">
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<div class="menu_title">
|
||
<i class="iconfont icon-caidan"></i>
|
||
<span>HTML / CSS</span>
|
||
</div>
|
||
|
||
<ul class="item">
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<div class="menu_title">
|
||
<i class="iconfont icon-caidan"></i>
|
||
<span>HTML / CSS</span>
|
||
</div>
|
||
|
||
<ul class="item">
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>【学习 HTML】</h4>
|
||
<div class="des">
|
||
<img src="./html.png" alt="">
|
||
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
</body>
|
||
|
||
</html> |